JavaScript - Ejercicio fronton javascript

   
Vista:

Ejercicio fronton javascript

Publicado por Jesus Izquierdo (1 intervención) el 30/11/2015 20:53:33
Buenas Gente,

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<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>
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....

Muchas gracias de antemano.

Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder