Muchos de nosotros sabemos que programar juegos no es nada fácil, es verdad, pero también es cierto que no es imposible, todo depende de muchos aspectos que queremos en el juego.

En este tutorial vamos a crear un juego de una nave espacial usando HTML5 y la arquitectura que nos brinda Intel®, lo único que debes saber son bases y comprender bien HTML, CSS y Javascript.

Agregando el Canvas

El canvas es un lienzo rectangular que nos permite hacer representaciones de manera dinámica, es por ello que es una de las funciones más bonitas y que más emoción provoca en los desarrolladores de HTML5, pues a parte de usarse para generar gráficos vectoriales y crear asombrosos efectos, también funciona para crear juegos interactivos y animaciones.

Entonces, ya sabemos qué es canvas y para qué se usa, pero ¿cómo lo aplicamos?. Vamos a usar y configurar el canvas de la siguiente manera:


<body onload="spaceShipGame()">
    <h1>
      SpaceShipGame
    </h1>
    <canvas id="spaceCanvas" width="300" height="300">
    </canvas>
 </body

Creando un fondo con estrellas

Una vez teniendo nuestro lienzo con sus respectivas dimensiones y nombre, agregaremos un fondo y la nave espacial así:

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

La variable “canvas” crea el canvas que necesitamos para dibujar los objetos gráficos, y la variable “ctx” retiene el contexto de representación. En este caso un objeto gráfico bidimensional.

Este contexto contiene los métodos elementales para dibujar en el canvas, tales como arc(), lineto() y fill(). A continuación pintamos el fondo de negro, colocamos sobre él asteroides luminosos y dibujamos la nave con el objeto de contexto.

// Para pintar de negro
          ctx.fillStyle = "black";
          ctx.rect(0, 0, 300, 300);
          ctx.fill();

         // Para dibujar 100 estrellas.
         for (i = 0; i <= 100; i++) {
         // Distribución al azar de las estrellas.
         var x = Math.floor(Math.random() * 299)
         var y = Math.floor(Math.random() * 299)

          // Para que las estrellas sean blancas
          ctx.fillStyle = "white";

          // Para dar espacio a la nave.
          if (x < 20 || y < 20) ctx.fillStyle = "black";

          // Dibujo de una estrella.
          ctx.beginPath();
          ctx.arc(x, y, 3, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
        }

//Dibujo de la nave espacial
       ctx.beginPath();
        ctx.moveTo(28.4, 16.9);
        ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
        ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
        ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
        ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
        ctx.closePath();
        ctx.fillStyle = "rgb(0, 0, 255)";
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(22.3, 12.0);
        ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
        ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
        ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
        ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
        ctx.closePath();
        ctx.fillStyle = "rgb(255, 0, 0)";
        ctx.fill();

Vamos a hacer una prueba, ejecuta el código, deberá aparecerte algo así:
espacio y nave

Navegando por el espacio

Ya teniendo el escenario, vamos a la acción, bebemos mover la nave. El código que les mostraré a continuación está compuesto por HTML5 y JavaScript, podremos mover la nave sobre las estrellas. Esto significa que cada vez que ocurra el movimiento debemos pintar de nuevo el fondo. El primer paso es borrar la imagen de la nave conforme se vaya moviendo y dibujar otra en una ubicación diferente.
Cabe mencionar que Canvas no memoriza la trayectoria de dibujo de los píxeles, por eso el ejemplo muestra las maneras óptimas de mantener la trayectoria de cada píxel a medida que se recupera, elimina, mueve y restaura en el código. Veamos como se hace:

var newBackground = new Image(); // Esta variable se usará para guardar el nuevo fondo.

var oldBackground = new Image(); // Esta variable se usará para guardar el fondo anterior.
var ship = new Image(); // Esta variable captura la imagen de la nave

      var spaceShipX = 0; // Posición actual de la nave sobre el eje X
      var spaceShipY = 0; // Posición actual de la nave sobre el eje Y
      var old_SpaceShipX = 0; // Posición anterior de la nave sobre el eje X
      var old_SpaceShipY = 0; // Posición anterior de la nave sobre el eje Y

Y si se están preguntando cómo le hago para establecer un bucle de juego y procesar los eventos principales del juego lo haremos así:


Loopgame()
{

 

Continuando con la magia, guardaremos el fondo anterior para que podamos borrar la nave y luego dibujarla en la nueva ubicación.


     ctx.putImageData(oldBack, old_ShipX, old_ShipY);
     ctx.putImageData(spaceShip, spaceShipX, spaceShipY);
}

Para obtener la información de cada píxel de una sección rectangular del canvas, una opción es obtener el objeto de datos de la imagen usando getimagedata().

Para jugar, tenemos que llamar al método Loopgame() en bucles de 20 milisegundos, que se utilizan mucho en los juegos porque con ellos se logran procesos de animación básicos a intervalos fijos. Para ello, llamamos al método setInterval, el cual evalúa una expresión a intervalos definidos.

setInterval(Loopgame, 20);

Actualizando cada 20 milisegundos, el ojo humano no llega a captar que la nave desaparece y vuelve a aparecer, sino que crea la ilusión de que ésta se mueve.
Configuramos el addEventListner para que controle los eventos táctiles, capture las nuevas posiciones X e Y, y luego ubique la nave donde corresponda. Cuando el usuario presiona o mueve el dedo sobre la pantalla, el evento movespaceShip() se activa de inmediato.


document.addEventListener("touchstart", movespaceShip, true);

function startMoveDrawing (event)
{ 
  event.preventDefault();//Para prevenir el comportamiento predeterminado
  var eventTouch, x, y;
  eventTouch = event.changedTouches[0];// Array to store previous touch cords,0 is the initial one.
  x = eventTouch.pageX;//Toque de la coordenada x
  y = eventTouch.pageY;// Toque de la coordenada y
}

Hasta aquí ya sabemos dibujar (cambiar) el fondo de la nave para nuestro juego. Si llegásemos a golpear un asteroide, la nave explotará. La idea es regresar de manera segura a la base, manteniéndonos lejos de los asteroides o de plano hacerlos pedacitos antes de chocar con ellos. Con este fin, podemos usar el elemento canvas para conservar un registro de cada píxel de la pantalla.

La primera etapa consiste en generar una representación (una instantánea) de la pantalla en el punto en el cual la nave se está por mover. Esta ubicación ya ha sido calculada con eventTouch.pageX y eventTouch.pageY.

La siguiente etapa se trata de probar los datos de la instantánea, buscamos un valor rojo (255) en un segmento de 4 bytes. Si lo encontramos, hay un asteroide presente. Decimos en un segmento de 4 bytes porque a cada píxel se le asigna un valor de color que consiste en cuatro partes: una roja, una verde, una azul y una alfa. Alfa denota la transparencia. Por ejemplo, un píxel negro está compuesto de 0 % rojo, 0 % verde, 0 % azul y 0 % alfa.

Sabemos que mediante el uso de la técnica y el código mencionados antes, podrás convertir en poco tiempo este fragmento de código en un juego de nave espacial con todas las letras.Para finalizar debemos recordar que HTML5 es una tendencia a futuro en el mundo del desarrollo de aplicaciones, es por ello que Intel pone a nuestra disposición más recursos en Intel HTML5 y Intel Android.

No olvides comentarnos cómo te fue con este juego y si implementaste otras cosas en el.

Fuente: Zona desarrollo Intel

Cecy Martínez

Cecy Martínez

Jefa de contenido y editora en HTML5Fácil, NinjaCodeTV, Desveloperstv y Co funder de WaveCode.LA

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar