DIA 16

Hemos cambiado el modo de alerta de las vidas que nos quedan, de un alert a una caja.
Hemos hecho también, que cuando algún enemigo toque el borde inferior, se produzca GAME OVER.
Hemos formateado el código y los comentarios.

DIA 14

Hemos incluído una pantalla de preload en nuestro juego implementada con una librería de jquery.
También hemos elaborado el "HAS GANADO".

DIA 13

GAME OVER coseguido!!!!!

Nuestras pruebas han dado su fruto y hemos conseguido nuestro GAME OVER.

DIA 12

• Hemos probado que las imágenes que se nos salen del contenedor no se salgan. Al principio no lo hemos conseguido, pero ya nos hemos dado cuenta de cual era nuestro error.

 

• Hemos intentado parar los objetos, borrando las imágenes, pero esto no ha ido nada bien. Lo positivo es que ya nos hemos dado cuenta porque era, ahora vamos a solucionarlo.

 

• Otra cosa que hemos intentado realizar, pero que al final no lo vamos a llevar a cabo, es almacenar datos como el ancho y el alto de nuestros objetos en variables, pero como esas propiedades estaban por todo el código y modificadas con diferentes constantes, hemos decido "no complicarnos la vida".

DIA 11

Hemos estado trabajando buscando información acerca de como parar los objetos cuando se produzca el GAME OVER.
De todas las opciones que hemos encontrado, la que mas nos ha gustado es la que elimina los objetos que movemos através del DOM.
Vamos a probarlo en nuestro juego.

DIA 10

GAME OVER conseguido.

Ahora vamos a intentar que cuando se produzca el GAME OVER, todo se pare y aparezca la pantalla negra.
Ese es nuestro próximo reto.

DIA 9

Peleandonos con el GAME OVER.

A nuestros jugadores les vamos a dar de inicio cinco vidas.Que irán gastando si se chocan contra el enemigo.
Para ello hemos  realizado un método que resta las vidas que nos quedan, y  cuando llegue a la última nos salga el mensaje de GAME OVER.

No hemos conseguido de momento que lo haga, pero seguiremos peleándonos con ello.

DIA 8

EXPLOSION EXPLOTA.

Al alcanzar los bichos nuestros proyectiles, explosionan. Esto lo hemos conseguido con un método que accede a las propiedades del CSS para situarse en la misma posición que la colisión, y mostrar la imagen de la explosión. Esta explosión sólo permanece en pantalla un periódo de tiempo determinado.

Ahora vamos a intentar confeccionar un "FIN DE JUEGO" o "FIN DE NIVEL".

DIA 7

Hemos hecho DIANA!!!!

Nuestros proyectiles matan cuando chocan contra un bicho. Nos ha costado menos de lo que pensabamos.

Para ello hemos hecho  dos métodos:
- Método para detectar colisión con nuestros bichos.
- Método para eliminar los bichos cuando colisionan con el proyectil.

Siguiente paso ¡¡¡EXPLOSIONAR!!!

DIA 6

APUNTEN, DISPAREN, FUEGO....

Después de varias horas de investigación, y de pruebas varias, nuestro matabichos DISPARA....
¿Cómo lo hemos conseguido?
- Tenemos un método que recoge el evento.
- Otro método que realiza el disparo.
- Un tercer método que elimina los disparos cuando salen de la pantalla
- Un último método que controla como se desplaza el disparo.

Vamos a por las colisiones.

DIA 5

Nuestra arma se mueve. Después de largas horas de trabajo hemos conseguido dar movimiento a nuestro "matamoscas" con los cursores del teclado en los limites del contenedor.
Nos hace un efecto un poco raro, al llegar a la parte superior. Pero con paciencia y un poco de ayuda del profe seguro que lo conseguimos mejorar.
Nosotras seguiremos ahora investigando como hacer que el arma dispare.

En esta etapa nos hemos familiarizado con los eventos del teclado onKeyPress y onKeyUp, que eran desconocidos para nosotras.

DIA 4

Peleandonos con el arma!!!!!
Hemos estado investigando como usar eventos y aplicarlos en el movimiento de nuestra arma. Barajamos dos posibilidades, todavía no sabemos cual de ellas nos va a funcionar al final, despues de toda una mañana haciendo pruebas.

Seguimos trabajando en ello......

DIA 3

Por fin las moscas se mueven!!!!!

Hemos tenido problemas con el acceso al css externo, así que hemos decicido hasta averiguar como hacerlo de otra manera, poner los estilos a los que vamos a acceder mediante DOM en las propias etiquetas HTML.

Hemos investigado por la web, como acceder a los estilos de las hojas externas, pero nada de lo que hemos visto nos ha funcionado por el momento.

Por ejemplo :

var miDiv = document.getElementById("miDiv"); 
var computedStyle = window.getComputedStyle(miDiv);

computedStyle.getPropertyValue("border-color");
computedStyle.setProperty("border-color", "yellowgreen", null);

El get nos funciona porque lo hemos comprobado con un alert y nos devuelve el valor de la propiedad correspondiente, que en nuestro caso era la posición left. Pero el set, que es el que nos interesa, no da resultados.

DIA 2

Hemos estado investigando acerca de como mover los enemigos por la pantalla. Y como acceder a los elementos y atributos del Html mediante el DOM.

De momento la búsqueda no ha dado resultados positivos, seguiremos trabajando.

DIA 1

Adjuntamos captura pantalla con el resultado obtenido hasta el momento.

En la imagen aparecen los objetos que vamos a emplear en el juego : moscas, matamoscas y fondo.

Lo hemos colocado en sus div correspondientes y aplicado el CSS conveniente.

DESCRIPCIÓN DEL PROYECTO

Producto final

Nuestra intención es desarrollar un videojuego, utilizando Javascript, CSS y HTML.
El juego consiste en eliminar una serie de insectos que aparecerán en pantalla con un "arma" en un tiempo determinado.

Pasos a desarrollar

•  Tarea de investigación ( mirar otros proyectos, librerías, etc..).
•  Desarrollo gráfico de los elementos del proyecto.
•  Confección de los documentos HTML y CSS  necesarios.
•  Implementación de los métodos Javascript necesarios para:

• que los insectos aparezcan y se muevan en la consola del juego.
• ubicar un "arma" y desplazarla con los cursores del teclado.
• proyectar el movimiento del disparo del arma.
• hacer desaparecer los insectos cuando sean alcanzado por el disparo.
• finalización del juego cuando se hayan eliminado todos los insectos en el plazo establecido.
• finalización del juego cuando NO se hayan eliminado todos los insectos en el plazo establecidos.
• mostrar mensaje de superación del juego o gameover.

Distribución inicial de tareas

María :

• se encargará de mirar diferentes librerías.
• desarrollo gráfico del arma y fondo del videojuego.
• conjuntamente confeccionar HTML y CSS.
• conseguir que el arma se desplace con los cursores.
• desarrollo del disparo del arma.
• mensaje superación del juego al eliminar todos los insectos en el plazo.

Marinela:

• se encargará de mirar otros proyectos similares.
• desarrollo gráfico de los diferentes insectos.
• conjuntamente confeccionar HTML y CSS.
• conseguir que los insectos se muevan.
• eliminación de los insectos alcanzados por el disparo.
• mensaje gameover al superar el plazo establecido.

Todos los puntos serán contrastados y puestos en común para la correcta realización del proyecto.