diff --git a/res/gui.png b/res/gui.png new file mode 100644 index 0000000..a102ef4 Binary files /dev/null and b/res/gui.png differ diff --git a/src/Res.js b/src/Res.js index 5c4365c..c45283e 100644 --- a/src/Res.js +++ b/src/Res.js @@ -57,6 +57,7 @@ var imagenes = { puntos_400: "res/400pts.png", /** GUI **/ + gui : "res/gui.png", icono_vidas : "res/vida.png", icono_puntos : "res/icono_puntos.png", menu_fondo : "res/menuImg.png", diff --git a/src/controles/EventosTeclado.js b/src/controles/EventosTeclado.js index 1c6f92d..b6991ed 100644 --- a/src/controles/EventosTeclado.js +++ b/src/controles/EventosTeclado.js @@ -26,6 +26,9 @@ function onKeyDown( event) { case 37: controles.moverX = -1; break; + case 27: + controles.pausa = true; + break; } } diff --git a/src/layers/GameLayer.js b/src/layers/GameLayer.js index ca51461..99d3576 100644 --- a/src/layers/GameLayer.js +++ b/src/layers/GameLayer.js @@ -16,8 +16,10 @@ class GameLayer extends Layer { iniciar() { this.botonDisparo = new Boton(imagenes.boton_disparo,480*0.87,320*0.55, 0.5, 0.5); + this.botonPausa = new Boton(imagenes.boton_pausa,480*0.97,320*0.065, 0.5, 0.5); this.pad = new Pad(480*0.75,320*0.8); - this.fondo = new Fondo(imagenes.fondo, 480*0.5,320*0.5) + this.fondo = new Fondo(imagenes.fondo, 480*0.5,320*0.5); + this.gui = new Fondo(imagenes.gui, 480*0.5,320*0.5); this.espacio = new Espacio(0); @@ -33,15 +35,15 @@ class GameLayer extends Layer { this.puntosImagenes = []; - this.fondoPuntos = new Fondo(imagenes.icono_puntos, 480*0.85,320*0.05); + this.puntos = new Texto(this.controladorJuego.getPuntosTotales(),480*0.87,320*0.215); - this.puntos = new Texto(this.controladorJuego.getPuntosTotales(),480*0.9,320*0.07); + this.vidas = new Texto(this.controladorJuego.vidas, 480*0.85, 320*0.265); - this.vidas = new Texto(this.controladorJuego.vidas, 480*0.8, 320*0.07); + this.balas = new Texto(0, 480*0.85, 320*0.3175); - this.balas = new Texto(0, 480*0.7, 320*0.07); + this.nivel = new Texto(this.controladorJuego.nivelActual + 1, 480*0.84, 320*0.415); - this.nivel = new Texto(this.controladorJuego.nivelActual + 1, 480*0.7, 320*0.20); + this.jefeFinalGenerado = new Texto("JEFE GENERADO", 480*0.765, 320*0.45, "red"); this.ultimoEstadoJuego = estadosJuego.normal; @@ -249,6 +251,7 @@ class GameLayer extends Layer { dibujar() { this.fondo.dibujar(); + this.gui.dibujar(); this.recolectables.forEach((item) => item.dibujar()); this.puntosImagenes.forEach((item) => item.dibujar()); @@ -261,11 +264,13 @@ class GameLayer extends Layer { this.enemigosBoss.forEach((item) => item.dibujar()); //HUD - this.fondoPuntos.dibujar(); this.puntos.dibujar(); this.vidas.dibujar(); this.balas.dibujar(); this.nivel.dibujar(); + this.botonPausa.dibujar(); + if(this.controladorJuego.fueGeneradoBoss) + this.jefeFinalGenerado.dibujar(); if ( !this.pausa && entrada == entradas.pulsaciones) { this.botonDisparo.dibujar(); this.pad.dibujar(); @@ -280,6 +285,12 @@ class GameLayer extends Layer { } procesarControles( ){ + if(controles.pausa) { + this.mensaje = new Boton(imagenes.mensaje_pausa, 480/2, 320/2); + controles.pausa = false; + this.pausa = true; + } + if (controles.continuar){ controles.continuar = false; this.pausa = false; @@ -468,11 +479,13 @@ class GameLayer extends Layer { calcularPulsaciones(pulsaciones){ // Suponemos botones no estan pulsados this.botonDisparo.pulsado = false; + this.botonPausa.pulsado = false; // suponemos que el pad está sin tocar controles.moverX = 0; controles.moverY = 0; // Suponemos a false controles.continuar = false; + controles.pausa = false; for(var i=0; i < pulsaciones.length; i++) { @@ -504,8 +517,16 @@ class GameLayer extends Layer { controles.disparo = true; } } + if (this.botonPausa.contienePunto(pulsaciones[i].x , pulsaciones[i].y) ){ + this.botonPausa.pulsado = true; + if ( pulsaciones[i].tipo == tipoPulsacion.inicio) { + controles.pausa = true; + } + } } + if(controles.pausa) + controles.continuar = false; // No pulsado - Boton Disparo if ( !this.botonDisparo.pulsado ){ diff --git a/src/modelos/Texto.js b/src/modelos/Texto.js index 5b19a3d..b4f3d31 100644 --- a/src/modelos/Texto.js +++ b/src/modelos/Texto.js @@ -1,14 +1,15 @@ class Texto { - constructor(valor, x, y) { + constructor(valor, x, y, color) { this.valor = valor; this.x = x; this.y = y; + this.color = color || "white"; } dibujar (){ - contexto.font = "20px Arial"; - contexto.fillStyle = "white"; + contexto.font = "12px Arial"; + contexto.fillStyle = this.color; contexto.textAlign = "left"; contexto.fillText(this.valor,this.x,this.y); }