Snake (el jugador se mueve utilizando velocidades)

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Pasos en la realización del juego Snake con PhaserJS

Colocar al player en pantalla


preload() {
        this.load.image('player', player);
}

create() {
        const coordinates = getRandomXYCoordinates();
        this.player = this.physics.add.sprite(coordinates.x, coordinates.y, 'player');
}

getRandomXYCoordinates() {
        const playerWidth = 20;
        const x = Phaser.Math.Between(0, gameWidth/playerWidth);
        const y = Phaser.Math.Between(0, gameHeight/playerWidth);
        return { x: x*playerWidth, y: y*playerWidth };
}

Mover al jugador


create() {
        ...
        this.movePlayer();
}

movePlayer() {
        this.player.x += step;
        this.time.addEvent({ delay: 100, callback: this.movePlayer, callbackScope: this });
}

Mover al jugador en la dirección de las flechas

create() {
        ...
        this.cursors = this.input.keyboard.createCursorKeys();
        this.direction = 'right';
}

update() {
        if (this.cursors.left.isDown) {
            this.direction = 'left';
        } else if (this.cursors.right.isDown) {
            this.direction = 'right';
        } else if (this.cursors.up.isDown) {
            this.direction = 'up';
        } else if (this.cursors.down.isDown) {
            this.direction = 'down';
        }
}

movePlayer() {
        if (this.direction === 'right') {
            this.player.x += step;
        } else if (this.direction === 'left') {
            this.player.x -= step;
        } else if (this.direction === 'up') {
            this.player.y -= step;
        } else if (this.direction === 'down') {
            this.player.y += step;
        }
        this.time.addEvent({ delay: 100, callback: this.movePlayer, callbackScope: this });
}

Ponemos la comida en pantalla

createFood() {
        const coordinates = getRandomXYCoordinates();
        this.food = this.physics.add.sprite(coordinates.x, coordinates.y, 'food');
}

repositionFood() {
        const coordinates = getRandomXYCoordinates();
        this.food.x = coordinates.x;
        this.food.y = coordinates.y;
}

Detectamos la colisión entre el player y la comida

create() {
        ...
        this.physics.add.overlap(this.player, this.food, this.collisionHandler, null, this);

}

collisionHandler(player, food) {
        alert('Colisión entre player y food')
}

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.