ayuda juego pong¡¡¡¡

mauriciocode · #1 (**permalink**) 13/01/2010, 10:48

Pues tenia este codigo que hace rebotar una imagen en un cuadrado, lo que me gustaria haber si me podeis ayudar es en añadir un rectangulo en la parte inferior del cuadrado que haga de raqueta y en cuanto el rectangulo no hiciese rebotar la imagen, que salte un mensaje de que la aplicacion ha finalizado.

llevo intentando un par de dias y lo unico que consigo es que la pelotita deje de moverse....:

ayuda porfa

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>pelota rebotando</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta name="keywords" content="calendario, javascript" />
    
<style type="text/css">
    *{ margin-left:250px;
         margin-top:50px; }
   
    #fondo{ margin-left:-255px;
                 margin-top:-55px;
                 width: 550px; 
                 height: 385px; 
                 background-image: url(imagenes/fondo.gif); 
                 border: solid brown 5px;}
   
    #img{ position:absolute; }
</style>
 
 
<title>pelota rebotando</title>
 
 
 
<script language="JavaScript">
 
//estas variables son las llamadas switch, cuando esten a acero la posicion de la imagen aumentara 1 pixel, cuando esten a 1, restaran 1 pixel
dirv=0;
dirh=0;
//la imagen se inicia desde el centro del cuadro.
v=175;//posicionamiento vertical de la imagen
h=250;//posicionamiento horizontal de la imagen
 
 
//se declara una variable con imagen, la cual contendra la imagen en movimiento, asi se podra obtener directamente la anchura y altura de la imagen y asi
//el ejercicio funciona igual aun cambiando la imagen por otra de otro tama�o.
imagen = new Image();
imagen.src="imagenes/img.gif";
 
 
 
function movimiento()
{
 
if(v >= parseInt(document.getElementById("fondo").style.height)-imagen.height)//si la posicion de la imagen es superior, al tama�o vertical del cuadro menos el largo de la imagen
dirv=1;//el switch se iguala a 1, para que reste pixeles
 
if(h >= parseInt(document.getElementById("fondo").style.width)-imagen.width)//si la posicion de la imagen es superior, al tama�o horizontal del cuadro menos el ancho de la imagen
dirh=1;//el switch se iguala a 1, para que reste pixeles
 
    
    //movimiento vertical
    if(v<= 0)//solo se cambiara realmente cuando haya llegado abajo, haya rebotado y haya llegado arriva y la variable dirv valiese 1
    dirv=0;//se iguala a 0 para que asi sume pixeles 
 
    if(dirv==0)
    v+=1;//suma 1 pixel (es decir la imagen baja)
 
    if(dirv==1)//resta 1 pixel (es decir la imagen sube)
    v-=1;
 
 
    //movimiento horizontal
    if(h<= 0)//solo se cambiara realmente cuando haya llegado a la derecha haya rebotado y haya llegado a la izquierda y la variable dirh valiese 1
    dirh=0;//se iguala a 0 para que sume pixeles
 
    if(dirh==0)
    h+=1;//suma 1 pixel (es decir la imagen corre a la derecha)
 
    if(dirh==1)
    h-=1;//resta 1 pixel (es decir la imagen corre a la izquierda)
 
// dasigo  la imagen a las variables 'v' y 'h'
document.getElementById("img").style.top=v+"px";
document.getElementById("img").style.left=h+"px"; 
 
 
 
setTimeout("movimiento()", 1);//la funcion se repite cada milisegundo
}
 
</script>
</head>
<body onLoad="movimiento();">
 
<div id="fondo" style="width: 550px; height: 385px;"><!--me obliga a poner el style aqui, si no no funciona, no se por k-->
<img id="img" alt="imagen en movimiento" src="imagenes/img.gif" />
</div>
 
</body>
</html>

GRACIAS¡¡

Panino5001 · #2 (**permalink**) 13/01/2010, 11:16

Esto te dará muchas y buenas ideas: http://billmill.org/static/canvastutorial/