Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Cargar fondo
Defimos la estructura de ficheros de nuestra aplicación y cargamos la imagen de fondo de la primera escena.
Físicas
create() {
...
this.physics.add.image(50, 100, 'misil0');
}
const config = {
type: Phaser.AUTO,
width: 960,
height: 640,
scene: Escena,
scale: {
mode: Phaser.Scale.FIT
},
physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: {
y: 300,
},
},
},
};
Poner nuevos misiles cada cierto tiempo
lanzarMisil() {
const misil = this.physics.add.sprite(50, 100, 'misil0');
misil.setVelocity(0, 100);
this.time.delayedCall(1000, this.lanzarMisil, [], this);
}
Detectar pulsación
misil.setInteractive();
misil.on('pointerdown', () => this.misilPulsado(misil));
misilPulsado(m) {
m.destroy();
}
Misiles variados
const aleatorio = Math.floor(Math.random() * 2);
const misil = this.physics.add.sprite(50, 100, `misil${aleatorio}`).setInteractive();
Diferentes posiciones
lanzarMisil() {
...
const posicionMisil = Math.floor(Math.random() * (config.width-100)) + 50;
...
}
Perder
this.physics.world.on('worldbounds', () => {
alert('fin del juego');
});
misil.setCollideWorldBounds(true);
misil.body.onWorldBounds = true;
Escena de fin de juego
Creamos la escena a la que iremos cuando perdamos.
Cohetes explotan
preload() {
...
this.load.spritesheet('explosion', 'img/crash.png', {
frameWidth: 199,
frameHeight: 200
});
}
create() {
...
this.anims.create({
key: 'explosionAnim',
frames: this.anims.generateFrameNumbers('explosion', {start: 0, end: 4}),
frameRate: 7
});
this.lanzarMisil();
}
misilPulsado(m) {
m.play("explosionAnim");
m.setCollideWorldBounds(false);
}
Cohetes explotan y desaparecen
misil.on('animationcomplete', this.animationComplete, this);
...
animationComplete(animation, frame, sprite) {
if (animation.key === 'explosionAnim') {
sprite.disableBody(true, true);
sprite.destroy();
}
}
Poner vidas en pantalla
preload(){
...
this.load.spritesheet('vida', 'img/vida.png', {
frameWidth: 50,
frameHeight: 50
});
}
create(){
...
this.vida1 = this.add.sprite(50, 30, 'vida');
this.vida2 = this.add.sprite(100, 30, 'vida');
this.vida3 = this.add.sprite(150, 30, 'vida');
}
Gestionar vidas
create(){
...
this.contadorVidas = 3;
this.anims.create({
key: 'sinVida',
frames: this.anims.generateFrameNumbers('vida', {start: 1, end: 2}),
frameRate: 1
});
this.physics.world.on('worldbounds', (target) => {
target.enable = false;
target.gameObject.play("explosionAnim");
--this.contadorVidas;
if (this.contadorVidas == 2) {
this.vida3.play("sinVida");
}else if (this.contadorVidas == 1) {
this.vida2.play("sinVida");
}else if (this.contadorVidas == 0) {
this.vida1.play("sinVida");
this.scene.start('perderScene');
}
});
}