Elige tu propia aventura con PhaserJS

Vamos a programar nuestro primer videojuego con Phaser. Es un juego basado en los conocidos libros de elige tu propia aventura. En nuestro juego, el jugador visualizará una pantalla con dos opciones. Debe escoger una de ellas haciendo click en su correspondiente imagen. Dependiendo de la imagen pulsada, el jugador será redireccionado a una u otra escena. Por tanto, dependiendo de sus decisiones el juego puede tener un final feliz o desastroso.

Para este primer juego trabajaremos intensamente con los cambios de escena, ya que cada vez que el jugador haga click sobre un area interactiva de la pantalla, haremos uno.

Cargamos el fondo

class Escena extends Phaser.Scene {
	preload() {
		this.load.image('fondo', '../img/espacio.jpg');
	};

	create() {
		this.add.sprite(480, 320, 'fondo');
	};
}

Area de la puerta pulsada

create(){
	...
	const opcionNave = this.add.zone(140, 10, 450, 410);
	opcionNave.setOrigin(0);
	opcionNave.setInteractive();
	opcionNave.once('pointerdown', () => this.opcionPulsada('nave'));
	this.add.graphics().lineStyle(2, 0xff0000).strokeRectShape(opcionNave);
}

opcionPulsada(opcion) {
	alert(opcion);
}

Evalúa opción

opcionPulsada(opcion) {
	if (opcion === 'nave') {
		alert('nave');
	} else {
		alert('tierra');
	}
}

Con cambio de escena

opcionPulsada(opcion) {
	if (opcion === 'nave') {
		this.scene.start('naveScene');
	} else {
		this.scene.start('homeScene');
	}
}

class EscenaNave extends Phaser.Scene {

	constructor() {
		super('naveScene');
	}
	...
}

const config = {
    ...,
    scene: [Escena, EscenaNave, EscenaHome, EscenaMonstruo],
    ...
};

Escena nave