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