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;