Mover objetos pintados en el canvas con HTML5 - Tutoriales y Videotutoriales en www.vertutoriales.com
 
 
Diseño de páginas web en Córdoba. Visitanos! Taller de Chapa y Pintura en Córdoba. Hnos Troncha Cartuchos reciclados en Córdoba Joyería y Platería en Córdoba - La Joya de Plata ForoHTML5 canvas Comprar este espacio por 5/mes Recetas de cocina rica y sana Comprar este espacio por 5/mes

Mover objetos pintados en el canvas con HTML5

enero 31, 2011 · By VideoTutoriales

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.

Os dejo el enlace en el que se está siguiendo el desarrollo de ping pong además del enlace del juego del ping pong en html5 por supuesto.

Pues ya sabeis que si teneis alguna duda podeis comentar lo que querais.

Un saludo!

Más video tutoriales para que aprendas...

2 Respuestas

  1. Alexander

    enero 10th, 2012 a 11:59 pm

    1

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

  2. VideoTutoriales

    enero 11th, 2012 a 12:08 am

    2

    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!


Insertar al RSS los comentarios de esta entrada

Escribe tu comentario





«
»