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!

Carlos Dk

Apasionado por la enseñanza y el SEO

8 comentarios en “Mover objetos pintados en el canvas con HTML5

  • el 10 enero, 2012 a las 11:59 pm
    Permalink

    Te felicito excelente ejemplo del uso de canvas .
    sigan adelante esta muy interesante la pagina…….
    Saludos desde Guate…..

    Respuesta
  • el 3 julio, 2012 a las 12:20 pm
    Permalink

    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!

    Respuesta
  • el 30 noviembre, 2014 a las 4:47 pm
    Permalink

    El video pone no existe. Puedes arreglarlo

    Respuesta
  • el 20 diciembre, 2017 a las 8:45 pm
    Permalink

    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.

    Respuesta
    • el 20 diciembre, 2017 a las 10:28 pm
      Permalink

      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!

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.