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 puede interesar:

6 comentarios

  • Alexander commented on 10 enero, 2012 Reply

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

  • Byterules commented on 3 julio, 2012 Reply

    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!

    • VideoTutoriales commented on 3 julio, 2012 Reply

      Es en plan laboratorio HTML5, así que… gracias por experimentar! 🙂

  • junagel commented on 30 noviembre, 2014 Reply

    El video pone no existe. Puedes arreglarlo

Deja un comentario

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