Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about PixelField game, Game development, HTML5, Javascript and Phaser.

I always ask to myself where in the world is Tonypa now. I loved his Flash games and I already ported to HTML5 one of his old glories, Turnellio.

Now it’s time to continue the PixelField series started in 2008, porting the prototype to HTML5 using Phaser, and obviously trying to give a new life to a gameplay which now looks a bit obsolete.

You control a rotating square – a triangle in the original game – with little squares attached to its vertices through elastic strings.

By tapping on the stage, you teleport the rotating square, but elastic strings will cause little squares to bounce here and there.

I have an idea about making this game more enjoyable on moder mobile devices, but at the moment let me show you the basics of player movement:

Tap around the canvas and see what happens.

The source code is uncommented at the moment because the concept has already been explained in the tutorial series.

let game;

let gameOptions = {
    bigSquareSize: 100,
    smallSquareSize: 25,
    satelliteDistance: 200,
    speedScale: 0.01,
    friction: 0.95
}
window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        backgroundColor: 0x222222,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 750,
            height: 1334
        },
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}
class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    create() {
        this.elasticsGraphics = this.add.graphics();
        let bigSquareGraphics = this.make.graphics();
        bigSquareGraphics.fillStyle(0xff0000, 1);
        bigSquareGraphics.fillRect(0, 0, gameOptions.bigSquareSize, gameOptions.bigSquareSize);
        bigSquareGraphics.generateTexture("bigSquare", gameOptions.bigSquareSize, gameOptions.bigSquareSize);
        let smallSquareGraphics = this.make.graphics();
        smallSquareGraphics.fillStyle(0xff0000, 1);
        smallSquareGraphics.fillRect(0, 0, gameOptions.smallSquareSize, gameOptions.smallSquareSize);
        smallSquareGraphics.generateTexture("smallSquare", gameOptions.smallSquareSize, gameOptions.smallSquareSize);
        this.bigSquare = this.add.sprite(game.config.width / 2, game.config.height / 2, "bigSquare");
        this.smallSquares = [];
        for(let i = 0; i < 4; i ++) {
            this.smallSquares.push({
                sprite: this.add.sprite(game.config.width / 2, game.config.height / 2, "smallSquare"),
                xSpeed: 0,
                ySpeed: 0
            })
        }
        this.input.on("pointerdown", this.moveSquare, this);
    }
    moveSquare(e) {
        this.bigSquare.x = e.x;
        this.bigSquare.y = e.y;
    }
    update() {
        this.elasticsGraphics.clear();
        this.elasticsGraphics.lineStyle(1, 0x00ff00);
        this.bigSquare.angle ++;
        for(let i = 0; i < 4; i ++) {
            let perfectX = this.bigSquare.x + gameOptions.satelliteDistance * Math.cos(this.bigSquare.rotation + i * Math.PI / 2 + Math.PI / 4);
            let perfectY = this.bigSquare.y + gameOptions.satelliteDistance * Math.sin(this.bigSquare.rotation + i * Math.PI / 2 + Math.PI / 4);
            let distanceX = (perfectX - this.smallSquares[i].sprite.x) * gameOptions.speedScale;
            let distanceY = (perfectY - this.smallSquares[i].sprite.y) * gameOptions.speedScale;
            this.smallSquares[i].xSpeed += distanceX;
            this.smallSquares[i].ySpeed += distanceY;
            this.smallSquares[i].xSpeed *= gameOptions.friction;
            this.smallSquares[i].ySpeed *= gameOptions.friction;
            this.smallSquares[i].sprite.x += this.smallSquares[i].xSpeed;
            this.smallSquares[i].sprite.y += this.smallSquares[i].ySpeed;
            this.smallSquares[i].sprite.angle = this.bigSquare.angle;
            this.elasticsGraphics.lineBetween(this.bigSquare.x, this.bigSquare.y, this.smallSquares[i].sprite.x, this.smallSquares[i].sprite.y)
        }
    }
}

Now I am going to add collectible items, a limited number of jumps, some deadly obstacle, and I think I will manage to give a new life to this game. Download the source code.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.