This is the first time I publish a tutorial about the making of an upcoming game, but I stumbled upon Stuffed Wombat‘s upcoming game, “qomp“, and it’s already on my wish list.

You’ll love the concept: what if the ball of Pong game, trapped between paddles since 1972, manages to escape?
A simple concept for a one-button game where you control the bouncing ball and you can only invert its vertical speed by tapping the screen.
Look at the prototype I built:
Just tap or click the game to make the hero change direction, try to bounce here and there and explore the whole level.
The source code is really simple, so here it is, completely commented:
let game; let gameOptions = { // hero horizontal speed, in pixels per second heroSpeed: 150 } window.onload = function() { let gameConfig = { type: Phaser.AUTO, backgroundColor: 0x444444, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, parent: "thegame", width: 640, height: 480 }, physics: { default: "arcade", arcade: { gravity: { y: 0 } } }, scene: playGame } game = new Phaser.Game(gameConfig); } class playGame extends Phaser.Scene{ constructor(){ super("PlayGame"); } preload(){ this.load.tilemapTiledJSON("level", "level.json"); this.load.image("tile", "tile.png"); this.load.image("hero", "hero.png"); } create(){ // creation of "level" tilemap this.map = this.make.tilemap({ key: "level" }); // add tiles to tilemap let tile = this.map.addTilesetImage("tileset01", "tile"); // which layers should we render? That's right, "layer01" this.layer = this.map.createStaticLayer("layer01", tile); // layer (wall) is enabled for collision this.layer.setCollision(1); // add the hero sprite and enable arcade physics for the hero this.hero = this.physics.add.sprite(260, 376, "hero"); // make hero bounce this.hero.setBounce(1); // set hero velocity this.hero.setVelocity(gameOptions.heroSpeed * Math.cos(Math.PI / 4), gameOptions.heroSpeed * Math.sin(Math.PI / 4)); // listener for input this.input.on("pointerdown", this.changeDirection, this); // set world bounds to allow camera to follow the hero this.cameras.main.setBounds(0, 0, 1920, 1440); // make the camera follow the hero this.cameras.main.startFollow(this.hero); } // method to make the change direction changeDirection(){ // invert hero y velocity this.hero.body.velocity.y *= -1; } // method to be executed at each frame update(){ // handle collision between hero and tiles this.physics.world.collide(this.hero, this.layer); // flip hero according to direction this.hero.flipX = this.hero.body.velocity.x < 0; } }
Obviously the original game has a lot of additional features, but this is how I’d build player movement and collision detection. Download the source code.