Crear juegos con HTML5(Primera parte)

Dibujando en el canvas.
Para crear un juego en canvas, necesitaremos dos archivos: Una página HTML para mostrarlo, y el

código en JavaScript del juego. Comencemos creando un archivo llamado “index.html”, lo abrimos

para editar (Clic derecho >> Abrir con >> Notepad++, o el que uses) y copiemos dentro el siguiente

código:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8" />

<!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->

<title>My First Canvas Game</title>

<script type="application/javascript" src="game.js"></script>

</head>

<body>

<h1>Mi Primer juego School Of Taringa!</h1>

<p><canvas id="canvas" width="300" height="150" style="border:1px solid #000">

Su explorador no soporta Canvas.

</canvas></p>

</body>

</html>

 

No me detendré a explicar el código HTML por que ya lo hice, ya que no es necesario para

comprender el desarrollo de juegos. Digamos que el código arriba es lo básico para mostrar una

página web donde mostraremos nuestro juego. Solo hay dos líneas importantes que debes comprender:
<script type="application/javascript" src="game.js"></script>
Mediante esa etiqueta “script”, llamamos al archivo game.js, que contendrá todo el código de nuestro

juego.
<canvas id="canvas" width="300" height="150" 

style="border:1px solid #000">
Su explorador no soporta Canvas.
</canvas>

En esta etiqueta canvas, será donde dibujaremos nuestro juego, el ancho de 300px y alto de 150px

son los valores predeterminados. Puedes personalizarlos de acuerdo al juego que desarrolles, más para

este ejemplo, los dejaremos así.
El ID es el nombre único de nuestro elemento en la página, y es necesario para hacer referencia a él desde

el juego; podemos cambiarlo al que deseemos, pero necesitaremos también cambiarlo en nuestro código

(Que veremos en un momento).
Por último, agregamos un borde negro para identificar dónde se encuentra nuestro lienzo (canvas),

posteriormente podrás borrarlo o cambiarlo, pero por ahora, será mejor dejarlo ahí.
Ahora, crearemos el código para nuestro juego. Comenzaremos por lo más sencillo: Dibujar un rectángulo

dentro de él. Para ello, crearemos un segundo archivo de nombre “game.js”, y copiaremos el siguiente

código dentro:

window.addEventListener('load',init,false);

var canvas=null,ctx=null;

function init(){

canvas=document.getElementById('canvas');

canvas.style.background='#999';

ctx=canvas.getContext('2d');

paint(ctx);

}

function paint(ctx){

ctx.fillStyle='#0f0';

ctx.fillRect(50,50,100,60);

}

Analizaremos el código por partes. En la primer línea, agregamos un escucha a nuestra ventana, para que

en cuanto termine de cargar la página, comience a ejecutar “init” (Que es donde comenzamos

nuestro código). Debajo, creamos dos variables nulas donde guardaremos nuestro canvas y su

contexto.
Es importante que indiquemos que el código comience hasta que se cargue la página, de lo contrario,

el código podría no encontrar nuestro lienzo, y generaría una serie de errores que no nos permitirían

reproducir nuestro juego.
Posteriormente empezamos nuestra funcióninit”. En la primer línea, obtenemos nuestro lienzo

buscándolo por su IDcanvas” (Si pusiste otro nombre a tu lienzo, es aquí donde debes poner el

mismo nombre). En la línea de abajo cambiamos el color de fondo del lienzo, dándole un número

hexadecimal, en este caso, gris. Puedes cambiarlo a tu gusto, acepta cualquier valor entre '#000' y'#fff'.
Después de esto, obtenemos el contexto 2D de nuestro lienzo. Necesitamos este contexto ya que

es nuestra herramienta para pintar dentro del lienzo; podríamos imaginar que es como nuestro pincel.

Por último, llamamos a la función “paint”, pasándole dicho contexto para dibujar en él.
La última parte es nuestra función “paint”. Aquí indicamos que usaremos como color de relleno '#0f0'

(verde), y debajo, rellenamos un rectángulo desde la posición X,Y 50,50, con 100 de ancho y 60 de alto.
Guardemos el archivo. Si lo hemos hecho todo bien, al hacer doble clic en index.html, se abrirá una

página web donde se mostrará el lienzo con el rectángulo verde que hemos creado.
Diviértete cambiando los colores y dibujando más rectángulos, hasta que te familiarices con el lienzo.

Puedes usar strokeStyle y strokeRect para dibujar el perímetro en lugar de rellenarlos. A partir de

ahora para el juego, cambiaremos el fondo a color negro.

CÓDIGO FINAL:

window.addEventListener('load',init,false);

var canvas=null,ctx=null;

function init(){

canvas=document.getElementById('canvas');

canvas.style.background='#999';

ctx=canvas.getContext('2d');

paint(ctx);

}

function paint(ctx){

ctx.fillStyle='#0f0';

ctx.fillRect(50,50,100,60);

}