Tutorial HTML: Avanzado

​ Es el momento de que podamos hacer juegos con HTML, esto lo lograremos usando la etiqueta canvas, ella nos brinda un espacio en el que podemos dibujar elementos 2D y 3D. Para este tutorial únicamente tratare juegos 2D.

1 - Canvas

En este ejemplo vemos que dentro del HTML se encuentra la etiqueta canvas, en ella tenemos el id,ancho y alto especificado. Ahora bien para poder hacer acciones sobre el canvas usaremos nuestra mejor herramienta Javascript, con el podemos hacer toda la interacción necesaria en el juego. Para hacer este ejemplo me base en el código que pueden encontrar en esta página, este lo cambie un poco para simplificar su estructura y que todo estuviese en español.

Todo juego tiene al menos 4 partes básicas:

• Variables estáticas: Aquí se encuentran todas las variables que necesitamos acceder desde distintas partes. Por lo general tenemos un método que inicializa todos los valores, esto es de gran ayuda para poder reiniciar partidas, contadores, menú, estados, entre otros.
• update: El método encargado de actualizar los elementos del juego. Por lo general llamamos a este método el encargado de la lógica.
• render: Se encarga de dibujar todo dentro de la ventana.
• main: En este normalmente iniciamos todo el proyecto y en el caso de juegos en HTML es donde llamamos a los métodos de update y render con determinada frecuencia de milisegundos.

Para la interacción agregamos funciones que "escuchen" si se presionó y soltó una tecla. En muchos motores gráficos esta información la tenemos en el update, pero por motivos de Tutorial y de querer mostrar el código más sencillo posible, se usan manejadores de eventos nativos de Javascript. Para poder verificar la tecla se usa el código de la tecla.

A diferencia del sistema de coordenadas convencional el punto de origen dentro del canvas se encuentra en la esquina superior izquierda, el eje horizontal es positivo a la derecha y el vertical es positivo hacia abajo.

Algo que es muy importante a la hora de dibujar es el orden en el que se ejecutan las funciones, ya que cada elemento dibujado siempre se coloca encima del anterior. Por lo general limpiamos siempre la ventana con un color de fondo y luego dibujamos nuestros elementos. El orden habitual en los videojuegos es: Limpiar fondo, dibujar escenario (ambiente, objetos, personajes), sombras, efectos y HUD.

Para poder llegar a dibujar se usa el contexto dentro del canvas. Algunas de las funciones que se usan para dibujar son:

• fillStyle: Establece el color.
• fillRect: Permite dibujar un rectángulo, especificando su posición en "x" y "y", el ancho y alto.
• drawImage: Permite dibujar una imagen, especificando el elemento cargado y la posición.
• font: Se establece la fuente de escritura.
• fillText: Permite escribir, se debe especificar el mensaje y la posición.

Al final del código es donde encontramos la función setInterval(main, 10); que inicia el ciclo del juego, este llamará cada 10 milisegundos la función main.

Una versión de prueba de este ejemplo la pueden ver aquí.

2 - Juego de Snake

Al igual que el ejemplo anterior me base en otro tutorial y lo pueden encontrar en esta página, esta cambido un poco para estructurarlo en el mismo formato que el ejemplo anterior.

En este caso lo más importante es el uso de Jquery para la estructura del juego. Las diferencias más relevantes son los métodos para capturar las teclas presionadas, esto se ve en la línea 58 del archivo snake.js, donde se usa la función que escucha el evento de una tecla presionada. La otra diferencia es la inclusión del método de iniciar ya que para este ejemplo se cuenta con una lógica más compleja de juego que requiere reinicio.

Una versión de prueba de este mini juego la pueden ver aquí.

3 - Juego de Batman - Usando imágenes

Para este ejemplo lo que quiero ilustrar:

• Como agregar un elemento en el HTML desde javascript, para esto se necesita únicamente llamar la función document.createElement("canvas").
• Como se cargan las imágenes, lo cual es muy fácil ya que solo se necesita, crear un objeto del tipo Image y especificar la ruta de esta, ejemplo de esto se ve en las líneas 16 y 17 del archivo batman.js.

El resto de la estructura del juego es igual que los ejemplos anteriores.

Una versión de prueba de este ejemplo la pueden jugar aquí.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.