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

abermejo

  • Newbie
  • *
  • Mensajes: 6
  • Karma: +0/-0
    • Ver Perfil
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 =).

PUBLICIDAD



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>

« última modificación: Enero 29, 2011, 11:42:52 pm por rmr »

Canvas Dk

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Bola controlable con teclado
« Respuesta #1 en: Enero 24, 2011, 10:19:15 am »
Buenas abermejo,

PUBLICIDAD



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!

R Martin Seo

  • Administrator
  • Hero Member
  • *****
  • Mensajes: 623
  • Karma: +0/-0
    • Ver Perfil
Re:Bola controlable con teclado
« Respuesta #2 en: Enero 24, 2011, 03:41:06 pm »
Buen trabajo abermejo.

PUBLICIDAD



¿ 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

  • Newbie
  • *
  • Mensajes: 16
  • Karma: +0/-0
    • Ver Perfil
Re:Bola controlable con teclado
« 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

  • Newbie
  • *
  • Mensajes: 6
  • Karma: +0/-0
    • Ver Perfil
Re:Bola controlable con teclado
« Respuesta #4 en: Enero 24, 2011, 03:59:06 pm »
Que tal rmr.

PUBLICIDAD


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

  • Newbie
  • *
  • Mensajes: 6
  • Karma: +0/-0
    • Ver Perfil
Re:Bola controlable con teclado
« 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.

PUBLICIDAD


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

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Bola controlable con teclado
« 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

PUBLICIDAD



Espero con impaciencia a ver que nuevas nos traes ;)

Un saludo!

R Martin Seo

  • Administrator
  • Hero Member
  • *****
  • Mensajes: 623
  • Karma: +0/-0
    • Ver Perfil
Re:Bola controlable con teclado
« Respuesta #7 en: Enero 27, 2011, 08:43:47 pm »
Hola:

PUBLICIDAD



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. :)
« última modificación: Enero 27, 2011, 08:51:17 pm por rmr »

Canvas Dk

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« Respuesta #8 en: Enero 28, 2011, 11:52:56 am »
La puntuación no rula :S

R Martin Seo

  • Administrator
  • Hero Member
  • *****
  • Mensajes: 623
  • Karma: +0/-0
    • Ver Perfil
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« 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

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« Respuesta #10 en: Enero 28, 2011, 10:17:53 pm »
 :-[

PUBLICIDAD



Ya le pongo yo los proyectiles :) y la historia jajaj

Agapito

  • Newbie
  • *
  • Mensajes: 16
  • Karma: +0/-0
    • Ver Perfil
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« 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

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« Respuesta #12 en: Enero 29, 2011, 06:25:56 pm »
Agapito cuando quieras :)

PUBLICIDAD



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 :)

R Martin Seo

  • Administrator
  • Hero Member
  • *****
  • Mensajes: 623
  • Karma: +0/-0
    • Ver Perfil
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« 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

PUBLICIDAD



Canvas Dk

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Juego del Buda, objetos e imágenes controlables con teclado.
« Respuesta #14 en: Enero 29, 2011, 08:52:14 pm »
Me refería para guardarse :)

PUBLICIDAD



Verse se ve :)