viernes, 30 de noviembre de 2012

Mover una imagen sobre el canvas de HTML5 con el teclado

El siguiente código permite mover con el teclado una imagen sobre el canvas de HTML5.


<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<script>

var x=200, y=400;//coordenadas iniciales de la imagen

function lienzo(){

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("ima");
ctx.clearRect(0,0,500,500);//limpia todo el canvas
ctx.drawImage(img,x,y);//dibuja la imagen

}

//cuando presiona una tecla
function whichButton(event){

if(event.keyCode=='39'){//si la tecla presionada es direccional derecho

x=x+5;//mueve la nave 5 pixeles a la derecha
lienzo();

}

if(event.keyCode=='37'){//si la tecla presionada es direccional izquierdo

x=x-5;//mueve la nave 5 pixeles a la izquierda
lienzo();

}

if(event.keyCode=='38'){//si la tecla presionada es direccional arriba

y=y-5;//sube la nave
lienzo();

}

if(event.keyCode=='40'){// si la tecla presionada es direccional abajo

y=y+5;//baja la nave
lienzo();

}

}

</script>

</head>

<body onkeydown="whichButton(event)" onload="lienzo()">

<h1>Movimiento de una imagen sobre canvas HTML5 + JavaScript</h1>

<img id="ima" src="nave.PNG" />

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;background-color:#87CEEB;">
Tu navegador no soporta canvas</canvas>

</body>

</html>


Explicación:

Primero creamos la imagen a mover y el canvas con sus respectivos id.

<img id="ima" src="nave.PNG" />

Canvas con un ancho y alto de 500:

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;background-color:#87CEEB;">
Tu navegador no soporta canvas</canvas>

Cuando el documento se carga por completo lo primero que hace es ejecutar la funcion JavaScript lienzo(), su objetivo es obtener el canvas y la imagen a través de su id para dibujarla en pantalla.

Tambien en el body se encuentra la funcion JavaScript whichButton(event) que se ejecuta sólo cuando el usuario presiona una tecla.

<body onkeydown="whichButton(event)" onload="lienzo()">

Las variables globales x y y son las coordenadas para ubicar la imagen sobre el canvas, estas cambian su valor cuando se presiona una tecla.

Funcion whichButton(event)

Tal vez la funcion más importante, cuando se presiona una tecla se ejecuta la funcion y evalua lo siguiente:

if(event.keyCode=='39'){
 x=x+5;
 lienzo();
}

Si el usuario presiona la tecla direccional derecho (), aumenta en 5 la variable x y ejecuta de nuevo la funcion lienzo() para actualizar la nueva posición de la imagen sobre el canvas. Es importante el método clearRect(x,y,w,h) (ubicado en la función lienzo()) ya que limpia o borra todo lo que hay en el canvas. (No utilizes este método y mira lo que pasa).

Los otros condicionales de la funcion hacen lo mismo pero con diferentes valores, por ejemplo cuando se presiona la tecla izquierda () se le resta 5 a la variable x.

Por ultimo recuerda que la coordenada (0,0) del canvas siempre está ubicada en la esquina superior izquierda.

Tutorial de canvas.

Demo/código fuente

1 comentario:

  1. ohoh gracias con esto hare un pequeño movimiento a mi trabajo ...

    ResponderEliminar