Fall down

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