Build a HTML5 game like “Magick” iPad game using Phaser and ARCADE physics – adding multiple levels

Time to see how to add multiple levels to Magick game. I created four levels with Tiled, in four different layers.

At the moment we have four different tiles: a ground tile, the block tile which can be added by players, a deadly tile and the exit tile.

Look at the prototype:

Try to complete all levels. Actually levels 1 and 3 are quite easy.

The player walks and climbs on his own, you can only click anywhere on an empty spot to summon a block, but you can summon only one blockat once.

You can also change player direction by tapping on it.

The core of this prototype is in filterTiles method which allows you to define tiles subsets and define what happens when the player overlaps such tiles.

The source code is pretty straightforward and consists in one HTML file, one CSS file and six TypeScript files.

It’s still uncommented, I will add comment during next steps, when I’ll add more tile types.

index.html

The web page which hosts the game, to be run inside thegame element.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="main.js"></script> 
    </head>
    <body>   
        <div id = "thegame"></div>
    </body>
</html>

style.css

The cascading style sheets of the main web page.

* {
    padding : 0;
    margin : 0;
}

body {
    background-color: #000000;    
}

canvas {
    touch-action : none;
    -ms-touch-action : none;
}

gameOptions.ts

Configurable game options. It’s a good practice to place all configurable game options, if possible, in a single and separate file, for a quick tuning of the game. I also grouped the variables to keep them more organized.

// CONFIGURABLE GAME OPTIONS
// changing these values will affect gameplay

export const GameOptions = {

    player : {
        speed : 120,
        jumpSpeed : {
            x : 30,
            y : -100
        },
        gravity : 400,
        triggerRadius : 32
    },

    tileSize : 32
}

main.ts

This is where the game is created, with all Phaser related options.

// MAIN GAME FILE

// modules to import
import Phaser from 'phaser';
import { PreloadAssets } from './preloadAssets';
import { PlayGame } from './playGame';

// object to initialize the Scale Manager
const scaleObject : Phaser.Types.Core.ScaleConfig = {
    mode : Phaser.Scale.FIT,
    autoCenter : Phaser.Scale.CENTER_BOTH,
    parent : 'thegame',
    width : 800,
    height : 320
}

// game configuration object
const configObject : Phaser.Types.Core.GameConfig = {
    type : Phaser.AUTO,
    backgroundColor : 0x000000,
    scale : scaleObject,
    scene : [PreloadAssets, PlayGame],
    physics : {
        default : 'arcade',
        arcade : {
            gravity : {
                y : 0
            }
        }
    }
}

// the game itself
new Phaser.Game(configObject);

preloadAssets.ts

Here we preload all assets to be used in the game.

// CLASS TO PRELOAD ASSETS
 
// this class extends Scene class
export class PreloadAssets extends Phaser.Scene {
 
    // constructor    
    constructor() {
        super({
            key : 'PreloadAssets'
        });
    }
 
    // method to be execute during class preloading
    preload() : void {

        this.load.image('tiles', 'assets/sprites/tiles.png');
        this.load.tilemapTiledJSON('map', 'assets/maps/map.json');
        this.load.image('player', 'assets/sprites/player.png');
       
    }
 
    // method to be called once the instance has been created
    create() : void {

        // call PlayGame class
        this.scene.start('PlayGame');
    }
}

playGame.ts

Main game file, all game logic is stored here.

// THE GAME ITSELF

import { GameOptions } from './gameOptions';
import { Player } from './player';
import { MapUtils } from './mapUtils';

enum TileType {
    None,
    Ground,
    Block,
    Deadly,
    Exit    
}

// this class extends Scene class
export class PlayGame extends Phaser.Scene {

    constructor() {
        super({
            key : 'PlayGame'
        });
    }

    map : Phaser.Tilemaps.Tilemap;
    player : Player;
    levelLayer : Phaser.Tilemaps.TilemapLayer;
    specialTiles : Phaser.Tilemaps.Tile[];
    currentLevel : number;

    init(data : any) : void {
        if (data.level != undefined) {
            if (data.level > 4) {
                data.level = 1;
            }
            this.currentLevel = data.level;
        }
        else {
            this.currentLevel = 1;
        }
    }
  
    // method to be executed when the scene has been created
    create() : void {
        this.map = this.make.tilemap({
            key : 'map'
        });        
        let tileSet : Phaser.Tilemaps.Tileset = this.map.addTilesetImage('tileset01', 'tiles') as Phaser.Tilemaps.Tileset;
        this.levelLayer = this.map.createLayer('Level' + this.currentLevel.toString(), tileSet) as Phaser.Tilemaps.TilemapLayer;
        this.map.setCollisionBetween(TileType.Ground, TileType.Block);
        this.specialTiles = this.map.filterTiles(this.filterSpecialTiles, this) as Phaser.Tilemaps.Tile[];
        this.player = new Player(this, 128, 128);
        this.input.on('pointerdown', this.handleInput, this);        
    }

    filterSpecialTiles(tile : Phaser.Tilemaps.Tile) : boolean {
        return tile.index == TileType.Deadly || tile.index == TileType.Exit;
    }

    handleInput(pointer : Phaser.Input.Pointer) : void {
        if (Phaser.Math.Distance.Between(pointer.x, pointer.y, this.player.x, this.player.y) < GameOptions.player.triggerRadius) {
            this.player.changeDirection();    
        }  
        else {
            MapUtils.addTile(this.map, pointer.x, pointer.y);
        }  
    }

    handleSpecialTiles(player : any, tile : any) : void {
        switch (tile.index) {
            case TileType.Deadly :
                this.scene.start('PlayGame', {
                    level : this.currentLevel
                }); 
                break;
            case TileType.Exit :
                this.scene.start('PlayGame', {
                    level : this.currentLevel + 1
                }); 
                break;
        }
    }

    movePlayer() : void {
        this.player.move(this.map);
    }

    update() : void {
        this.player.stopMoving();
        this.physics.world.collide(this.player, this.levelLayer, this.movePlayer, undefined, this);
        this.physics.world.overlapTiles(this.player, this.specialTiles, this.handleSpecialTiles, undefined, this);
    }

}

player.ts

The player, a custom class which extends Phaser.Physics.Arcade.Sprite object.

// PLAYER CLASS EXTENDS PHASER.PHYSICS.ARCADE.SPRITE

import { GameOptions } from './gameOptions';

export class Player extends Phaser.Physics.Arcade.Sprite {

    isJumping : boolean;
    direction : number;
    body : Phaser.Physics.Arcade.Body;

    constructor(scene : Phaser.Scene, posX : number, posY : number) {
        super(scene, posX, posY, 'player');
        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.isJumping = false;
        this.direction = 1;
        this.body.gravity.y = GameOptions.player.gravity;
    }

    move(map : Phaser.Tilemaps.Tilemap) : void {
        if (this.body.blocked.down) {
            this.body.setVelocityX(GameOptions.player.speed * this.direction);
            this.isJumping = false;
        }
        if (this.body.blocked.right && this.direction == 1) {
            if ((!map.getTileAtWorldXY(this.x + GameOptions.tileSize, this.y - GameOptions.tileSize) && !map.getTileAtWorldXY(this.x, this.y - GameOptions.tileSize)) || this.isJumping) {
                this.jump();
            }
            else {
                this.direction *= -1;
            }
        }
        if(this.body.blocked.left && this.direction == -1) {
            if((!map.getTileAtWorldXY(this.x - GameOptions.tileSize, this.y - GameOptions.tileSize) && !map.getTileAtWorldXY(this.x, this.y - GameOptions.tileSize)) || this.isJumping) {
                this.jump();
            }
            else {
                this.direction *= -1;
            }
        }
    }

    changeDirection() : void {
        this.direction *= -1;
    }

    stopMoving() : void {
        this.setVelocityX(0);
    }

    jump() : void {
        this.body.setVelocity(GameOptions.player.jumpSpeed.x * this.direction, GameOptions.player.jumpSpeed.y);
            this.isJumping = true;
        }
}

mapUtils.ts

A simple class to store map utilities.

export class MapUtils {

    static tilePoint : Phaser.Math.Vector2 | null = null;
    
    static addTile(map: Phaser.Tilemaps.Tilemap, posX: number, posY: number) {
        if (!map.getTileAtWorldXY(posX, posY)) {
            if (this.tilePoint != null) {
                map.removeTileAtWorldXY(this.tilePoint.x, this.tilePoint.y);
            }
            map.putTileAtWorldXY(2, posX, posY);
            this.tilePoint = new Phaser.Math.Vector2(posX, posY);
        }      
    }
}

Once you are able to design levels, the limit is the sky, but we’ll see how to add more tile types in next steps, meanwhile download the source code.