Pelota JavaScript

joselichu007 #1 Ene '10

Buenas, haber si me podéis echar una mano con este programa que me tiene frito....
Tengo que hacer que una pelota rebote en un cuadrado, tengo este código y creo que va bien encaminado llevo ya bastante tiempo en ello, pero me da un fallo y no consigo sacarlo.
Os pongo el código y haber si me podéis echar una mano

spoiler

Me da este error

spoiler

Gracias!!

Shendraf #2 Ene '10

¿No funciona ni en IExplorer ni en Firefox?

PD: Especifica la unidad que añades al top, por ejemplo, 5px

style.top = 5 + "px"

joselichu007 #3 Ene '10

No, no me funciona me da el error ese que he puesto. Ahora pruebo lo q me has puesto y te digo. Gracias!

joselichu007 #4 Ene '10

Nada tio, lo he probado y nada, ni se mueve la pelota y sigue dando el error ese...ya no se de que puede ser..

r2d2rigo #5 Ene '10 Inocente

Fijate bien en la descripcion del error: Advertencia: Error al interpretar el valor para 'top'. Declaración rechazada.

'top' espera un numero y por esotericas razones JS te esta interpretando 'x' como una cadena de caracteres. Prueba a forzar una conversion.

Shendraf #6 Ene '10

Yo te diría que tu código no va a conseguir lo que tú quieres. ¿Porqué? Para empezar, si haces llamadas "recursivas" procura no inicializar de nuevo las coordenadas de la imagen ('x' e 'y'). Lo suyo es pasárselas por parámetro, algo como mover(x,y). Además, ¿para que quieres el div si en realidad no usas su tamaño para que rebote dentro de él? Por último, ten en cuenta que el top, left y demás llevan el sufijo 'px' o 'cm', por tanto, javascript tratará las dimensiones y coordenadas como cadena de texto. Si es necesario, pasa las coordenadas por parámetros. Intenta rehacer el código de nuevo

joselichu007 #7 Ene '10

Ahora me pongo a ello, y ya os cuento que me ha salido jejej, venga muchas gracias

joselichu007 #8 Ene '10

Me he quedado asi:

Ya no se porque no sale me toy volviendo loco!!! xD , es la 3ª vez que lo hago ya....

biluses #9 Ene '10

a mi no me sale nada...un cuadrado azul que pone balon arriba a la izkierda..:S

Shendraf #10 Ene '10

No tengo mucho tiempo para ponerme a fondo con tu código pero prueba con esto a ver qué tal y lo mejoras:

spoiler

var x = 0;
var n= 0;
var control = 0;
var control2= 0;
function mover ()
{

altorectangulo = parseInt(document.getElementById("rectangulo").style.height);
anchorectangulo = parseInt(document.getElementById("rectangulo").style.width);

if (control) {
x = x + 1;
}
else {
x = x - 1;
}
if (x < 0) {
control = 1;
x = 0;
}
if (x >= altorectangulo) {
control = 0;
x = altorectangulo;
}
if (control2) {
n = n + 1;
}
else {
n = n - 1;
}
if (n < 0) {
control2 = 1;
n = 0;
}
if (n >= anchorectangulo) {
control2 = 0;
n = anchorectangulo;
}

document.getElementById("balon").style.top = x + 'px';
document.getElementById("balon").style.left = n + 'px';

setInterval(mover,600);
}

joselichu007 #11 Ene '10

Al final lo acabe ayer, a las tantas eso si, pero lo acabe jejej
Os dejo el código por aqui

spoiler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<title>Ejercicio balon rebotando</title>
<meta name="autor" content="Jose Benito" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Pelota rebotando en un cuadrado"/>
<meta name="keywords" content="Pelota, rebote"/>

var x = 0; /* Movimiento horizontal /
var n= 0; / Movimiento vertical /
var control = 0; / Controla el alto y bajo/
var control2 = 0; / Controla los lados /
var balon = 60; / Tamaño de la imagen/
window.onload = mover; / Cargar la aplicacion al iniciar la pagina */

function mover() /* Funcion que realiza el movimiento y controla que no salga de los bordes/
{
/ Cambia los estilos a flotante y los introduce en una variable*/
altorectangulo = parseFloat(document.getElementById("rectangulo").style.height);
anchorectangulo = parseFloat(document.getElementById("rectangulo").style.width);
top = parseFloat(document.getElementById("balon").style.top);
left = parseFloat(document.getElementById("balon").style.left);

/* Esta parte controla que no se salga del cuadrado */
if (top <=0) {control=1;}
if (left <=0) {control2=1;}
if ( top > altorectangulo - balon ) {control=2;}
if (left > anchorectangulo - balon) {control2=2;}

/* Esta parte realiza los movimiento del balon */
if (control==1) {x++;}
else {x--;}
if (control2==1) {n++;}
else {n--;}

/* Esta parte pasa los valores de x y n a la imagen en cuestion */
document.getElementById("balon").style.top = x + "px";
document.getElementById("balon").style.left = n + "px";
}

setInterval("mover()",10); /* Intervalo del tiempo */
</script>
</head>

Ahora me toca hacer el mismo pero con una barra abajo que mueva por teclado y haga revotar la pelota o no si no le doy, vamos como el juego de romper los ladrillos xD xD
Ya os contare si me sale jejee. Gracias x todo!!

joselichu007 #12 Ene '10

Buenas, ya me he puesto con el del pin pong y lo tengo casi terminado, he conseguido que la barra de abajo se me deslice (con las teclas z y x) y ponerle los topes en los laterales, y que la pelota rebote ya ta perfecto tambien, pero me falta la condicion para que rebote solo cuando de en la barra, os pongo lo que tengo:

spoiler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<title> Juego Pelota </title>
<meta name="autor" content="Jose Benito" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<script type="text/javascript">

var x = 0; /* Movimiento horizontal /
var y=230; / Movimiento barra /
var n= 0; / Movimiento vertical /
var control = 0; / Controla el alto y bajo /
var control2 = 0; / Controla los lados /
var controlbarra = 0; / Controla la barra /
var controlbarra2 =0; / Controla la barra /
var balon = 60; / Tama?o de la imagen /
var barra = 100; / Ancho de la barra /
var altobarra = 50 ; / Alto de la barra */

window.onload = mover; /* Cargar la aplicacion al iniciar la pagina /
window.onload = pulsar; / Cargar la aplicacion al iniciar la pagina */

/* Esta parte realiza los movimiento del balon */
if (control==1) {x++;}
else {x--;}
if (control2==1) {n++;}
else {n--;}

/* Esta parte pasa los valores de x y n a la imagen en cuestion /
document.getElementById("balon").style.top = x + "px";
document.getElementById("balon").style.left = n + "px";
if ( top + balon == altorectangulo - altobarra) {control=2;}
if (control2==1) {n++;}
else {n--;}
}
setInterval("mover()",10); / Intervalo del tiempo */

</script>
</head>
<body style="margin-left:4px;">

<div id="rectangulo" style="height:385px; width:550px; margin-left:0px; background-color:blue;">

<img src="balon.gif" alt="balon" id="balon" style="position:relative; "/>
<img src="barra.gif" alt="barra" id="barra" style="position:absolute; top:343px; left:230px;"/>
</div>
</body>
</html>

La condicion la estoy intentando meter en :

spoiler

he probado metiendole un
if ( top + balon == altorectangulo - altobarra && balon[n] == barra[y])
pero lo unico que he conseguido es que me rebote a la altura de la barra en toda la pantalla.
Me dais alguna pistilla o algo?? que es mi proyecto final de javascript
Venga muchas gracias!!

Shendraf #13 Ene '10

Aprovechando un momento de poco curro he echado un vistazo a tu código intentando cambiar lo menos posible. Mira si te gusta cómo queda:

spoiler

<script type="text/javascript">

//variables

window.onload = mover; /* Cargar la aplicacion al iniciar la pagina */
document.onkeypress=pulsar; 

function pulsar(e)
{
var mievento=e || window.event;
var codigotecla = mievento.charCode || mievento.keyCode;
var letra=String.fromCharCode(codigotecla)
y = parseFloat(document.getElementById("barra").style.left);
var anchorectangulo = parseFloat(document.getElementById("rectangulo").style.width);

if ( y >= altobarra ) {
controlbarra=1;
} else {
controlbarra=2;
}
if (y < anchorectangulo - barra) {
controlbarra2=1;
} else {
controlbarra2=2;
}
if (codigotecla == 122 && controlbarra==1) {
y= y-14;
} else if (codigotecla == 120 && controlbarra2==1 ) {
y= y+14;
}
document.getElementById("barra").style.left= y +"px";
}

function mover() /* Funcion que realiza el movimiento y controla que no salga de los bordes*/
{
/* Cambia los estilos a flotante y los introduce en una variable*/
var altorectangulo = parseFloat(document.getElementById("rectangulo").style.height);
var anchorectangulo = parseFloat(document.getElementById("rectangulo").style.width);
var top = parseFloat(document.getElementById("balon").style.top);
var left = parseFloat(document.getElementById("balon").style.left);
var topbarra = parseFloat(document.getElementById("barra").style.top);
var leftbarra = parseFloat(document.getElementById("barra").style.left);
/* Esta parte controla que no se salga del cuadrado */
if (top <=0) {control=1;}
if (left <=0) {control2=1;}
if (top > altorectangulo - balon) {control=2;}
if (left > anchorectangulo - balon) {control2=2;}

if ( top + balon == topbarra) {
	if (left > leftbarra && left < leftbarra + barra) {
		control=2;
	}
}

/* Esta parte realiza los movimiento del balon */
if (control==1) {x++;}
else {x--;}
if (control2==1) {n++;}
else {n--;}
	

/* Esta parte pasa los valores de x y n a la imagen en cuestion */
document.getElementById("balon").style.top = x + "px";
document.getElementById("balon").style.left = n + "px";

}
setInterval("mover()",10); /* Intervalo del tiempo */

</script>

joselichu007 #14 Ene '10

Gracias tio, era esa parte de los dos if la que no conseguia sacar.... apaño 1 poco el programa y te digo

joselichu007 #15 Ene '10

Pues ya esta terminado, la dejo pa que la veas

spoiler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<title> Juego Pelota </title>
<meta name="autor" content="Jose Benito" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<script type="text/javascript">

var x = 0; /* Movimiento horizontal /
var y=230; / Movimiento barra /
var n= 0; / Movimiento vertical /
var control = 0; / Controla el alto y bajo /
var control2 = 0; / Controla los lados /
var controlbarra = 0; / Controla la barra /
var controlbarra2 =0; / Controla la barra /
var balon = 60; / Tama?o de la imagen /
var barra = 100; / Ancho de la barra /
var altobarra = 50 ; / Alto de la barra */

window.onload = mover; /* Cargar la aplicacion al iniciar la pagina /
window.onload = pulsar; / Cargar la aplicacion al iniciar la pagina */

function inicio()
{
n=0;
x=0;
}

}

/* Esta parte realiza los movimiento del balon */
if (control==1) {x++;}
else {x--;}
if (control2==1) {n++;}
else {n--;}

/* Esta parte pasa los valores de x y n a la imagen en cuestion /
document.getElementById("balon").style.top = x + "px";
document.getElementById("balon").style.left = n + "px";
}
setInterval("mover()",10); / Intervalo del tiempo */
</script>
</head>
<body style="margin-left:4px; ">

<div id="rectangulo" style="height:385px; width:550px; margin-left:0px; background-color:blue;">

<img src="balon.gif" alt="balon" id="balon" style="position:relative; "/>
<img src="barra.gif" alt="barra" id="barra" style="position:absolute; top:343px; left:230px;"/>
</div>
</body>
</html>

machanguito #16 Ene '10

Joselichu0007

he copiado y pegado tu programa en javascript y no me va en IE, me podrías echar una mano ?.

Gracias,

Pelota JavaScript

Usuarios habituales

Tags