Facebook Twitter RSS Reset

Juego con canvas HTML y JavaScript

Hola amigos de TARINGA hoy les traigo la primera parte de un tutorial que me ayudo mucho a la hora de aprender a desarrollar pequeños juegos para navegadores, espero que tambien le sea de mucha utilidad a ustedes.



Parte 1. 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:













My First Canvas Game



My First Canvas Game



Canvas not supported by your browser.








No me detendré a explicar el código HTML, 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:



Mediante esa etiqueta “script”, llamamos al archivo game.js, que contendrá todo el código de nuestro juego.



Canvas not supported by your browser.




En esta etiqueta canvas, será donde dibujaremos nuestro juego, el ancho de 300px y alto de 150px son los valores predeterminados, por lo que se creará un lienzo del mismo tamaño en caso de no especificarse estos atributos. Puedes personalizarlos de acuerdo al juego que desarrolles, mas 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 fondo gris para identificar dónde se encuentra nuestro lienzo (canvas). Si hay un problema con tu código, únicamente se mostrará el fondo gris, funcionando esto como una alerta. 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');

    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ón “init”. En la primer línea, obtenemos nuestro lienzo buscándolo por su ID “canvas” (Si pusiste otro nombre a tu lienzo, es aquí donde debes poner el mismo nombre). 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 hexadecimal de relleno ‘#0f0’ (verde), y debajo, rellenamos un rectángulo desde la coordenada 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 contorno en lugar de rellenarlos.

Depuración

Si solo se muestra en la pantalla un rectángulo gris, probablemente hay un error en tu código. Para encontrar el origen del problema, debes depurarlo.

Dependiendo del navegador que uses, puedes depurar tu código como se muestra a continuación:



Chrome:


Presiona F12 o Ctrl + Shift + I y selecciona la pestaña “consola”.

Firefox:

Peesiona Ctrl + Shift + K y selecciona la pestaña “Consola web”. Te recomiendo deshabilitar todas las notificaciones excepto las de JS para depurar mas fácil el código de tu videojuego.



Internet Explorer:


Presiona F12 y selecciona la pestaña “consola”.

Opera:

Presiona Ctrl + Shift + I y selecciona la pestaña “consola”.



Safari:


Presiona Ctrl + Shift + I y selecciona la pestaña “consola”. Debes habilitar antes “Mostrar menú de desarrollo en la barra de menú” en la pestaña “Avanzados” en “Preferencias” para usar esta opción.

Con esta información, podrás resolver cualquier problema que puedas encontrarte mientras estás desarrollando tus juegos.

Parte 2. Animando el canvas.

En la primer parte, vimos como dibujar en nuestro lienzo. Eso está bien, pero un juego se trata de interactuar con los objetos, no solo de dibujarlos. Por tanto, necesitamos por comenzar a darle movimiento a nuestro rectángulo.

Primero, declararemos dos nuevas variables: “x” y “y”. Al comienzo, tras declarar las variables canvas y ctx, agregaremos la siguiente línea:

var x=50,y=50;




Y modificaremos nuestra función “paint” para que limpie la pantalla antes de volver a dibujar en ella, esto se hace dibujando un rectángulo del tamaño completo del lienzo. Posteriormente dibujamos el rectángulo en las coordenadas mencionadas, el cual haremos de paso un poco más pequeño:

function paint(ctx){

    ctx.fillStyle='#000';

    ctx.fillRect(0,0,canvas.width,canvas.height);

    ctx.fillStyle='#0f0';

    ctx.fillRect(x,y,10,10);

}




En este ejemplo, estamos dibujando el rectángulo de fondo de color negro. Puedes darle cualquier valor hexadecimal desde ‘#000’ hasta ‘#fff’. Experimenta con colores diferentes para que encuentres el que consideres quede mejor con tu juego.

Ahora, nuestra función “init” llama solo una vez a la función “paint”, por lo que todo es pintado solo una vez. Para que en verdad se trate de una animación, tenemos que hacer que se llame a la función una y otra vez cada determinado tiempo. Para esto, llamaremos a una función“run()”, sustituyendo donde se llamaba a “paint(ctx)” en la función “init”:

    run();




Y crearemos la función “run” de esta forma:

function run(){

    requestAnimationFrame(run);

    act();

    paint(ctx);

}




En la primer línea, llamaremos a un requestAnimationFrame. Esta función pedirá al navegador para el siguiente momento en que pueda realizar un cuadro de animación, usualmente a 60 cuadros por segundo en computadoras de buen rendimiento, aunque puede variar en computadoras de rendimiento menor. Para saber más al respecto, ve al Apendice 1: RequestAnimationFrame.

Posteriormente, llamamos a las funciones “act()” y “paint(ctx)”. Hemos visto antes que “paint” dibuja todo en nuestro lienzo. La función “act” es usada para llamar a todas las acciones en nuestro juego; en este caso, moveremos nuestro rectángulo sumándole 2 pixeles por cuadro a nuestra variable “x”:

function act(){

    x+=2;

}




Aun cuando las acciones pudieran ser puestas en la función “paint”, es recomendado hacerlo por aparte, para prevenir errores, como en el que lo que se muestra en pantalla no es lo mismo que ocurre realmente (Si mezclas ambos al mismo tiempo esto puede ocurrir, por eso es mejor mover primero y al final dibujarlo). Además, hacerlo de forma separada facilita saber dónde ocurren los eventos para modificarlos posteriormente.

Guardemos y abramos de nuevo nuestra página “index.html”. Si lo hicimos bien, ¡Veremos a nuestro pequeño rectángulo correr por el lienzo! Allá va… Allá va… Y se fue…

Sí, se fue, y no volverá… Si queremos verlo de nuevo, habrá que actualizar la página, y volverá a hacer lo mismo. Pero si queremos mantener a nuestro rectángulo dentro, podemos condicionarlo a que regrese a la pantalla si sale de esta, agregando las siguientes dos líneas después de “x+=2;”:

    if(x>canvas.width)

        x=0;




Así le indicamos que si su posición es mayor a la del ancho de lienzo, regrese a la posición 0. Si actualizamos la página ahora, veremos que nuestro rectángulo sale por una esquina, y vuelve a aparecer una y otra vez por la opuesta.

Problema de compatibilidad:

Debido a que algunas versiones antiguas de navegadores no soportan requestAnimationFrame como tal, deberías agregar esta función al final de tu código (más información en el Apéndice 1: RequestAnimationFrame):

window.requestAnimationFrame=(function(){

    return window.requestAnimationFrame || 

        window.webkitRequestAnimationFrame || 

        window.mozRequestAnimationFrame || 

        function(callback){window.setTimeout(callback,17);};

})();






Parte 3. Usando el teclado.


Nuestro rectángulo ya se mueve por el lienzo, pero para verdaderamente interactuar con él, necesitamos indicarle a dónde queremos que vaya. Para eso, necesitamos primero una variable dónde guardar la tecla presionada:

var lastPress=null;




Y agregar al final de nuestro código un escucha del teclado que almacene la tecla presionada:

document.addEventListener('keydown',function(evt){

    lastPress=evt.keyCode;

},false);




Mediante este método, podremos tomar decisiones en el juego sabiendo la última tecla presionada. Cada tecla tiene un valor numérico, el cual tendremos que comparar para realizar la acción deseada dependiendo la tecla presionada. Una buena forma de saber cuál ha sido la última tecla presionada, sería agregando esta línea en nuestra función “paint”:

    ctx.fillText('Last Press: '+lastPress,0,20);




Por ahora no debes preocuparte de eso. Usaremos las teclas izquierda, arriba, derecha y abajo, cuyos valores numéricos son 37, 38, 39 y 40 respectivamente. Para usarlas más facilmente, las guardaremos en valores constantes:

var KEY_LEFT=37;

var KEY_UP=38;

var KEY_RIGHT=39;

var KEY_DOWN=40;




A diferencia de otros lenguajes de programación, JavaScript no tiene constantes, pero las variables se encargarán del trabajo sin problema.

Vayamos ahora al movimiento del rectángulo. Primero, necesitaremos una nueva variable que almacene la dirección de nuestro rectángulo:

var dir=0;




Esta variable “dir” tendrá un valor del 0 al 3, siendo 0 hacia arriba, y rotando en dirección de las manecillas del reloj para demás valores cada cuarto de hora.

Ahora utilizaremos un método simple para tener un tiempo consistente entre dispositivos (Puedes leer más en el Apéndice 2: Tiempo consistente entre dispositivos). La forma más fácil para hacer esto por ahora, es dividir las funciones act y paint en dos llamadas distintas, una optimizada para el re-pintar, y una regulada para las acciones:

function run(){

    setTimeout(run,50);

    act();

}

function repaint(){

    requestAnimationFrame(repaint);

    paint(ctx);

}




Como puedes ver dentro de la función “run”, llamamos a un temporizador “setTimeout”, que llama a la función “run” de nuevo cada 50 milisegundos. Esta es una forma simple de tener el juego a 20 ciclos por segundo.

Nota que, dado que este hace el ciclo de la función “act” asíncrono de la función “repaint”, no puedes confiar que lo que realices en el primero, será dibujado en el segundo; pero esto no suele ser un problema cuando el re-pintado es más rápido que el ciclo de acciones. ¡No olvides llamar a ambas funciones en la función init!

Ahora comencemos por detectar la dirección que tomará nuestro rectángulo dependiendo la última tecla presionada, dentro de la función “act”:

    // Change Direction

    if(lastPress==KEY_UP)

        dir=0;

    if(lastPress==KEY_RIGHT)

        dir=1;

    if(lastPress==KEY_DOWN)

        dir=2;

    if(lastPress==KEY_LEFT)

        dir=3;




Después, moveremos nuestro rectángulo dependiendo la dirección que se haya tomado:

    // Move Rect

    if(dir==0)

        y-=10;

    if(dir==1)

        x+=10;

    if(dir==2)

        y+=10;

    if(dir==3)

        x-=10;




Por último, buscaremos si el rectángulo ha salido de la pantalla, y en dado caso, lo regresaremos a la misma:

    // Out Screen

    if(x>canvas.width)

        x=0;

    if(y>canvas.height)

        y=0;

    if(x<0)
        x=canvas.width;

    if(y<0)
        y=canvas.height;




Te habrás dado cuenta que antes de cada bloque de código, agregué una referencia precedida de dos diagonales (//). Esto es un comentario, y son bastante funcionales para describir qué ocurre en cada sección del código, así, si es necesario modificarlo después, podremos identificar con facilidad sus componentes.

Los comentarios también sirven para “eliminar” líneas de código, pero que podríamos querer utilizar después, por ejemplo, la que dibuja en pantalla cuál fue la última tecla presionada (No querremos que la gente que juegue nuestro juego la vea, ¿O si?).

Guarda el juego y abre “index.html”. Si todo está de forma correcta, ahora podrás controlar al pequeño rectángulo usando las flechas del teclado. ¡Felicidades!

Pausa

Podría dar por concluida la lección de hoy, pero aprovechando que estamos viendo como usar el teclado, te contaré un pequeño truco que se usa para poner “Pausa” a un juego. Comenzaremos por supuesto, creando una variable que indicará si el juego está en pausa:

var pause=true;




Ahora, encerraremos todo el contenido de nuestra función “act” en una condicional “if(!pause)”, o sea, si el juego no está en pausa. Hasta el momento hemos hecho condicionales de una sola línea, por lo que no hemos usado llaves. Pero en caso de ser utilizada más de una línea en la condicional, se deben usar llaves igual que en las funciones, tal como hacemos en el caso actual.

Al final de la condicional “if(!pause)”, agregaremos estas líneas para que al presionar KEY_ENTER (13), se cambie el juego entre pausado y sin pausa:

    // Pause/Unpause

    if(lastPress==KEY_ENTER){

        pause=!pause;

        lastPress=null;

    }




Es muy importante que estas líneas no las encierres dentro del “if(!pause)”, o de lo contrario, jamás podrás quitar la pausa (Por que jamás entrarás a esa parte del código). La asignación “pause=!pause” indica que cambio su valor por el opuesto (falso si es verdadero o verdadero si es falso), y después nulificamos “lastPress”, o de lo contrario, el juego estaría poniendo y quitando pausa sin fin hasta que se presione otra tecla.

Por último, dibujaremos en nuestra función “paint” el texto “PAUSE” de forma centrada, si la pausa está activada:

    if(pause){

        ctx.textAlign='center';

        ctx.fillText('PAUSE',150,75);

        ctx.textAlign='left';

    }




Actualicemos el juego. Ahora cada vez que presionemos la tecla Enter, el juego entrará o saldrá de la pausa.

Parte 4. Interactuando con otros elementos.

Además de poder interactuar nosotros con el juego, el segundo punto importante de un juego es que los elementos puedan interactuar entre si. Para saber si dos elementos “se están tocando” (Es decir, hay una intersección entre ellos), no solo nos basta saber su posición XY, también necesitamos conocer el alto y ancho de los elementos.

En Javascript, las funciones cumplen una doble función. No solo te permiten crear eventos que pueden ser llamados en cualquier momento (como ya hemos visto), si no que además pueden hacer la función de objetos (Esto en otros lenguajes suele ser conocido como “clases”). Por ejemplo, crearemos nuestra propio objeto “rectángulo”, que contendrá una posición en X, en Y, además de un ancho y alto.

Además, las funciones de tipo objeto pueden contener sus propias funciones. Así pues, agregaremos al rectángulo una función “intersección”, que nos dirá si está en una intersección con un segundo elemento, así como una función que rellene de forma más sencilla el rectángulo. Para conocer más a detalle sobre este tema, lee el Apéndice 3: Programación Orientada a Objetos; por ahora, tan solo copiemos al final de nuestro código, la siguiente función:

function Rectangle(x,y,width,height){

    this.x=(x==null)?0:x;

    this.y=(y==null)?0:y;

    this.width=(width==null)?0:width;

    this.height=(height==null)?this.width:height;

    

    this.intersects=function(rect){

        if(rect!=null){

            return(this.x                this.x+this.width>rect.x&&

                this.y                this.y+this.height>rect.y);

        }

    }

    

    this.fill=function(ctx){

        if(ctx!=null){

            ctx.fillRect(this.x,this.y,this.width,this.height);

        }

    }

}




Como podremos ver, la función Rectángulo está diseñada para recibir las cuatro variables en el orden X, Y, Ancho y Alto. Si omitimos enviar alguna, esta automáticamente se volverá “0” para evitar errores, excepto en el caso de la Altura, que automáticamente obtendrá el valor del Ancho (Lo que es práctico para omitir enviar ancho y alto si queremos que ambos tengan el mismo valor).

Ahora haremos unos cambios a nuestro código. Primero eliminaremos las variables “x” y “y” que declaramos en un comienzo, y en su lugar, crearemos una variable “player” de nuestro nuevo tipo rectángulo:

var player=new Rectangle(40,40,10,10);




Después, cambiaríamos la forma en que se dibuja el rectángulo a la siguiente forma:

    player.fill(ctx);




Por último, y hay que tener mucho cuidado en esto, será que todas nuestras variables “x” y “y” que usamos antes las convertiremos agregando “player.” antes de ellas, de igual forma que hicimos con la forma en que dibujamos el rectángulo.

Ahora, necesitaremos un nuevo elemento con el cual interactuar. Crearemos una nueva variable tipo rectángulo llamada “food”:

var food=new Rectangle(80,80,10,10);




De igual forma, la dibujaremos, solo que esta la haremos de color rojo:

    ctx.fillStyle='#f00';

    food.fill(ctx);




Ahora, analizaremos si ambos están en una intersección. En dado caso, agregaremos un punto a nuestro puntuaje, y cambiaremos la posición de la comida a otro lugar al azar. Para ello, primero tendremos que declarar nuestro puntuaje:

var score=0;




También agregaremos esta función que nos será muy útil para facilitar el uso de números enteros al azar:

function random(max){

    return Math.floor(Math.random()*max);

}




Ahora si, en la función “act”, después de mover a nuestro jugador, compararemos si ambos elementos están en una intersección, y de ser así, agregaremos un punto más y cambiaremos de posición la comida:

        // Food Intersects

        if(player.intersects(food)){

            score++;

            food.x=random(canvas.width/10-1)*10;

            food.y=random(canvas.height/10-1)*10;

        }




La pequeña ecuación de dividir la pantalla entre 10 dentro del random y multiplicarla al final de nuevo, hace que la comida aparezca en un lugar cada 10 pixeles, de esta forma se ajustará “a la rejilla”. Por último, dibujaremos nuestro puntuaje en pantalla:

    ctx.fillText('Score: '+score,0,10);




Guardemos y probemos el código. Ahora cada vez que el rectángulo verde toque al rojo, el puntuaje subirá.

Parte 5. Interactuando con varios elementos iguales.

Ya vimos como hacer para que un objeto interactúe con otro. El problema sería si quisiéramos, por ejemplo, querer interactuar con 50 elementos que hagan exactamente lo mismo (Como serían por ejemplo los enemigos). Tener que evaluar uno por uno sería demasiado tedioso y complicado. Afortunadamente, hay una forma más sencilla de interactuar con varios elementos de propiedades iguales a través de los arreglos.

Para este ejemplo, crearemos una variable de tipo arreglo llamada “wall”:

var wall=new Array();




Este arreglo contendrá todos nuestros elementos de tipo pared. Ahora, agregaremos cuatro elementos a este arreglo de la siguiente forma:

wall.push(new Rectangle(100,50,10,10));

wall.push(new Rectangle(100,100,10,10));

wall.push(new Rectangle(200,50,10,10));

wall.push(new Rectangle(200,100,10,10));




Para dibujar los elementos de la pared, recorreremos los elementos del arreglo a través de un “for”, de la siguiente forma:

    ctx.fillStyle='#999';

    for(var i=0,l=wall.length;i        wall[i].fill(ctx);

    }




De igual forma, comprobaremos cada elemento de la pared con un “for”, y comprobaremos si hace una intersección con la comida o el jugador:

        // Wall Intersects

        for(var i=0,l=wall.length;i            if(food.intersects(wall[i])){

                food.x=random(canvas.width/10-1)*10;

                food.y=random(canvas.height/10-1)*10;

            }

            

            if(player.intersects(wall[i])){

                pause=true;

            }

       }




Primero, comprobamos si la comida choca con la pared. En dado caso, cambiamos de lugar la comida, esto evitará que esta quede “atorada” en la pared. Segundo, comprobamos si el jugador choca con la pared, y en tal caso, el juego se detendrá. Eso está bien, pero lo ideal sería que cuando el jugador choque, al reanudar el juego, este comience desde el principio.

Arreglemos esto. Comencemos por saber cuando el jugador ha perdido, a través de una variable llamada “gameover”:

var gameover=true;




Luego, agreguemos estas líneas justo donde el juego comienza, después del “if(!pause)”:

        // GameOver Reset

        if(gameover)

            reset();




De esta forma, llamaremos a una función llamada “reset”, donde indicaremos como queremos que inicie el juego. En este caso, pondremos el score en cero, la dirección hacia su punto original, regresaremos al jugador a su punto inicial y cambiaremos de lugar la comida. Por último, por supuesto, nos aseguraremos que el juego deje de estar en Game Over:

function reset(){

    score=0;

    dir=1;

    player.x=40;

    player.y=40;

    food.x=random(canvas.width/10-1)*10;

    food.y=random(canvas.height/10-1)*10;

    gameover=false;

}




Por último, cambiaremos el “if(pause)” en nuestro “paint” para ver si el juego está en Game Over o en una pausa común:

    if(pause){

        ctx.textAlign='center';

        if(gameover)

            ctx.fillText('GAME OVER',150,75);

        else

            ctx.fillText('PAUSE',150,75);

        ctx.textAlign='left';

    }




Si me siguieron hasta aqui su codigo final les debe quedar asi.

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

var canvas=null,ctx=null;

var lastPress=null;

var pause=true;

var gameover=true;

var dir=0;

var score=0;

var player=new Rectangle(40,40,10,10);

var food=new Rectangle(80,80,10,10);

var wall=new Array();

wall.push(new Rectangle(100,50,10,10));

wall.push(new Rectangle(100,100,10,10));

wall.push(new Rectangle(200,50,10,10));

wall.push(new Rectangle(200,100,10,10));

var KEY_ENTER=13;

var KEY_LEFT=37;

var KEY_UP=38;

var KEY_RIGHT=39;

var KEY_DOWN=40;

function random(max){

    return Math.floor(Math.random()*max);

}

function init(){

    canvas=document.getElementById('canvas');

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

    run();

    repaint();

}

function run(){

    setTimeout(run,50);

    act();

}

function repaint(){

    requestAnimationFrame(repaint);

    paint(ctx);

}

function reset(){

    score=0;

    dir=1;

    player.x=40;

    player.y=40;

    food.x=random(canvas.width/10-1)*10;

    food.y=random(canvas.height/10-1)*10;

    gameover=false;

}

function act(){

    if(!pause){

        // GameOver Reset

        if(gameover)

            reset();

        

        // Change Direction

        if(lastPress==KEY_UP)

            dir=0;

        if(lastPress==KEY_RIGHT)

            dir=1;

        if(lastPress==KEY_DOWN)

            dir=2;

        if(lastPress==KEY_LEFT)

            dir=3;

        // Move Rect

        if(dir==0)

            player.y-=10;

        if(dir==1)

            player.x+=10;

        if(dir==2)

            player.y+=10;

        if(dir==3)

            player.x-=10;

        // Out Screen

        if(player.x>canvas.width)

            player.x=0;

        if(player.y>canvas.height)

            player.y=0;

        if(player.x<0)
            player.x=canvas.width;

        if(player.y<0)
            player.y=canvas.height;

        

        // Food Intersects

        if(player.intersects(food)){

            score++;

            food.x=random(canvas.width/10-1)*10;

            food.y=random(canvas.height/10-1)*10;

        }

        

        // Wall Intersects

        for(var i=0,l=wall.length;i            if(food.intersects(wall[i])){

                food.x=random(canvas.width/10-1)*10;

                food.y=random(canvas.height/10-1)*10;

            }

            

            if(player.intersects(wall[i])){

                gameover=true;

                pause=true;

            }

        }

    }

    // Pause/Unpause

    if(lastPress==KEY_ENTER){

        pause=!pause;

        lastPress=null;

    }

}

function paint(ctx){

    ctx.fillStyle='#000';

    ctx.fillRect(0,0,canvas.width,canvas.height);

    ctx.fillStyle='#0f0';

    player.fill(ctx);

    ctx.fillStyle='#999';

    for(var i=0,l=wall.length;i        wall[i].fill(ctx);

    }

    ctx.fillStyle='#f00';

    food.fill(ctx);

    

    ctx.fillStyle='#fff';

    //ctx.fillText('Last Press: '+lastPress,0,20);

    ctx.fillText('Score: '+score,0,10);

    if(pause){

        ctx.textAlign='center';

        if(gameover)

            ctx.fillText('GAME OVER',150,75);

        else

            ctx.fillText('PAUSE',150,75);

        ctx.textAlign='left';

    }

}

document.addEventListener('keydown',function(evt){

    lastPress=evt.keyCode;

},false);

function Rectangle(x,y,width,height){

    this.x=(x==null)?0:x;

    this.y=(y==null)?0:y;

    this.width=(width==null)?0:width;

    this.height=(height==null)?this.width:height;

    

    this.intersects=function(rect){

        if(rect!=null){

            return(this.x                this.x+this.width>rect.x&&

                this.y                this.y+this.height>rect.y);

        }

    }

    

    this.fill=function(ctx){

        if(ctx!=null){

            ctx.fillRect(this.x,this.y,this.width,this.height);

        }

    }

}

window.requestAnimationFrame=(function(){

    return window.requestAnimationFrame || 

        window.webkitRequestAnimationFrame || 

        window.mozRequestAnimationFrame || 

        function(callback){window.setTimeout(callback,17);};

})();




De esta forma, concluimos con todos los conocimientos básicos para crear un juego.

Bueno amigos ahora si ya tiene material para estudiar, como siempre les digo sigan buscando en la internet si les interesa el tema. Comenten punteen y dejen las dudas.

Saludos Addiel

Juego con canvas HTML y JavaScriptGIF

No comments yet.

Leave a Comment