Now run the game. Move your orange square into the gold squares – they disappear and you get a console log. Create src/js/ui/ScoreLabel.js :
melonJS is a lightweight, modern HTML5 game engine. It gives you a battle-tested , a built-in level editor (Tiled) support, and a renderer that punches above its weight class.
import me from "melong-js"; export default class Collectible extends me.Entity { constructor(x, y) { super(x, y, { width: 16, height: 16 }); this.color = "#FFD700"; // Gold this.value = 10; } melonjs tutorial
import me from "melong-js"; import PlayerEntity from "../entities/Player"; export default class PlayScene extends me.Scene { onResetEvent() { // Bind input keys me.input.bindKey(me.input.KEY.LEFT, "left"); me.input.bindKey(me.input.KEY.RIGHT, "right");
Now register this entity in your main scene ( src/js/scenes/PlayScene.js ): Now run the game
Don’t forget to preload the image in your src/js/resources.js :
draw(renderer) { this.font.draw(renderer, `Score: ${this.score}`, this.pos.x, this.pos.y); } } It gives you a battle-tested , a built-in
draw(renderer) { renderer.setColor(this.color); renderer.fillRect(this.pos.x, this.pos.y, this.width, this.height); } }