Programa tu videojuego con Javascript desde cero

Veremos la forma que podemos depurar nuestros programas, analizar y mostrar variables, usar la consola, colocar puntos de interrupción, etc.

Temas tratados:

• Abrir panel de herramientas del desarrollador

• Pestaña Elements

• Pestaña Console

• Pestañas Sources

• Inspección de código

• Inspección de variables

• Formateado de código

• Puntos de interrupción

• Debuggeando el programa

• Puntos de interrupción selectivos

Veremos la forma que podemos depurar nuestros programas, analizar y mostrar variables, usar la consola, colocar puntos de interrupción, etc.

Temas tratados:

• Abrir panel de herramientas del desarrollador

• Pestaña Elements

• Pestaña Console

• Pestañas Sources

• Inspección de código

• Inspección de variables

• Formateado de código

• Puntos de interrupción

• Debuggeando el programa

• Puntos de interrupción selectivos

Vamos a calcular la posición del jugador según el modelo de datos del terreno.

Temas tratados:

• Cálculo de bloque según la posición del jugador

• Uso de arrays para acceder a la altura de la posición actual del terreno

• Cálculo del ratio o valor recorrido entre bloques

• Uso del módulo o resto o residuo

• Cálculo de la altura según la diferencia de alturas entre bloques

Dibujado de la rejilla o grid

Temas tratados:

• usando bucles para dibujado de lineas

• funciones de canvas moveTo, lineTo

• funciones de canvas beginPath, stroke

• atributos de canvas strokeStyle

• dibujando círculos con la función arc

Maneja la posición del personaje en este sencillo ejercicio de laboratorio.

Veremos cómo programar la caída del personaje en base al terreno. Cuando nos encontramos una pendiente que desciende abruptamente, generaremos una especie de vector de caída.

Temas tratados:

• margen y padding de la página (CSS)

• creando el vector de caída en el modelo de datos

• detección de la caída (diferencia de y)

• usando breakpoints o puntos de interrupción

• aplicando el vector de caída

• detectando cuando el personaje llega al suelo

En este vídeo veremos como activar el salto del personaje, utilizando el vector de caída del vídeo anterior.

Temas tratados:

• detección del evento click del ratón con addEventListener

• activando el salto en el vector caída

• analizando los valores del salto con la consola

Con esta práctica pondrás a prueba lo aprendido hasta ahora.

Intenta hacerla sin mirar la solución. ¡No caigas en la tentación!

Instrucciones:

1. Descarga el archivo practica1.html

2. Edita el archivo, intenta comprenderlo. Puedes ver el vídeo donde se explica su contenido.

3. Haz las modificaciones que consideres para conseguir el objetivo.

4. Existen muchas posibles soluciones, así que ve probando. Haz tus experimentos.

5. Recuerda que puedes usar las herramientas de desarrollo (F12) para inspeccionar el código, poner puntos de interrupción, etc.

6. Dedícale al menos 2 horas a intentar resolverlo por ti mismo/a. Sé que suena a mucho tiempo, pero así es como realmente se aprende a programar... ¡dedicándole tiempo y esfuerzo!

Por último, puedes mirar la solución, que tan solo es una posible solución de muchas.

Crearemos un tipo de enemigo que nos pondrás las cosas un poco más difíciles. A nivel de juego, claro.

Temas tratados:

• estructurar los enemigos en el modelo de datos

• posición aleatoria de los enemigos según probabilidades con Math.random

• creación de array de enemigos usando Array.push

• moviendo a los enemigos

• dibujando a los enemigos

• moviendo la cámara

Nota: También se ha cambiado el uso de setInterval para que llame cada 16 milisegundos al bucle principal.

Según la posición del jugador y de los enemigos detectaremos cuando se tocan o "colisionan" entre sí.

Temas tratados:

• calculando la distancia X con la función de valor absoluto Math.abs

• evaluando las distancias dx,  dy

• detección de la colisión

• nueva variable de estado del jugador: muerto

Documento con explicación y ejemplos para el cálculo de colisión en base a las propiedades ancho y alto y la distancia entre objetos.

Según el estado del jugador, por ejemplo si el personaje está muerto, se aplicarán unas "leyes físicas" u otras.

Aprenderemos una forma de colocar un precipicio. Para ello como siempre es importante tener claro el modelo de datos, de la información, a nivel lógico. Y después, a nivel visual mostrar el precipicio adecuadamente.

Temas tratados:

• altura del terreno según cada distancia de bloque

• dibujado del hoyo o precipicio

• detectando que el personaje está en un hoyo

• estado de caída del personaje

Crearemos un sprite con animación con la herramienta online PiskelApp

Veremos cómo usar los archivos de imagen PNG descargados de PiskelApp a nuestro juego.

Para ello haremos uso de la herramienta PAINT.NET

Animación del personaje con sprites.

Para una buena animación lo importante es organizar el modelo de datos y los algoritmos apropiadamente.

Temas tratados:

• organizar el modelo de datos

• contador de fotogramas para cada imagen

• velocidad de cambio entre imágenes

• calcular la imagen actual

• cargar la imagen en el documento

• dibujar la imagen con drawImage

• diferentes imágenes según el estado del personaje

En este vídeo veremos la función de requestAnimationFrame, que sirve para obtener una animación fluida a 60 fotogramas por segundo (frames per second o fps)

Veremos cómo programar los distintos estados del juego. Pantalla de inicio.

Temas tratados:

• estados de juego

• pantalla de inicio

• como escribir texto en canvas

Agregamos las nubes al juego.

Veremos el movimiento de cámara.

Veremos los algoritmos para dibujar las montañas con un factor de transparencia (alpha).

Una vez tenemos la animación programada con Javascript, que ya nos funciona en el juego para nuestras primera pruebas, ya podemos diseñar una ilustración del personaje con un poco más de detalle.

En esta lección os enseñaré cómo he ido dibujando el personaje con la aplicación online piskelapp.com

Veréis una de las formas (existen muchas más) que podéis enfocar el diseño de la animación de un personaje animado.

Todo es cuestión de práctica, cada vez que hagáis una animación iréis mejorando sin apenas daros cuenta.

¡Así que adelante!

Veremos el juego con nuevas funcionalidades. En este vídeo los nuevos atributos del jugador, del personaje, y su nueva capacidad de saltar con impulso adicional.

Veremos también los controladores de salto, que ahora pueden ser (además del ratón) el teclado y el toque con el dedo en móviles y tabletas.

Veremos en el modelo de datos cómo hemos configurado las plataformas, las flores, los árboles, las monedas, y un nuevo enemigo.

Además el jugador se recoloca en el juego cuando muere, y cuenta con inmunidad temporal.

Y explicaré una nueva forma de colisión con el nuevo enemigo.

Explicaré con detalle un algoritmo para el cálculo de la altura según varios elementos del terreno posibles: el suelo y las plataformas. Todo según la posición del elemento en cuestión.

Veremos cómo hemos resuelto las dificultades del algoritmo de colisión con el terreno.

En todo algoritmo hay puntos débiles que hemos de ir detectando, corriendo y mejorando, de forma que funcione en todos los casos apropiadamente.

Segunda parte para completar y entender mejor la lección anterior.

Podéis descargaros el juego en el estado actual (entrega_14.zip) y el manual de HTML5 totalmente recomendable.

Os explicaré dónde podéis buscar música gratuita para vuestro juego, y la licencia de Creative Commons.

Os mostraré varias posibilidades para obtener o conseguir sonidos para vuestro juego.

Entramos en materia de programación, cargando los archivos de sonidos y música, y poniéndolos a reproducir.

Terminaremos de agregar los efectos de sonido y la música del juego. Además os mostraré cómo podéis pausar la música.