Autor Tema: Juego del Buda, objetos e imágenes controlables con teclado. (Leído 3879 veces)

abermejo · « **en:** Enero 24, 2011, 06:24:01 am »

Bueno antes de irme a dormir me puse a hacer una bola controlable a travez del teclado simulando movimiento horizontal y gravedad (las capturas del teclado de la forma de Dk HTML5 creo que así funcionan mejor) , lo dejo aqui por si alguien lo quiere implementar en algun juego o lo que sea, saludos y buenas noches =).

http://forohtml5.com/juegos/buda/

P.D: Cualquier explicacion del codigo no duden en preguntar.

Código: [Seleccionar]

<!--
# ------------------------------------------------
# ------------------------------------------------
# BOLA CONTROL HTML5
# ARTURO BERMEJO GUARDALES
# UNIVERSIDAD NACIONAL DEL CALLAO
# LIMA-PERU
# a.bermejo@hotmail.com
# ------------------------------------------------
# ------------------------------------------------
-->
<html>
<head>
<title>Pelota Saltarina</title>
<script type="text/javascript">
var x=150;
var y=280;
var dx=0;
var dy=0;
var ddy=0;

function init() {
	myCanvas = document.getElementById("miCanvas"); 
	ctx= myCanvas.getContext('2d');
	setInterval(draw,10);
}

function draw() {
	ctx.clearRect (0,0, 800,300);
	ctx.fillStyle="red";
	ctx.beginPath();
	ctx.arc(x,y,20,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	x+=dx;
	/*Mentras los valores de dy y ddy sean cero la bola estara en reposo
	Dado que cada 10ms se comprueban los valores de dy y ddy bastara que cambiemos los valores
	para que inicie el movimiento*/
	y+=dy;
	dy+=ddy;
	if (y>279) {ddy=0; dy=0}
}

document.onkeydown = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=10;}
	if (tecla==37) {dx=-10;}
	/*Al presiona "arriba" primero comprobamos si la bola esta en el piso para no saltar en el aire (y>=280)
	luego si se cumple, disminuimos 20 a y aumentamos uno a dy de tal manera que cada vez va disminuir menos y */
	if (tecla==38) {if(y>=280)dy=-20;ddy=1}
}

document.onkeyup = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=0;}
	if (tecla==37) {dx=0;}
}

</script>
</head>
<body onload="init()">
<h1>Bola Control HTML5</h1>
<p>Por Arturo Bermejo Guardales</p>
<canvas style="border: 1px solid black"  id="miCanvas" width="800px" height="300px">
</canvas>
</body>

</html>

Canvas Dk · « **Respuesta #1 en:** Enero 24, 2011, 10:19:15 am »

Buenas abermejo,

Funciona a la perfección, quizás añadirle algo de inercia para que no parezca tan artificial el movimiento sería una mejora considerable, a ver si alguien se anima!

Un saludo!

rmr · « **Respuesta #2 en:** Enero 24, 2011, 03:41:06 pm »

Buen trabajo abermejo.

¿ Nos inventamos unas reglas y hacemos un juego?

1# Cambiar potencia de salto según este pulsada a tecla.
2# ir esquivando proyectiles que entren desde el lado derecho del canvas y salgan por el izquierdo

Agapito · « **Respuesta #3 en:** Enero 24, 2011, 03:52:06 pm »

Estaría interesante, quizás que cada vez que pulses la tecla de salto dé pequeños impulsos, puede estar bien

abermejo · « **Respuesta #4 en:** Enero 24, 2011, 03:59:06 pm »

Que tal rmr.
Justo eso pensé hoy que desperté lo de los proyectiles, estaba pensando generarlos con una variable que obtenga valores al azar en el eje Y, aunque todavía no lo he intentado. A ver si puedes lograr ese efecto me avisas, ahorita estoy probando con sprites con la misma idea del movimiento para dejar de usar bolas y cuadrados XD, a ver si le damos un poco mas de vida a los personajes.

abermejo · « **Respuesta #5 en:** Enero 25, 2011, 06:04:41 am »

Bueno, creo que ahora si me dedicare a hacer un juego completo, espero terminar en unos dias y estare por aqui de vuelta con el codigo, no sin antes quiero dejar una modificacion a la bola controlable con el teclado, ahora le puse un personaje, la imagen esta en imageshack, ahi dejo el código por si a alguien le es útil.
Saludos y sigan colaborando con sus proyectos.

Código: [Seleccionar]

<!--
# ------------------------------------------------
# ------------------------------------------------
# CODIGO POR
# ARTURO BERMEJO GUARDALES
# LIMA-PERU
# a.bermejo@hotmail.com
# ------------------------------------------------
# ------------------------------------------------
-->
<html>
<head>
<title>Control</title>
<style type="text/css">

</style>

<script type="text/javascript">

var x=100;
var y=420;
var dy=0;
var dx=0;
var ddy;
var m;

//Funcion de inicio, carga del canvas, del contexto y de las funcines a dibujar
function inicio() {
	myCanvas = document.getElementById("miCanvas"); 
	ctx= myCanvas.getContext('2d');
	setInterval(image,10);
}

//Funcion imagen buda
function image() {
	ctx.clearRect (0,0, 600,500); //refresco de pantalla
	//condiciones de recorte
	if (dx==0) m=50;
	if (dx==-10) m=0;
	if (dx==10) m=100;
	//mostrar imagen
	var imagebudas = new Image();
	imagebudas.src = 'http://img440.imageshack.us/img440/7135/budasimage.png';
	ctx.drawImage(imagebudas, m, 0, 50, 80, x, y, 50, 80);
	//eventos a ejecutarse cada 10ms
	x+=dx;
	y+=dy;
	dy+=ddy;	
	if (y>=420) dy=0;//limite piso
}

//FUNCIONES PARA CAPTURAR TECLAS Y PRODUCIR EVENTOS

//Para teclas presionadas
document.onkeydown = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=10} //derecha
	if (tecla==37) {dx=-10} //izquierda
	if (tecla==38) {if (y>=420) {dy=-20; ddy=2;}} //arriba
}

//Para teclas soltadas
document.onkeyup = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=0} //derecha
	if (tecla==37) {dx=0} //izquierda
}

</script>
</head>

<body onload="inicio()">
<h1>Personaje Control</h1>
<p>Por Arturo Bermejo G.</p>
<canvas style="border: 1px solid black" id="miCanvas" width="600px" height="500px">
</canvas>

</body>

</html>

Canvas Dk · « **Respuesta #6 en:** Enero 25, 2011, 10:31:52 am »

Que feliz se vé el buda corriendo de un lado para otro y saltando jajaajj

Espero con impaciencia a ver que nuevas nos traes

Un saludo!

rmr · « **Respuesta #7 en:** Enero 27, 2011, 08:43:47 pm »

Hola:

Le he añadido una lluvia de soles( o sandías) que el Buda tiene que ir recogiendo para sumar su puntuación. Hasta ahora vive feliz , pero a alguien le toca añadirle proyectiles laterales o lo que se le ocurra. Copien mi función de objetos verticales y añadanle cosas por los lados:

Iré subiendo los avances aquí http://forohtml5.com/juegos/buda/

Código completo:

Código: [Seleccionar]

<!--
# ------------------------------------------------
# ------------------------------------------------
# CODIGO POR
# ARTURO BERMEJO GUARDALES
# LIMA-PERU
# a.bermejo@hotmail.com
# ------------------------------------------------
# ------------------------------------------------
-->
<html>
<head>
<title>Control</title>
<style type="text/css">

</style>

<script type="text/javascript">

var x=100;
var y=420;
var dy=0;
var dx=0;
var ddy;
var m;
var canvas;
var ctx;

//Funcion de inicio, carga del canvas, del contexto y de las funcines a dibujar
function inicio() {
    canvas = document.getElementById("miCanvas"); 	
	ctx= canvas.getContext('2d');
	//	verticalObj();

	setInterval(image,10);
	setInterval(verticalObj,10);
	
}

//Funcion imagen buda
function image() {
	ctx.clearRect (0,0, canvas.width,canvas.height); //refresco de pantalla //@rm mod ALL :)
	//condiciones de recorte
	if (dx==0) m=50;
	if (dx==-10) m=0;
	if (dx==10) m=100;
	//mostrar imagen
	var imagebudas = new Image();
	imagebudas.src = 'budasimage.png';
	ctx.drawImage(imagebudas, m, 0, 50, 80, x, y, 50, 80);
	//eventos a ejecutarse cada 10ms
	
	
   	
	if((x+dx+40)<canvas.width && (x+dx)>0) x+=dx; //@rm mod: Now buDDA dont scape!
	y+=dy;
	dy+=ddy;	
	if (y>=420) dy=0;//limite piso
	

}

//FUNCIONES PARA CAPTURAR TECLAS Y PRODUCIR EVENTOS

//Para teclas presionadas
document.onkeydown = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=10} //derecha
	if (tecla==37) {dx=-10} //izquierda
	if (tecla==38) {if (y>=420) {dy=-20; ddy=2;}} //arriba
}

//Para teclas soltadas
document.onkeyup = function (event)
   {   
    var keycode = (window.event||event).keyCode;
	tecla=event.keyCode;
	if (tecla==39) {dx=0} //derecha
	if (tecla==37) {dx=0} //izquierda
}

//@author rm-
//@ 25-JAN-2011
//@ admin(/\T)forohtml5.com
//@ Vertical objects! GAME o_O
var xV=Math.floor(Math.random()*600);
var yV=0;
var score=0;
function verticalObj()
{
	var radio =10;
	if(yV>=canvas.height) //RESET on FLOOR 
	{
	xV=Math.floor(Math.random()*600);
	yV=0;
	}
	else if (  (xV > x-40 && xV < x+40 ) &&  (yV > y-10 && yV < y+10 )   ) // Score ADDed
	{
	document.getElementById('score').innerText = score++;
	xV=Math.floor(Math.random()*600);
	yV=0;
	}
	
	   
    // Drawing Down Ball
		ctx.beginPath();
		
		ctx.fillStyle = '#f00'; // red
        ctx.arc(xV,yV++, radio, 0, 360, true); 

		ctx.closePath();
		
		ctx.fill();


} 


</script>
</head>

	<body onload="inicio()">
	<div align="center">
	<h1>Personaje Control</h1>
	<p>Por Arturo Bermejo G.  && rm[forohtml5.com]  </p>
 <div id='score_container'> 
        Puntos:
        <b><span id='score'>0</span></b>
		</div>
<canvas style="border: 1px solid black" id="miCanvas" width="600px" height="500px">
</canvas>
</div>
</body>

</html>

**PD: Modifico el título de este tema.

Canvas Dk · « **Respuesta #8 en:** Enero 28, 2011, 11:52:56 am »

La puntuación no rula :S

rmr · « **Respuesta #9 en:** Enero 28, 2011, 09:17:45 pm »

Buena aportación dk xDD. Sí es lo de firefox de innerText se me olvido ponerlo, y que la primera q coges no la cuenta. Ahora lo modifico

Canvas Dk · « **Respuesta #10 en:** Enero 28, 2011, 10:17:53 pm »

Ya le pongo yo los proyectiles

y la historia jajaj

Agapito · « **Respuesta #11 en:** Enero 29, 2011, 12:40:14 am »

Parece que la cosa empieza a moverse, a ver si puedo aportar algo

Canvas Dk · « **Respuesta #12 en:** Enero 29, 2011, 06:25:56 pm »

Agapito cuando quieras

Yo ya he puesto que salga un piedrolo por la izquierda y le puse un fondo para que no estuviera el buda tan perdido fuera de su tierra jajaja. Así que lo he mandado al tibet. La roca va subiendo de velocidad según va cogiendo sandias que es lo más típico del tibet claro.

Por otro lado tambien gestiona la colisión con el pedrusco pero no le he puesto que reinicie. A ver si alguien piensa un algoritmo de niveles que sea matemático y facil de aplicar como la velocidad de la roca.

Se me ocurre que cada 10 sandias suba de nivel. y la velocidad de la piedra sea la cantidad de sandias cogidas más el numero de nivel en el que esté. De esa manera cada vez que pase de nivel, la piedra siempre tendrá un punto más de velocidad, para realizar una igualdad más o menos, cuando esté en el tercer nivel, la piedra comenzará con la velocidad que llevaría en el primer nivel pero con 9 sandias cogidas. ¿Cierto...?

Vale... creo que será mejor implementarlo jajaaj

rmr cuando puedas le añades el tema de la puntuación

rmr · « **Respuesta #13 en:** Enero 29, 2011, 06:33:38 pm »

Está puesta desde ayer, no te va?. Sí creo q hay que añadirle cantidad de salto para q esquive mejor

Canvas Dk · « **Respuesta #14 en:** Enero 29, 2011, 08:52:14 pm »

Me refería para guardarse

Verse se ve

Noticias:

Autor Tema: Juego del Buda, objetos e imágenes controlables con teclado. (Leído 3879 veces)

abermejo

Juego del Buda, objetos e imágenes controlables con teclado.

Canvas Dk

Re:Bola controlable con teclado

rmr

Re:Bola controlable con teclado

Agapito

Re:Bola controlable con teclado

abermejo

Re:Bola controlable con teclado

abermejo

Re:Bola controlable con teclado

Canvas Dk

Re:Bola controlable con teclado

rmr

Re:Bola controlable con teclado

Canvas Dk

Re:Juego del Buda, objetos e imágenes controlables con teclado.

rmr

Re:Juego del Buda, objetos e imágenes controlables con teclado.

Canvas Dk

Re:Juego del Buda, objetos e imágenes controlables con teclado.

Agapito

Re:Juego del Buda, objetos e imágenes controlables con teclado.

Canvas Dk

Re:Juego del Buda, objetos e imágenes controlables con teclado.

rmr

Re:Juego del Buda, objetos e imágenes controlables con teclado.

Canvas Dk

Re:Juego del Buda, objetos e imágenes controlables con teclado.

Respuesta rápida