Crea el lienzo (canvas) y dibuja en él

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial) (en-US). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento <canvas>.

El HTML del juego

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento <canvas>. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        background: #eee;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
      // JavaScript code goes here
    </script>
  </body>
</html>

En la cabecera (head) tenemos un charset, el título de la página <title> y un poco de CSS básico. El <body> contiene los elementos<canvas> y <script> (en-US). Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento <canvas> tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

El lienzo (canvas)

Para que podamos visualizar los gráficos en el elemento <canvas>, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Aquí estamos guardando una referencia al elemento <canvas> en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta que realmente utilizaremos para dibujar.

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

Todas las instrucciones están entre los métodos beginPath() y closePath() (en-US). Estamos definiendo un rectángulo utilizando rect() (en-US): los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad fillStyle (en-US) guarda un color que utilizará el método fill() (en-US) para pintar el cuadrado que, en nuestro caso, será rojo.

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI * 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

Como puedes ver, estamos utilizando otra vez los métodos beginPath() y closePath() (en-US). De lo que hay en medio, la parte más importante del código anterior es el método arc(). Tiene seis parámetros:

las coordenadas x e y del centro del arco
el radio del arco
los ángulos inicial y final (en qué ángulo empezar y terminar de dibujar el círculo, en radianes)
la dirección hacia la que se dibujará (false para seguir el sentido de las agujas del reloj, que es el valor por defecto, o true para el sentido contrario). Este parámetro es opcional.

La propiedad fillStyle (en-US) tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

En lugar de utilizar fill() (en-US) y rellenar las formas con colores, podemos utilizar stroke() (en-US) para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

Compara tu código

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

Nota: cambia el tamaño y el color de las figuras.

Pasos siguientes

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).