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('back', back);
}

create() {
 this.add.sprite(gameWidth/2, gameHeight/2, 'back');
}

Carga caras

preload() {
 this.load.image('back', back);
 this.load.image('face0', face0);
 this.load.image('face1', face1);
 this.load.image('face2', face2);
}

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

Cara pulsada

create(){
 ...
        this.face0.setInteractive().on('pointerdown', () => this.clickedFace(this.face0));
 this.face1.setInteractive().on('pointerdown', () => this.clickedFace(this.face1));
        this.face2.setInteractive().on('pointerdown', () => this.clickedFace(this.face2));
}
clickedFace(face) {
 alert(face.texture.key);
}

Caras aleatorias

create(){
 ...
 newTurn();
}

newTurn(){
 const numbers = [0, 1, 2, 3, 4, 5, 6];
 this.randomizeArray(numbers );
 
 this.face0.setTexture(`face${numbers [0]}`);
 this.face1.setTexture(`face${numbers [1]}`);
 this.face2.setTexture(`face${numbers [2]}`);
}

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

Imagen solución random

create(){
 ...
 this.spriteSolution = this.add.sprite(470, 190, 'face0');
}

newTurn(){
 ...
 const choosedFace = 'face' + numbers[Math.floor(Math.random() * 3)];
 this.spriteSolution.setTexture(choosedFace);
}

Evalúa solución

clickedFace(face) {
 if (face.texture.key === this.spriteSolution.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('/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.score = 0;
 this.scoreTXT = this.add.text(90, 120, this.score, {
     fontFamily: 'font1',
     fontSize: 60,
     color: '#00ff00',
     align: 'right'
 });
 this.scoreTXT.setOrigin(1, 0);
}

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

++this.score;
this.scoreTXT.setText(this.score);

Y otro que tendrá la palabra pts:

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

Temporizador

create(){
    ...
    this.timeLimit = 10;
    this.timing= this.timeLimit ;
    this.timeTXT = this.add.text(835, 130, this.timing, {
        fontFamily: 'font1',
        fontSize: 64,
        color: '#00ff00',
    });
    this.timeTXT.rotation = 20*Math.PI/180;
    this.timer();
}

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

Si acertamos la imagen, vamos a resetear el tiempo para que vuelva a comenzar en 10 segundos.

clickedFace(face) {
    if (face.texture.key === this.spriteSolution.texture.key) {
        ...
        this.timing = 10;
        this.newTurn();
    }
    ...
}

Escena de perder

class Lose extends Phaser.Scene {
    constructor() {
        super('Lose');
    }
    preload() {
        this.load.image('lose', lose);
    }
    create() {
        this.add.image(gameWidth/2, gameHeight/2, 'lose');
        this.input.on('pointerdown', () => this.replay())
    }
    replay() {
        this.scene.start('ChooseFaces');
    }
}

export default Lose;

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