Home | Clases | Videojuego sencillo con Phaser | Conclusión

Conclusión


De esta forma habríamos completado el código del juego y estaría listo para jugar.

Puedes ver una demo del juego terminado haciendo clic AQUÍ.

Utilizándolo además como punto de partida, podríamos desarrollar un juego más completo que incluya movimientos de cámara, mundos más grandes, imágenes, sonidos, dos jugadores, etc. Toda la información relativa a lo que se puede hacer con Phaser la puedes consultar AQUÍ.

Para finalizar, adjunto el código completo del fichero script.js:


//Inicia un nuevo juego de 800x600 pixels en modo de renderizado automático (Canvas si es soportado por el navegador, WebGL en caso contrario) sin id del DOM (string vacío como cuarto parámetro)
var juego = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//Declaración de variables
var plataformas; //Grupo para definir las características del suelo y las vigas
var suelo, viga1, viga2; //Para los diferentes elementos del grupo plataformas
var jugador; //Para el jugador
var cursores, sobrePlataforma; //Para los cursores y la colisión con la plataforma
var estrellas, contador, textoContador; //Para las estrellas y el contador

//Aquí cargaremos las imágenes y todos aquellos recursos de modo que estén listos para utilizarlos en el juego
function preload() {

juego.load.image('cielo', 'img/sky.png');
juego.load.image('suelo', 'img/platform.png');
juego.load.image('estrella', 'img/star.png');
juego.load.spritesheet('jugador', 'img/dude.png', 32, 48);

}

//Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {

//Habilitamos el sistema de física Arcade de Phaser (velocidad, movimientos, colisiones, etc)
juego.physics.startSystem(Phaser.Physics.ARCADE);

//Pinto el fondo
juego.add.sprite(0, 0, 'cielo');

//Inicializo el grupo para el suelo y las vigas
plataformas = juego.add.group();

//Habilito la física para cualquier elemento del grupo
plataformas.enableBody = true;

//Pinto el suelo
suelo = plataformas.create(0, juego.world.height - 64, 'suelo');

//Escalo el suelo para que ocupe el ancho completo y el doble de alto (de 400x32 a 800x64)
suelo.scale.setTo(2, 2);

//Evito que el suelo se "caiga" al caer un objeto sobre él
suelo.body.immovable = true;

//Primera viga (uso la misma imagen que para el suelo)
viga1 = plataformas.create(400, 400, 'suelo');
viga1.body.immovable = true;

//Segunda viga
viga2 = plataformas.create(-150, 250, 'suelo');
viga2.body.immovable = true;

//Dibujo el jugador con su spritesheet
jugador = juego.add.sprite(32, juego.world.height - 150, 'jugador');

//Habilitiamos la física al jugador
juego.physics.arcade.enable(jugador);

//Propiedades físicas del jugador
jugador.body.bounce.y = 0.2; //Rebote al chocar con un objeto
jugador.body.gravity.y = 300; //Gravedad
jugador.body.collideWorldBounds = true; //Hago que se choque con los bordes del juego

//Animaciones para los movimientos izquierda y derecha
jugador.animations.add('izquierda', [0, 1, 2, 3], 10, true); //Alterna esas imágenes a 10 frames por segundo en bucle
jugador.animations.add('derecha', [5, 6, 7, 8], 10, true); //Alterna esas imágenes a 10 frames por segundo en bucle

//Inicializo el movimiento de los cursores
cursores = juego.input.keyboard.createCursorKeys();

//Creo un grupo para las estrellas
estrellas = juego.add.group();

//Habilito la física para cualquier elemento del grupo
estrellas.enableBody = true;

//Creo 12 estrellas desde el cielo (x = 0= separadas 70px entre ellas
for (var i = 0; i < 12; i++) {

//Estrella individual
var estrella = estrellas.create(i * 70, 0, 'estrella');

//Le doy gravedad para que caiga
estrella.body.gravity.y = 300;

//Le doy un rebote aleatorio para que no sean todas iguales
estrella.body.bounce.y = 0.3 + Math.random() * 0.2;
}

//Inicio el contador y lo muestro como texto
contador = 0;
textoContador = juego.add.text(16, 16, 'Puntos: 0', { fontSize: '32px', fill: '#000' });

}

//Aquí añadimos lo que debe ir actualizándose a medida que transcurre el videojuego
function update() {

//Variable que comprueba si el jugador está chocando con una plataforma
var sobrePlataforma = juego.physics.arcade.collide(jugador, plataformas);

//Permito que las estrellas choquen con las plataformas
juego.physics.arcade.collide(estrellas, plataformas);

//Reseteo la velocidad del jugador
jugador.body.velocity.x = 0;

//Mover a la izquierda
if (cursores.left.isDown){

jugador.body.velocity.x = -150;
jugador. animations.play('izquierda');

//Mover a la derecha
} else if (cursores.right.isDown) {

jugador.body.velocity.x = 150;
jugador.animations.play('derecha');
}
//Quedarse quieto
else {

jugador.animations.stop();
jugador.frame = 4;
}

//Saltar (si está tocando una plataforma
if (cursores.up.isDown && jugador.body.touching.down && sobrePlataforma){

jugador.body.velocity.y = -350;

}

//Recoger estrella (comprobando el solapado entre la estrella y el jugador y llamando a la función recogerEstrella)
juego.physics.arcade.overlap(jugador, estrellas, recogerEstrella, null, this);

}

//Borrar estrella y actualizar contador
function recogerEstrella(jugador, estrella) {

//Borro la estrella de la panatalla
estrella.kill();

//Incremento el contador y actualizo la visualización
contador += 10;
textoContador.text = 'Puntos: ' + contador;

}

Fecha de publicación: 01/02/2018
Asignaturas: realización de proyectos multimedia interactivosmontaje y mantenimiento de equipos
Temas: phaser video sonido para videojuegos
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos