HTML 5 Canvas

-May 2013+
SMTWTFS
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678
  • RSS
  • Add To My MSN
  • Add To Windows Live
  • Add To My Yahoo
  • Add To Google

Statistics

  • Entries (3)
  • Comments (15)

Aprendiendo HTML5 con Mario Bros (3 de 6) 

Tuesday, January 31, 2012 1:09:00 PM

controlar mario Hola estimad@ lector!

Continuamos con el tercer post de la serie Aprendiendo HTML5 con Mario Bros.

En el post anterior aprendimos el mecanismo de dibujo del elemento Canvas y desplazamos a Mario sobre el eje horizontal. En esta ocasión vamos a crear una sensación de movimiento mucho mas realista mientras controlamos a Mario con nuestro teclado.

Puedes ver lo que aprenderemos en este post aquí.

Bueno no siendo mas, manos a la obra! Como nuestro codigo Javascript esta aumentando debemos poner un poco de orden en nuestra casa, así que vamos a crear un archivo externo llamado mario.js para contener nuestro codigo javascript, este archivo lo referenciaremos desde nuestra página html5 así:

Codigo de nuestra pagina HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Aprendiendo HTML5 con Mario Bros!</title>
  6.         <script src="scripts/mario.js"></script>
  7.     </head>
  8.     <body>
  9.         <canvas id="marioCanvas" width="500" height="300" style="border: 1px dotted #000;">
  10.             Este texto se mostrara unicamente si tu navegador
  11.             no soporta el elemento canvas de html5
  12.         </canvas>
  13.     </body>
  14. </html>


En el archivo mario.js tendremos el codigo javascript que desarrollamos hasta el ultimo post, así:

Codigo del archivo mario.js
  1. var marioCanvas, contexto, xMario = 20;
  2.  
  3. var imagenMario = new Image();
  4. imagenMario.src = "imagenes/mariod1.png";
  5.  
  6. $(document).ready(function () {
  7.     marioCanvas = document.getElementById("marioCanvas");
  8.     contexto = marioCanvas.getContext("2d");
  9.  
  10.     setInterval(dibujarMario, 100);
  11. });
  12.  
  13. function dibujarMario() {
  14.     contexto.clearRect(0, 0, 500, 300);
  15.  
  16.     contexto.drawImage(imagenMario, xMario, 230);
  17.     xMario += 10;
  18. }


Ya hemos utilizado eventos como el $(document).ready(..) para definir la función que se ejecutará al cargar nuestra pagina como punto de entrada. Ahora, (de manera muy similar) vamos a adicionar los eventos necesarios para capturar las flechas izquierda y derecha de nuestro teclado. Para ello utilizaremos los atributos onkeydown y onkeyuppara definir las funciones que se encargaran de procesar los eventos de nuestro teclado.

  • onkeydown definirá la función encargada de procesar el evento que ocurrira al PRESIONAR CUALQUIER tecla de nuestro teclado.
  • onkeyup definirá la función encargada de procesar el evento que ocurrira al SOLTAR CUALQUIER tecla de nuestro teclado.

Si, escuchaste bien, cualquier tecla, lo cual quiere decir que tendremos que restringir para que Mario se mueva únicamente al presionar las flechas izquierda(37) y derecha(39).

37 y 39 son los numeros (keyCode) asociados a las flechas izquierda y derecha respectivamente, puedes ver el listado completo de codigos asociados a cada tecla de tu teclado aquí.

Adicionalmente modificaremos la función dibujarMario() para cambiar la dirección del desplazamiento acorde a la tecla presionada. El codigo sería algo así:

Controlar a Mario con el teclado
  1. var FLECHA_IZQUIERDA = 37, FLECHA_DERECHA = 39;
  2. var moverIzquierda = false, moverDerecha = false;
  3.  
  4. $(document).keydown(teclaPresionada);
  5. $(document).keyup(teclaLiberada);
  6.  
  7. function dibujarMario() {
  8.     contexto.clearRect(0, 0, 500, 300);
  9.  
  10.     contexto.drawImage(imagenMario, xMario, 230);
  11.     if (moverIzquierda == true) {
  12.         xMario -= 10;
  13.     }
  14.     else if (moverDerecha == true) {
  15.         xMario += 10;
  16.     }
  17. }
  18.  
  19. function teclaPresionada(teclado) {
  20.     if (teclado.keyCode == FLECHA_IZQUIERDA) {
  21.         moverIzquierda = true;
  22.     }
  23.     else if (teclado.keyCode == FLECHA_DERECHA) {
  24.         moverDerecha = true;
  25.     }
  26. }
  27.  
  28. function teclaLiberada(teclado) {
  29.     if (teclado.keyCode == FLECHA_IZQUIERDA) {
  30.         moverIzquierda = false;
  31.     }
  32.     else if (teclado.keyCode == FLECHA_DERECHA) {
  33.         moverDerecha = false;
  34.     }
  35. }

Puedes ver este codigo en vivo aquí

Muy bien! ya puedes controlar a Mario con el teclado! Ahora vamos a mejorar la ilusión de movimiento intercambiando la imagen de mario durante el desplazamiento, utilizaremos las siguientes imagenes para simular que se encuentra caminando:

posiciones mario

Para tal fin, vamos a programar lo siguiente:

  1. Vamos a crear un vector con las imagenes que utilizaremos como secuencia de movimiento
  2. Vamos a modificar la funcion dibujarMario() para que ademas de incrementar/disminuir la posición xMario tambien cambie la imagen por la correspondiente en el vector.
  3. Vamos a crear un contador para llevar el orden de la secuencia imagenes que vamos a mostrar
  4. Al cargar la pagina, $(document).ready(...) llamará la función iniciarJuego() la cual se encargara de ubicar a mario en posición de reposo hasta que el usuario presione una tecla

Nuestro codigo se vería masomenos así:

Ilusion de movimiento basado en imagenes
  1. var moverIzquierda = false, moverDerecha = false;
  2. var contadorSecuenciaImagenes = 0;
  3. var imagenesDerecha = [new Image(), new Image()];
  4. var imagenesIzquierda = [new Image(), new Image()];
  5.  
  6. function iniciarJuego() {
  7.     contexto.drawImage(imagenesDerecha[0], xMario, 230);
  8.     setInterval(dibujarMario, 100);
  9. }
  10. function dibujarMario() {
  11.     if (moverIzquierda == true) {
  12.         xMario -= 10;
  13.         cambiarImagenSecuencia(imagenesIzquierda, contadorSecuenciaImagenes, xMario, 230);
  14.     }
  15.     else if (moverDerecha == true) {
  16.         xMario += 10;
  17.         cambiarImagenSecuencia(imagenesDerecha, contadorSecuenciaImagenes, xMario, 230);
  18.     }
  19. }
  20. function cambiarImagenSecuencia(vectorImagenes, posicion, x, y) {
  21.     contexto.clearRect(0, 0, 500, 300);
  22.     contexto.drawImage(vectorImagenes[posicion], x, y);
  23.     actualizarContadorSecuencia();
  24. }
  25. function actualizarContadorSecuencia() {
  26.     if (contadorSecuenciaImagenes == 0) {
  27.         contadorSecuenciaImagenes = 1;
  28.     }
  29.     else {
  30.         contadorSecuenciaImagenes = 0;
  31.     }
  32. }


 Puedes ver este codigo en vivo aquí

Muy bien, hasta aquí nos trajo el rio, en el proximo post vamos a darle color al mundo de mario, tambien controlaremos las fronteras del mundo y le permitiremos subir al segundo nivel (nubes)

Por lo pronto puedes jugar con el codigo que hemos desarrollado hasta ahora, intenta jugar con la posición de mario, la velocidad de sus movimientos, o agregar otros personajes, quizás el hongo? tu decides!

Puedes ver el codigo COMPLETO del archivo mario.js que hemos desarrollado hasta ahora: (o puedes descargado aquí)

Codigo completo desarrollado hasta ahora mario.js
  1. // variables globales
  2. var marioCanvas, contexto, xMario = 20;
  3. var FLECHA_IZQUIERDA = 37, FLECHA_DERECHA = 39;
  4. var moverIzquierda = false, moverDerecha = false;
  5. var contadorSecuenciaImagenes = 0;
  6.  
  7. // vectores de imagenes
  8. var imagenesDerecha = [new Image(), new Image()];
  9. imagenesDerecha[0].src = "imagenes/derecha0.png";
  10. imagenesDerecha[1].src = "imagenes/derecha1.png";
  11.  
  12. var imagenesIzquierda = [new Image(), new Image()];
  13. imagenesIzquierda[0].src = "imagenes/izquierda0.png";
  14. imagenesIzquierda[1].src = "imagenes/izquierda1.png";
  15.  
  16. // eventos iniciales
  17. $(document).ready(function () {
  18.     marioCanvas = document.getElementById("marioCanvas");
  19.     contexto = marioCanvas.getContext("2d");
  20.  
  21.     setTimeout("iniciarJuego();", 500);
  22. });
  23.  
  24. $(document).keydown(teclaPresionada);
  25. $(document).keyup(teclaLiberada);
  26.  
  27. function iniciarJuego() {
  28.     contexto.drawImage(imagenesDerecha[0], xMario, 230);
  29.     setInterval(dibujarMario, 100);
  30. }
  31.  
  32.  
  33. // mario
  34. function dibujarMario() {
  35.     if (moverIzquierda == true) {
  36.         xMario -= 10;
  37.         cambiarImagenSecuencia(imagenesIzquierda, contadorSecuenciaImagenes, xMario, 230);
  38.     }
  39.     else if (moverDerecha == true) {
  40.         xMario += 10;
  41.         cambiarImagenSecuencia(imagenesDerecha, contadorSecuenciaImagenes, xMario, 230);
  42.     }
  43. }
  44.  
  45. function cambiarImagenSecuencia(vectorImagenes, posicion, x, y) {
  46.     contexto.clearRect(0, 0, 500, 300);
  47.     contexto.drawImage(vectorImagenes[posicion], x, y);
  48.     actualizarContadorSecuencia();
  49. }
  50.  
  51. function actualizarContadorSecuencia() {
  52.     if (contadorSecuenciaImagenes == 0) {
  53.         contadorSecuenciaImagenes = 1;
  54.     }
  55.     else {
  56.         contadorSecuenciaImagenes = 0;
  57.     }
  58. }
  59.  
  60. // control de las flechas del teclado
  61. function teclaPresionada(teclado) {
  62.     if (teclado.keyCode == FLECHA_IZQUIERDA) {
  63.         moverIzquierda = true;
  64.     }
  65.     else if (teclado.keyCode == FLECHA_DERECHA) {
  66.         moverDerecha = true;
  67.     }
  68. }
  69.  
  70. function teclaLiberada(teclado) {
  71.     if (teclado.keyCode == FLECHA_IZQUIERDA) {
  72.         moverIzquierda = false;
  73.     }
  74.     else if (teclado.keyCode == FLECHA_DERECHA) {
  75.         moverDerecha = false;
  76.     }
  77. }

ummm.... deberiamos refactorizar este codigo para hacerlo mas mantenible/comprensible ¿le damos a un post para refactorizar este codigo y de paso volverlo orientado a objetos? ¿que opinas?

Si quieres aprender mas sobre los temas aqui tratados, puedes consultar las siguientes referencias:


Gracias por pasar por aquí, y recuerda no quedarte con esto para ti solamente, puedes compartirlo y/o dejar un comentario XD

Hasta la proxima!
@orendon

Comments(7)  

Aprendiendo HTML5 con Mario Bros! (2 de 6) 

Tuesday, January 17, 2012 1:32:00 PM

Hola, este es el segundo post de la serie, puedes ver todos los post anteriores aquí.

En esta oportunidad estaremos dandole vida a Mario utilizando el elemento Canvas y el API de Javascript. Puedes ver el resultado final de lo que aprenderemos en este post aquí, pero primero vamos a aclarar algunos conceptos para entender mejor el asunto.

El elemento Canvas (nuevo en HTML5) es un contenedor de graficos, el cual expone una serie de metodos que podemos usar mediante scripting para manipular cada pixel (para nuestro caso utilizaremos javascript).
Aunque el estandar HTML5 aun no es oficial, la mayoria de los navegadores ya ofrecen soporte a gran parte de los nuevos elementos de HTML5 como el Canvas.

Para darle vida a Mario sobre nuestro Canvas utilizaremos su contexto, para ello utilizaremos el metodo getContext("2d"). Pensaremos en este contexto como un plano cartesiano(2D) donde las coordenadas (x=0, y=0) se encuentran en la esquina superior izquierda del elemento canvas. Anteriormente creamos un Canvas de 500x300, las coordenadas dentro de su contexto serían algo asi:

Plano x,y Canvas

Aclarados estos conceptos, vamos a ensuciarnos las manos con un poco de codigo!

Utilizaremos la misma pagina html5 que construimos en el post anterior y agregaremos la referencia a la libreria jQuery, adicionaremos el atributo ID a nuestro canvas y obtendremos el contexto de nuestro Canvas al cargar la pagina web utilizando la función $(document).ready(function(){ ... }

No es estrictamente necesario utiliar jQuery, en lugar de la función $(document).ready(function(){ ... } de jQuery podriamos utilizar el evento onload de nuestro documento, sin embargo utilizaremos jQuery para simplificar algunos elementos que introduciremos mas adelante.

Hasta ahora, el codigo de nuestro documento luciría algo como:

Obtener contexto
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Aprendiendo HTML5 con Mario Bros!</title>
  6.         <script src="scripts/jquery-1.7.1.min.js"></script>
  7.         <script>
  8.             var contexto;
  9.  
  10.             $(document).ready(function () {
  11.                 var marioCanvas = document.getElementById("marioCanvas");
  12.                 contexto = marioCanvas.getContext("2d");
  13.             });
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <canvas id="marioCanvas" width="500" height="300" style="border: 1px dotted #000;">
  18.             Este texto se mostrara unicamente si tu navegador
  19.             no soporta el elemento canvas de html5
  20.         </canvas>
  21.     </body>
  22. </html>

Puedes ver este codigo en vivo aquí

 

Muy bien, hasta ahora solo hemos creado el documento html5, el canvas y hemos obtenido su contexto. Ahora vamos a dibujar a Mario sobre nuestro canvas. Para ello crearemos una función llamada dibujarMario() que utilizará el metodo drawImage(imagen, x, y)el cual recibe como argumentos una imagen, y las coordenadas (x,y) donde será ubicada. Llameremos la funcion dibujarMario() desde nuestro $(document).ready() para que se ejecuté al cargar la pagina, el codigo de nuestro script lucirá asi:

Dibujar a mario en el vanvas
  1. <script>
  2.     var contexto;
  3.     var imagenMario = new Image();
  4.     imagenMario.src = "imagenes/mariod1.png";
  5.  
  6.     $(document).ready(function(){
  7.         var marioCanvas = document.getElementById("marioCanvas");
  8.         contexto = marioCanvas.getContext("2d");
  9.  
  10.         dibujarMario();
  11.     });
  12.  
  13.     function dibujarMario() {
  14.         contexto.drawImage(imagenMario, 20, 230);
  15.     }
  16. </script>

Puedes ver este codigo en vivo aquí

 

Muy bien, ahora que tenemos a Mario en el canvas vamos a enseñarle a dar sus primeros pasos! Para ello vamos a crear una variable llamada xMario que representará su coordenada "x" dentro del plano y aumentaremos dicha posición cada 100 milisegundos utilizando la funcion setInterval(script, miliSegundos)para crear la ilusión de movimiento horizonal. Nuestro script luciría asi:

Desplazamiento horizontal
  1. <script>
  2.     var contexto, xMario = 20;
  3.     var imagenMario = new Image();
  4.     imagenMario.src = "imagenes/mariod1.png";
  5.  
  6.     $(document).ready(function(){
  7.         var marioCanvas = document.getElementById("marioCanvas");
  8.         contexto = marioCanvas.getContext("2d");
  9.  
  10.         setInterval(dibujarMario, 100);
  11.     });
  12.  
  13.     function dibujarMario() {
  14.         contexto.drawImage(imagenMario, xMario, 230);
  15.         xMario += 10;
  16.     }
  17. </script>

Puedes ver este codigo en vivo aquí


Aja!Como habrás podido notar, Mario se desplaza horizontalmente pero lo persigue su karma XD

Esto ocurre porque a diferencia de Flash o Silverlight, en HTML el Canvas funciona como una "pintura", de manera que en lugar de mover los objetos debemos limpiar nuestra "pintura" y volver a pintar los objetos en su nueva posición.

Para limpiar nuestra "pintura" utilizaremos el metodo clearRect(xi, yi, xf, yf)el cual recibe como argumento las cordenadas x,y iniciales y finales del segmento que será borrado. Nuestro codigo script se vería así:

Limpiando y repintando
  1. <script>
  2.     var contexto, xMario = 20;
  3.     var imagenMario = new Image();
  4.     imagenMario.src = "imagenes/mariod1.png";
  5.  
  6.     $(document).ready(function(){
  7.         var marioCanvas = document.getElementById("marioCanvas");
  8.         contexto = marioCanvas.getContext("2d");
  9.  
  10.         setInterval(dibujarMario, 100);
  11.     });
  12.  
  13.     function dibujarMario() {
  14.         contexto.clearRect(0, 0, 500, 300);
  15.         
  16.         contexto.drawImage(imagenMario, xMario, 230);
  17.         xMario += 10;
  18.     }
  19. </script>

Puedes ver este codigo en vivo aquí

Puedes encontrar el codigo completo de lo que desarrollamos en este post haciendo click aquí. Adicionalmente encontrarás allí la función dibujarMontanias() la cual utiliza el metodo contexto.lineTo(x, y) para marcar puntos en el plano, y el metodo contexto.stroke() para unir todos estos puntos con lineas y asi dar la aparencia de montañas en el fondo de nuestro plano.


En nuestro proximo post crearemos una sensación de movimiento mucho mas realista y adicionaremos soporte para poder controlar a Mario en varias direcciones utilizando las flechas de nuestro teclado.Si quieres aprender más sobre los temas tratados en este post, puedes consultar las siguientes referencias:

Gracias por pasar por aquí, y recuerda no quedarte con esto para ti solamente, puedes compartirlo y/o dejar un comentario XD

Nos leemos! @orendon

Comments(5)  

Aprendiendo HTML5 con Mario Bros! 

Wednesday, January 11, 2012 5:40:00 PM
html5 mario

Hola! Este post es el primero de una serie de 6 post que conformarán un tutorial basico dedicado a html5, javascript y mario bros! Al finalizar el tutorial habremos explorado diferentes conceptos de html5, el elemento canvas y programación con javascript. Todo esto mientras recreamos una pantalla del juego Mario Bros!

 Puedes ver el resultado final de lo que aprenderemos aquí.

A continuación se encuentran los post que conformarán el tutorial, estaré actualizando estos link a medida que los vaya publicando.

  1. Aprendiendo HTML5 con Mario Bros! (Que viene siendo este post...)
  2. Elemento Canvas, Mario cobra vida
  3. Agregando movimiento a Mario
  4. Pintando el mundo 1-1 y detectando fronteras
  5. Saltando con Mario
  6. Agregando audio a Mario

No siendo mas, entremos en materia, vamos a crear una pagina html5 básica que será la base sobre la cual daremos vida a Mario en los siguientes post: (Aprendes mas si transcribes el código tu mismo en lugar de hacer copy/paste)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Aprendiendo HTML5 con Mario Bros!</title>
</head>
<body>
<canvas id="lienzo"width="500"height="300">
Este texto se mostrara unicamente cuando tu navegador no soporte el elemento canvas
</canvas>
</body>
</html>

Como podras notar la estructura de la pagina web no cambó mucho respecto a la version de HTML actual, sin embargo hay vario puntos que no deben pasarnos desapercibidos.

  • La declaración de documento ahora es mas reducida <!DOCTYPE html>
    Anteriormente era: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    La instrucción DOCTYPE le indica a los navegadores la version HTML del documento.
  • El codificación del documento es tambien mas reducida <meta charset="utf-8" />
    Anteriormente era: <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    UTF-8 representa el juego de caracteres que usaremos en nuestra pagina, por tanto debemos tener cuidarnos con caracteres como la ñ ya que no hacen parte del formato.
  • Por último, esta el elemento canvasque es nuevo en HTML5 y es el que nos permitirá dibujar graficos y agregar animaciones mediante el uso de javascript.
    Los atributos width y height indican el ancho y el alto que tendra nuestro elemento canvas.

Si quieres aprender un poco mas, puedes consultar las siguientes referencias:


En el proximo post comenzaremos a jugar con el elemento Canvas y darle vida a Mario. 

Recuerda no quedarte con esto para ti sol@, puedes compartirlo y/o dejar un comentario XD

 

Nos leemos !
@orendon

Comments(3)  
© 2009 - 2013 Avanet