JavaScript - Pelota rebota

   
Vista:

Pelota rebota

Publicado por jecht (9 intervenciones) el 12/05/2014 13:40:35
Buenas tardes, tengo una gran duda con un ejercicio de mi facultad, he estado buscando algun tema relacionado sin exito y he decidido buscar auxilio. El problema consiste en hacer que una pelota rebote por un cuadrado insertando el user las velocidades en coordenadas x e y. He conseguido que la pelota se mueva pero no tengo manera que hacer que esta rebote y no se ver donde está el error. Agradecería consejo, adjunto mi codigo. Muchisimas gracias por adelantado.

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
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mover bola en el eje Z con dentro de una caja JS</title>
<style type="text/css">
 
#imagen{
position:relative;
display:block;
width:20px;
}
 
#lienzo{
width:300px;
height:300px;
border:1px solid #000;
overflow: hidden;
}
 
</style>
<script type="text/javascript">
 
var y=0;
var x=0;
var controlY=0;
var controlX=0;
 
function funcionar(){
this.velocidadx=document.getElementById("velx").value;
this.velocidady=document.getElementById("vely").value;
}
var intervalo=setInterval("mover()",1);
 
function mover(){
 
if(controlY==1){
y+=velocidady;
}else{
y-=velocidady;
}
if(y<=0){
controlY=1;
y=velocidady;
 
}else if(y>=document.getElementById("lienzo").offsetHeight-20){
controlY=0;
y=document.getElementById("lienzo").offsetHeight-20;
}
 
if(controlX==1){
x+=velocidadx;
}else{
x-=velocidadx;
}
if(x<=0){
controlX=1;
x=velocidadx;
}else if(x>=document.getElementById("lienzo").offsetWidth-20){
controlX=0;
x=document.getElementById("lienzo").offsetWidth-20;
}
document.getElementById("imagen").style.left=String(x)+"px";
document.getElementById("imagen").style.top=String(y)+"px";
}
 
function aturar(){
clearInterval(intervalo);
}
 
</script>
</head>
<body>
<h2></h2>
<div id="exercici">
<div id="parametros">
<h3>Velocitat de l'objecte</h3>
<p>x: <input type="text" value="" id="velx"/> px/s</p>
<p>y: <input type="text" value="" id="vely"/> px/s</p>
<input type="button" value="Iniciar" id="iniciar" onclick="funcionar();"/>
<input type="button" value="Parar" id="parar" onclick="aturar();"/>
<input type="button" value="Aplicar" id="aplicar" onclick="aplicar();"/>
</div>
<div id="lienzo">
<img src="eclipse.png" id="imagen" alt="eclipse"/>
</div>
</div>
</body>
</html>
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
Imágen de perfil de xve

Pelota rebota

Publicado por xve (1595 intervenciones) el 12/05/2014 15:48:58
Hola jecht, aquí lo tienes solucionado...
Te he modificado unas pocas cosas, pero no varia en casi nada tu código:

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
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mover bola en el eje Z con dentro de una caja JS</title>
<style>
    #imagen{
        position:relative;
        display:block;
        width:20px;
    }
 
    #lienzo{
        width:300px;
        height:300px;
        border:1px solid #000;
        overflow: hidden;
    }
</style>
 
<script type="text/javascript">
    var y=0;
    var x=0;
    var controlY=1;
    var controlX=1;
 
    var velocidadx=0;
    var velocidady=0;
    var intervalo=0;
 
    function funcionar(){
        velocidadx=parseInt(document.getElementById("velx").value);
        velocidady=parseInt(document.getElementById("vely").value);
        intervalo=setInterval("mover()",10);
    }
 
    function mover(){
        if(velocidadx==0 || velocidady==0)
        {
            aturar();
            return;
        }
 
        // vertical
        if(controlY==1)
        {
            y+=velocidady;
        }else{
            y-=velocidady;
        }
        if(y<0)
        {
            controlY=1;
            y=velocidady;
        }else if(y>=document.getElementById("lienzo").offsetHeight-20){
            controlY=0;
            y=document.getElementById("lienzo").offsetHeight-20;
        }
 
        // horizontal
        if(controlX==1)
        {
            x+=velocidadx;
        }else{
            x-=velocidadx;
        }
 
        if(x<0)
        {
            controlX=1;
            x=velocidadx;
        }else if(x>=document.getElementById("lienzo").offsetWidth-20){
            controlX=0;
            x=document.getElementById("lienzo").offsetWidth-20;
        }
        console.log("Velocidad:"+velocidadx+"-"+velocidady);
        console.log(x+"-"+y);
        document.getElementById("imagen").style.left=String(x)+"px";
        document.getElementById("imagen").style.top=String(y)+"px";
    }
 
    function aturar()
    {
        clearInterval(intervalo);
        x=y=0;
        controlX=controlY=1;
    }
</script>
</head>
 
<body>
<h2></h2>
<div id="exercici">
    <div id="parametros">
        <h3>Velocitat de l'objecte</h3>
        <p>x: <input type="text" value="" id="velx"/> px/s</p>
        <p>y: <input type="text" value="" id="vely"/> px/s</p>
        <input type="button" value="Iniciar" id="iniciar" onclick="funcionar();"/>
        <input type="button" value="Parar" id="parar" onclick="aturar();"/>
    </div>
    <div id="lienzo">
        <img src="eclipse.png" id="imagen" alt="eclipse"/>
    </div>
</div>
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Pelota rebota

Publicado por Jecht (9 intervenciones) el 12/05/2014 23:07:59
Muchisimas gracias por la solucion, pretendía buscar donde estaba el fallo mas que la solucion en sí (para estrujarse un pokito mas los sesos), pero muchisimas gracias, tengo mas dudas pero prefiero antes buscarles solucion.

Muchas gracias de nuevo :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar