Programa tus Primeros Juegos HTML5 con JavaScript

Qué es el DOM y cómo se crea una página web sencilla con HTML, sin utilización de hojas de estilos CSS, ya que para la creación de videojuegos HTML5 con JavaScript no es necesario utilizarlas.

Explicación práctica de qué son las variables, cómo funcionan y cómo utilizarlas en un videojuego para almacenar información en tiempo real.

Explicación práctica con ejemplos, sobre la creación de funciones para programar de forma estructurada y poder reutilizar fragmentos de código, para así hacerlo más legible.

Explicación sobre cómo crear funciones capaces de procesar información y devolver resultados calculados al programa principal.

Ejemplo práctico sobre cómo utilizar condiciones para que el programa sea capaz de elegir entre varias alternativas utilizando la instrucción IF

Uso de varias condiciones concatenadas, dentro de un mismo IF, e inclusión de la instrucción ELSE para ejecutar el resto de instrucciones cuando no se cumple la condición.

Ejemplos sobre el uso de condiciones más complejas utilizando el juego de instrucciones IF/ELSE

Utilización de las instrucciones Switch / Case para elegir un resultado entre un listado de opciones.

Utilización del bucle FOR para crear rutinas de código que se repitan un número determinado de veces, de forma automática.

Utilización del juego de instrucciones DO / WHILE para crear rutinas de código que se repitan un número indeterminado de veces (que no sea fijo)

Explicación de cómo se crea la base de un videojuego, programando un bucle principal, que se ejecuta de forma infinita y que recorre todas las funciones que mantienen el juego en funcionamiento:

• Dibujado del escenario.
• Lógica de juego.
• Dibujado de los enemigos.
• Dibujado del protagonista.
• Control del ratón y el teclado.
• Reproducción de la música.
• Reproducción de los efectos de sonido.
• Detección de colisiones.

Lectura del teclado usando JavaScript, para la detección de las pulsaciones.

Utilización de la librería externa Keypress, para detectar pulsaciones complejas que podremos aplicar a la hora de realizar combos.

Utilización de JavaScript para la detección de:

• Pulsación de los botones del ratón.
• Liberación de los botones del ratón.
• Movimiento del ratón.
• Lectura de las coordenadas X e Y

¿Qué son los objetos en programación?

• Declaración de atributos.
• Creación de métodos.

Cómo crear un Canvas en HTML5, para usarlo como pantalla en la que mostrar formas sencillas (cuadrados).

Aprenderemos conceptos como:

• Fotogramas por segundo / Frames Per Second (FPS)
• Primitivas gráficas.
• Códigos de color hexadecimal.
• Borrado / Limpieza del Canvas.

Ejemplo práctico sobre cómo cargar y mover por pantalla una imagen en formato PNG, previamente creada.

Qué es un ARRAY o lista, y cómo utilizarlo para crear un inventario de objetos para nuestro jugador.

Cómo crear un array de 2 dimensiones (2D) y utilizarlo para crear un mapa o escenario para nuestro primer juego.

A partir de aquí comenzaremos a crear nuestro primer videojuego sencillo del tipo Dungeon Crawler:

El protagonista se moverá por una laberíntica mazmorra, de la que no podrá salir:

• Creación de un escenario a partir de matrices 2D.
• Detección de colisiones.
• Control del protagonista mediante el teclado.

En esta segunda sesión crearemos la lógica de juego para nuestro Dungeon Crawler:

• Inclusión de objetos llave y puerta.
• Implementación del inventario.
• Lógica simple, según la cual el jugador no puede salir a no ser que previamente recoja la llave.

En esta última sesión mejoraremos la lógica de juego y añadiremos los gráficos:

• Creación de enemigos que se mueven de forma autónoma y aleatoria.
• Detección de colisiones con los enemigos (que matan al protagonista si colisionan)
• Utilización de un Tileset para los gráficos del escenario.
• Creación de animaciones básicas usando un Tileset.

En esta sesión preparamos el código del tablero y el objeto para las piezas.

En esta segunda sesión añadimos el código para crear con matrices los gráficos de las piezas, así como todas sus posiciones al rotarlas.

En esta sesión: 

• Dibujaremos el tablero y el objeto ficha en pantalla.
• Crearemos los márgenes del tablero para que las piezas no se salgan.

Implementación de la caída y la rotación del objeto pieza.

En esta sesión crearemos la lógica de juego para que las piezas se apilen al caer y colisionen de forma adecuada entre ellas.

En esta última sesión implementaremos el borrado o limpieza de las filas que estén completas, de una forma sencilla y básica.

Ejemplo práctico sobre cómo implementar un objeto Cámara, capaz de mostrar distintas partes de un nivel que no quepa en pantalla, e incluso cómo crear experiencias a pantalla partida (Split screen) para varios jugadores.

Ejemplo práctico sobre la carga y reproducción de música y efectos de sonido utilizando la librería Howler.js

Ejemplo práctico sobre el almacenamiento permanente de datos en la memoria del navegador web para guardar y cargar partidas anteriores.

En esta primera sesión, crearemos un escenario a partir de una matriz 2D, y comenzaremos a implementar algunas leyes físicas, como la gravedad, para hacer que nuestro jugador siempre caiga hacia el suelo.

En esta segunda sesión, añadiremos fricción o rozamiento, para que el protagonista deslice en mayor o menor medida cuando corra por el escenario, creando un efecto físico mucho más realista.

En esta tercera sesión terminaremos el motor físico, añadiendo colisiones entre el jugador y el escenario.

Para mejorar el juego de plataformas que acabamos de crear, le vamos a añadir un editor de niveles, con el que modificar, en tiempo real, el aspecto del escenario.

¡Terminó el curso! A partir de ahora te toca a ti empezar a crear tus propios juegos ¡Ánimo!