Now spawn 10 collectibles in your PlayScene:
if (Math.abs(this.body.vel.x) > 0.5) { this.renderable.setCurrentAnimation("walk"); } else { this.renderable.setCurrentAnimation("idle"); } }
Refresh your browser. You should see an orange square that moves left and right with the arrow keys. Create src/js/entities/Collectible.js :
// Inside onResetEvent() after adding player for (let i = 0; i < 10; i++) { const coin = new Collectible( Math.random() * (me.game.viewport.width - 32), Math.random() * 200 // Only top part of screen ); me.game.world.addChild(coin); } melonJS uses bounding boxes automatically. To detect when the player touches a collectible, add this to your PlayerEntity.update() method (before return true ):