Elige tu propia aventura con PhaserJS

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

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 área interactiva de la pantalla, haremos uno.

Aquí puedes probar el juego:

Pasos en la realización del juego de Elije tu propia aventura con PhaserJS

Cargamos los sprites del juego

En el preload de la escena Boojt.js precargamos las imágenes:

this.load.image('back', '/assets/back.jpg');

Y en el create de las escenas, ubicamos las imágenes en pantalla:

this.add.image(0, 0, "back").setOrigin(0);

Área de la puerta pulsada

El siguiente método recibirá el contexto de la escena, las coordenadas x e y, ancho y alto de un rectángulo que será el area interactiva que el jugador puede pulsar y el nombre de la escena a la que irá el jugador al pulsar sobre la escena.

/src/utils.js

export const loadZone = (scene, x, y, width, height, nextScene) => {
  const zone = scene.add.rectangle(x, y, width, height, 0xff0000, 0.5);
  zone.setOrigin(0);
  zone.setInteractive();
  zone.once("pointerdown", () => scene.scene.start(nextScene));
};

/src/scenes/Game.js

import { loadZone } from '../utils';
...

create() {
        loadZone(this, 140, 10, 440, 400, 'Spaceship');
        loadZone(this, 590, 240, 370, 410, 'Home');
}

/src/scenes/Spaceship.js

class Spaceship extends Phaser.Scene {

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

/src/main.js

const config = {
    ...,
    scene: [Game, Spaceship, Home, Monster],
    ...
};

También podemos hacer que al pulsar en las escenas finales (la del monstruo final y la de de home) el juego se reinicie.

this.input.on("pointerdown", () => this.scene.start("game"), this);

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