Acierta imagen en PhaserJS

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

Carga fondo

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

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

Carga caras

preload() {
	this.load.image('fondo', '../img/fondo.jpg');
	this.load.image('face0', '../img/cara0.png');
	this.load.image('face1', '../img/cara1.png');
	this.load.image('face2', '../img/cara2.png');
}

create(){
	this.cara0 = this.add.sprite(225, 425, 'face0').setScale(0.5, 0.5);
	this.cara1 = this.add.sprite(480, 460, 'face1').setScale(0.5, 0.5);
	this.cara2 = this.add.sprite(740, 425, 'face2').setScale(0.5, 0.5);
}

Cara pulsada

create(){
	...
	this.cara0.setInteractive();
	this.cara0.on('pointerdown', () => this.caraPulsada(this.cara0));
}

caraPulsada(cara) {
	alert(cara.texture.key);
}

Caras aleatorias

create(){
	const numeros = [0, 1, 2, 3, 4, 5, 6];
	this.randomizeArray(numeros);
	
	this.cara0.setTexture(`face${numeros[0]}`);
	this.cara1.setTexture(`face${numeros[1]}`);
	this.cara2.setTexture(`face${numeros[2]}`);
}

randomizeArray(array) {
	return array.sort(() => Math.floor(Math.random() * 3) -1);
}

Imagen solución random

create(){
	...
	this.spriteSolucion = this.add.sprite(470, 190, 'face0');
	const caraEscogida = 'face' + Math.floor(Math.random() * 6);
	this.spriteSolucion.setTexture(caraEscogida.texture.key);
}

Evalúa solución

caraPulsada(cara) {
	if (cara.texture.key === this.spriteSolucion.texture.key) {
		alert('éxito');
	} else {
		alert('fracaso');
	}
}

Marcador

Para cargar una tipografía externa en nuestro proyecto:

<style>
    @font-face {
        font-family: font1;
        src: url('../img/redkost-comic.otf');
        font-weight:400;
        font-weight:normal;
    }
</style>
<div style="font-family:font1;position: absolute;left: -1000px;visibility: hidden;">.</div>

Debemos cargar dos textos para el marcador, uno dinámico que aumenta cuando el usuario acierta:

create() {
	...
	this.marcador = 0;
	this.marcadorTXT = this.add.text(90, 120, this.marcador, {
	    fontFamily: 'font1',
	    fontSize: 60,
	    color: '#00ff00',
	    align: 'right'
	});
	this.marcadorTXT.setOrigin(1, 0);
}

El siguiente código establece el nuevo marcador cada vez que el usuario acierta

++this.marcador;
this.marcadorTXT.setText(this.marcador);

Y otro que tendrá la palabra pts:

this.add.text(105, 150, 'pts', {
    fontFamily: 'font1',
    fontSize: 24,
    color: '#00ff00'
});

Temporizador

this.topeDeTiempo = 10;
this.tiempo = this.topeDeTiempo;
this.tiempoTXT = this.add.text(835, 130, this.tiempo, {
    fontFamily: 'font1',
    fontSize: 64,
    color: '#00ff00',
});
this.tiempoTXT.rotation = 20*Math.PI/180;
this.temporizador();

temporizador() {
    --this.tiempo;
    this.tiempoTXT.setText(this.tiempo);
    if (this.tiempo === 0) {
        alert('Se acabó el tiempo');
    } else {
        this.time.delayedCall( 1000, this.temporizador, [], this);
    }
}

Escena de perder

import lose from './assets/lose.jpg';

class Lose extends Phaser.Scene {
    constructor() {
        super('Lose');
    }
    preload() {
        this.load.image('loseBack', '../img/perder-juego.jpg');
    }
    create() {
        this.add.image(480, 320, 'loseBack');
        this.input.on('pointerdown', () => this.volverAJugar())
    }
    volverAJugar() {
        this.scene.start('Main');
    }
}