Mover objetos pintados en el canvas con HTML5
Bienvenidos a VerTutoriales, en esta ocasión os traemos un pequeño script para que podais utilizarlo en vuestros juegos o aplicaciones en HTML5. Vamos a mover objetos pintados dentro de un objeto Canvas de HTML5.
Para ello os dejo el código de un juego que a más de uno les suene… el ping pong. El mítico juego de las dos «raquetas» y la pelota. Veamos:
<!DOCTYPE html>
<html>
<!--
# -------------------------------------------------------------------
# -------------------------------------------------------------------
# JUEGO PINGPONG HTML5
# ARTURO BERMEJO GUARDALES
# UNIVERSIDAD NACIONAL DEL CALLAO
# LIMA-PERU
# a.bermejo@hotmail.com
# -------------------------------------------------------------------
# -------------------------------------------------------------------
-->
<head>
<title>Ping Pong HTML5 v0.1</title>
<style type="text/css">
body {
background-color:black;
}
#stage {
border:5px groove red;
background-color:white;
}
p,#puntaje,#score_container {
color:white;
}
p,#puntaje,#score_container {
color:white;
}
h3 {
color:#BEF781;
}
</style>
<script src='google.js' type='text/javascript'></script>
<script type="text/javascript">
//DECLARAMOS VARIABLES GLOBALES QUE UTILIZAREMOS
//Variables de "A"
var x=100; //eje x
var y=115; // eje y
var dy=0;
//Variables de "B"
var w=680; //eje x
var z=115; // eje y
var dz=0;
//Variables de pelota
var m=110; //eje x
var n=145; // eje y
var dm=10;
var dn=0;
var diago=0;
//Variables de puntaje
var puntajeA=300;
var puntajeB=300;
//Funcion de inicio llamada a travez del boton Comenzar puesto en el Body
function init() {
//se inicia la funcion, llamamos el canvas del body y lo contextualizamos para usar 2d
myCanvas = document.getElementById("stage");
context= myCanvas.getContext('2d');
//se ejecutaran las funciones drawA, drawB y pelota en intervalos de 100
setInterval(drawA,100);
setInterval(drawB,100);
setInterval(pelota,100);
}
//jugador "A" primera funcion llamada a ejecutarse
function drawA() {
context.clearRect (0,0, 800,300);//limpiamos pantalla
//dibujamos jugador A
context.beginPath();
context.fillRect(x,y,10,70);
context.closePath();
context.fill();
//aumentamos dx y dy a los respectivos ejes segun las teclas de control de la funcion control() de esa manera simulamos movimiento
y+=dy;
//restricciones para los bordes
if (y<=0 || y>=230) dy=-dy
}
//jugador "B" segunda funcion llamada a ejecutarse
function drawB() { //notese que ya no es necesario limpiar pantalla la primera funcion se encargara de eso
//dibujamos jugador B
context.beginPath();
context.fillRect(w,z,10,70);
context.closePath();
context.fill();
//aumentamos dw y dz a los respectivos ejes segun las teclas de control de la funcion control() de esa manera simulamos movimiento
z+=dz;
//restricciones para los bordes
if (z<=0 || z>=230) dz=-dz
}
//pelota tercera funcion llamada
function pelota() {
var nave=navigator.userAgent.toLowerCase();
if(nave.indexOf("firefox")!=-1)
{
HTMLElement.prototype.__defineGetter__("innerText",function () { return(this.textContent); });
HTMLElement.prototype.__defineSetter__("innerText",function (txt) { this.textContent = txt; });
}
//dibujamos la pelota
/*
context.beginPath();
context.fillRect(m,n,10,10);
context.closePath();
context.fill();
*/
//@Aga mod
context.beginPath();
context.arc(m,n,10,0,Math.PI*2,true);
context.closePath();
context.fill();
//aumentamos dw y dz a los respectivos ejes segun las condiciones declaradas a continuacion
m+=dm;
n+=dn;
//relacionamos los valores de las coordenadas para que cambie de direccion cuando choque con un juagador
if ((x+10==m && n<=y+70 && n+10>=y)||(w==m+10 && n<=z+70 && n+10>=z)) {
//adicionalmente relacionamos coordenadas y la variable "diago" para el movimiento en diagonal de rebote de la pelota
//segun la direccion que en ese momento estaba teniendo el jugador
if(diago==0){dm=-dm}
if(diago==1){dm=-dm;dn=-10}
if(diago==2){dm=-dm;dn=10}
}
//restricciones para los bordes superiores
if (n<=0 || n>=290) {dn=-dn}
//pierde A y lanzamos otra pelota
if (m==0){
puntajeA-=10;
document.getElementById('puntajeA').innerText = puntajeA;
n=145;
m=110;
dm=-dm;
}
//pierde B y lanzamos otra pelota
if (m==800){
puntajeB-=10;
document.getElementById('puntajeB').innerText = puntajeB;
n=145;
m=670;
dm=-dm;
}
}
//funcion para capturar las teclas presionadas a travez del onkeydown del body y controlar los jugadores
//funcion para capturar las teclas presionadas a travez del onkeydown del body y controlar los jugadores
//@DK mod
document.onkeydown = function (event)
{
var keycode = (window.event||event).keyCode;
tecla=event.keyCode;
//Controles "A"
if (tecla==87) {dy=-10; diago=1;} //arriba W
if (tecla==83) {dy=10; diago=2;} //abajo S
//Controles "B"
if (tecla==38) {dz=-10; diago=1;} //arriba
if (tecla==40) {dz=10; diago=2;} //abajo
}
/*function Control() {
tecla=event.keyCode;
//Controles "A"
if (tecla==87) {dy=-10; diago=1;} //arriba W
if (tecla==83) {dy=10; diago=2;} //abajo S
//Controles "B"
if (tecla==38) {dz=-10; diago=1;} //arriba
if (tecla==40) {dz=10; diago=2;} //abajo
}
*/
</script>
</head>
<body link="red" vlink="red" alink="red">
<div id='bar' align="center">
<h3>Ping Pong en HTML5 v0.1</h3>
<canvas id="stage" width="800" height="300">
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
<div id='score_container'>
Jugador A:
<b><span id='puntajeA'>300</span></b>
Jugador B:
<b><span id='puntajeB'>300</span></b><br>
</div>
<form>
<input id="boton" type="button" value="Comenzar" onClick="init();">
</form>
<p>Para el jugador A las telcas a usar son (w,s)<b>-Controles-</b>Para el jugador B las teclas a usar son las flechas direccionales
</div>
</body>
</html>
El código utiliza las funciones que explicamos con anterioridad, así que simplemente está puesto en práctica lo anteriormente aprendido.
Pues ya sabeis que si teneis alguna duda podeis comentar lo que querais.
Un saludo!
Te felicito excelente ejemplo del uso de canvas .
sigan adelante esta muy interesante la pagina…….
Saludos desde Guate…..
Gracias 🙂
Estamos trabajando en un tilador o mapeador en HTML5, por si te interesa el uso de otros eventos sobre el canvas, pintado de imágenes y demás 🙂
http://www.vertutoriales.com/index.php/crear-un-tilador-en-html5/
Un saludo!
Si pulsas varias veces el botón comenzar todo se mueve más deprisa cada evz, porque los intervalos se van «sumando». Deberías limpiar los intervalos cuando se pulse ese botón, por lo demás buen juego.
Un saludo!
Es en plan laboratorio HTML5, así que… gracias por experimentar! 🙂
El video pone no existe. Puedes arreglarlo
Lo busco y te aviso 😉
Hola. Gracias por compartir.
Por favor pueden hacer un ejemplo de mover div1 que esta dentro de un div2, a otro div3, con onclick. Es decir que seleccione un div1 con click, y después darle click al otro div3, y el div1 se mueva al dvi3 con esa función. Gracias.
Saludos.
Si lo único que quieres mover el contenido de un div seleccionado con Jquery sería algo como:
var capa = «»;
$(«#div1»).onclick({function()
capa = $(this).html();
});
$(«#div3»).onclick({function()
$(this).html(capa);
});
Revisa la sintaxis del onclick por que no recuerdo ahora mismo como es exactamente, es posible que la llamada a la función no esté correcta.
Un saludo!