Ir al contenido principal

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

Comentarios

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

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Buscador en tiempo real con AJAX, PHP y MySQL

Buscador realizado en HTML utilizando como lenguaje de programación PHP , la tecnología AJAX y a MySQL como motor de base de datos.

Funciones (subprocesos) en PSeInt

A partir de la version 20121010 (10/Octubre/2012) PSeInt permite la posibilidad de definir funciones al que el creador del mismo bautizó como subprocesos , en este tutorial explicaremos brevemente cómo se tratan dichas funciones. Para empezar una función no es más que un bloque de código con un determinado fin o propósito, podemos definir más de una y nos permiten ahorrar líneas código si nuestros programas son muy extensos o hay codificación redundante.

Convertir un decimal a binario en PSeInt

Utilizaremos el siguiente método para convertir números decimales a binarios (números que se sólo se componen de unos y ceros). El método es sencillo, consiste en dividir el número decimal entre dos, despues su cociente entre el mismo número y así sucesivamente hasta que finalmente el cociente (que se convierte en un divisor) sea igual a uno. Despúes organizamos los residuos desde el último al primero para obtener el número binario que buscamos.