Melonjs Tutorial May 2026

In your PlayScene:

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 tutorial

import me from "melong-js"; export default class ScoreLabel extends me.Renderable { constructor() { super(10, 10, 100, 50); this.score = 0; this.font = new me.Font("Arial", 24, "#FFFFFF"); } In your PlayScene: Now run the game

// Input handling this.left = false; this.right = false; this.score = 0

constructor(x, y) { super(x, y, { width: 32, height: 32 }); // Load sprite this.renderable = new me.Sprite(0, 0, { image: me.loader.getImage("player_sprite") }); this.renderable.addAnimation("idle", [0]); this.renderable.addAnimation("walk", [0, 1, 2, 1], 100); this.renderable.setCurrentAnimation("idle"); }

Now register this entity in your main scene ( src/js/scenes/PlayScene.js ):