Estoy teniendo problemas con un ejercicio de javascript, el ejercicio consiste en: "Realizar un juego del frontón con una imagen rebotando en el borde izquierdo o superior de la ventana, o en una barra lateral situada a la derecha Y en una barra inferior móvil.
Para realizar este ejercicio puedes partir del 7.2
Esta barra inferior móvil se desplazará de derecha a izquierda y de izquierda a derecha, sin pasar tanto del borde izquierdo de la ventana como de la barra lateral.
El desplazamiento a la izquierda de dicha barra se produce al pulsar la tecla z (código ascii = 122) y a la derecha al pulsar la tecla x (código ascii = 120).
Así cuando la imagen del balón choca con esta barra rebota hacia arriba y cuando la pelota no contacte con la barra y la rebase se visualizará un mensaje indicando que la partida concluyó y parando la ejecución del script.
Esta aplicación se realizará solamente para navegadores modernos utilizando getElementById para situar las diferentes capas:
Si encuentras problemas o dificultades en la realización del ejercicio, no tengas duda en preguntar al tutor o incluso enviarle el código que no funciona como debe, para que lo vea y te ayude en la resolución de esta actividad. No obstante, ten en cuenta que no se trata de un ejercicio de autoevaluación, sino de evaluación por parte del tutor, por lo cual debes intentar resolverlo por tu cuenta
Nota:
1- Como en el ejercicio 7.2, es conveniente que tanto las posiciones x e y del balón, como las posiciones x e y de la barra se sitúen en variables con las que se calculen las posiciones y posteriormente se trasladen a la capa.
2- El contacto entre balón y barra sólo has de analizarlo cuando la pelota baje. Para ello te servirá la variable que has debido definir y que controlaría este tipo de movimiento en la pelota. "
Vamos tipo ping pong solo que contra la pared, pues bien estoy realizandolo poco a poco pero creo que me estoy liando, os pongo el codigo que llevo
Código:
Pues bien creo que estoy realizando mal el movimiento del balón, no se como comprobar cuando baje para hacer que choque contra la barra, la cual no se esta moviendo... no se, creo que estoy dando palos de ciego, a ver si me podríais decir que cambiar o que mejorar....<HTML> <HEAD> <TITLE>Ejercicio 7.2</TITLE> <STYLE TYPE="text/css"> #balon { position:absolute; width: 30; height: 30; } #rectangulo { background-color: blue; position:absolute; top:5; left:5; width: 550; height: 385; } </STYLE> <SCRIPT language=javascript> var y=0; var x=0; var barray=0; var controlY=1; var controlX=1; var velocidad=1; var control = 0; var control2 = 0; var controlbarra = 0; var controlbarra2 =0; window.onload = pulsar; window.onload = mover; function mover(){ //Eje Y if(controlY==1){ y+=velocidad; }else{ y-=velocidad; } if(y<=0){ controlY=1; y=0; } else if(y>=document.getElementById("rectangulo").offsetHeight-30) { controlY=0; y=document.getElementById("rectangulo").offsetHeight-30; } if(controlX==1){ x+=velocidad; } else{ x-=velocidad; } if(x<=0){ controlX=1; x=0; } else if(x>=document.getElementById("rectangulo").offsetWidth-30) { controlX=0; x=document.getElementById("rectangulo").offsetWidth-30; } document.getElementById("balon").style.left=String(x)+"px"; document.getElementById("balon").style.top=String(y)+"px"; } function pulsar(e) { document.onkeypress=pulsar; var mievento=e || window.event; var codigotecla = mievento.charCode || mievento.keyCode; letra=String.fromCharCode(codigotecla); leftbarra = parseFloat(document.getElementById("barra").style.left); if ( leftbarra >= 5 ) { controlbarra=1; } else { controlbarra=2; } if (leftbarra < anchorectangulo - barra) { controlbarra2=1; } else { controlbarra2=2; } if (codigotecla == 122 && controlbarra==1) { barray= barray-14; } else if (codigotecla == 120 && controlbarra2==1 ) { barray= barray+14; } document.getElementById("barra").style.left= barray +"px";; } var intervalo=setInterval("mover()",6); </SCRIPT> </head> <BODY> <DIV id="rectangulo"> <img src="balon.gif" alt="balon" id="balon" style="position:relative; "/> <img src="barra1.gif" alt="barra" id="barra" style="position:absolute; width:80; height:30; top:325px; left:230px;"/> </DIV> </BODY> </HTML>
Muchas gracias de antemano.
Saludos