Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Carga fondo
preload() {
this.load.image('fondo', '../img/fondo.jpg');
}
create() {
this.add.sprite(480, 320, 'fondo');
}
Carga caras
preload() {
this.load.image('fondo', '../img/fondo.jpg');
this.load.image('caraIMG0', '../img/cara0.png');
this.load.image('caraIMG1', '../img/cara1.png');
this.load.image('caraIMG2', '../img/cara2.png');
}
create(){
this.cara0 = this.add.sprite(225, 425, 'caraIMG0').setScale(0.5, 0.5);
this.cara1 = this.add.sprite(480, 460, 'caraIMG1').setScale(0.5, 0.5);
this.cara2 = this.add.sprite(740, 425, 'caraIMG2').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
cargarImagenes(){
let numeros = [0, 1, 2, 3, 4, 5, 6];
this.randomizeArray(numeros);
this.cara0.setTexture(`caraIMG${numeros[0]}`);
this.cara1.setTexture(`caraIMG${numeros[1]}`);
this.cara2.setTexture(`caraIMG${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, 'caraIMG0');
cargarImagenes();
}
cargarImagenes(){
...
const caraEscogida = this[`cara${Math.floor(Math.random() * 3)}`];
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
class PerderEscena extends Phaser.Scene {
constructor() {
super('perderScene');
}
preload() {
this.load.image('fin', '../img/perder-juego.jpg');
}
create() {
this.add.image(480, 320, 'fin');
this.input.on('pointerdown', () => this.volverAJugar())
}
volverAJugar() {
this.scene.start('Escena');
}
}