Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » No Consigo hacer el efecto de pelota rebotando en una caja

JavaScript - No Consigo hacer el efecto de pelota rebotando en una caja

Volver
Nuevo Tema
<<>>
 
Vista:

No Consigo hacer el efecto de pelota rebotando en una caja

Publicado por victor (3 intervenciones) el 28/11/2017 23:17:39
Me falta que rebote por las paredes pero no consigo acertar con la lógica necesaria



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
<!DOCTYPE html>
<html>
    <style>
        #container {

            width: 400px;
            height: 400px;
            position: relative;
            background: yellow;
        }
        #animate {

            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
 
        }
    </style>
    <body>
 
        <p>
            <button onclick="myMove()">Click Me</button>
        </p>
 
        <div id ="container">
            <div id ="animate"></div>
        </div>
 
        <script>
            function myMove() {
                var elem = document.getElementById("animate");
        // var pos = 0;

                var id = setInterval(frame, 5);
                var sigue = true;
                var sigueY = false;
                var sigueX = false;
                var x = 0;
                var y = 0;
 
                function frame() {
 
        //clearInterval(id);

 
 
                    if (sigue) {
                        y++;
                        x++;
                        elem.style.top = y + 'px';
                        elem.style.left = x + 'px';
                    } else {
                        y --;
                        x--;
                        elem.style.top = y + 'px';
                        elem.style.left = x + 'px';
 
                    }
 
                }
            }
        </script>
 
    </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 abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

No Consigo hacer el efecto de pelota rebotando en una caja

Publicado por abzerox (130 intervenciones) el 30/11/2017 05:41:25
Hola, lo que pudes hacer es comparar la altura del elemento contenedor con el position top del elemento animado, eso en principio . Modifique tu código para detectar la primera colision :

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
<script>
    function myMove() {
        var container = document.getElementById('container');
        var elem = document.getElementById("animate");
        var containerHeight = container.clientHeight;
        var containerRect = container.getBoundingClientRect();
        var id = setInterval(frame, 5);
        var sigue = true;
        var sigueY = false;
        var sigueX = false;
        var x = 0;
        var y = 0;
        elem.style.top = 0;
        elem.style.left = 0;
        function frame() {
            if (containerHeight == elem.getBoundingClientRect().top) {
              clearInterval(id);
              // Cambiar de dirección ...

 
            } else if (elem.getBoundingClientRect().top >= 0) {
              y++;
              x++;
              elem.style.top = y + 'px';
              elem.style.left = x + 'px';
            }
        }
    }
</script>

Te dejo tambien la referencia a el método que he utilizado getBoundingClientRect, para que lo estudies y puedas apoyarte en el para detectar las demas colisiones:
https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de kip
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

No Consigo hacer el efecto de pelota rebotando en una caja

Publicado por kip (107 intervenciones) el 30/11/2017 15:22:52
Usando el metodo que recomienda Abzerox, podrias hacer algo asi:

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
function myMove() {
    var parent = document.getElementById("container");
    var elem = document.getElementById("animate");
    var id = setInterval(frame, 5);
    var sigue = true;
    var sigueY = false;
    var sigueX = false;
    var x = 0;
    var y = 0;
 
    function frame() {
        if (parent.getBoundingClientRect().right === elem.getBoundingClientRect().right) {
            sigue = false;
        }
        if (parent.getBoundingClientRect().left === elem.getBoundingClientRect().left) {
            sigue = true;
        }
        if (sigue) {
            y++;
            x++;
            elem.style.top = y + 'px';
            elem.style.left = x + 'px';
        } else {
            y--;
            x--;
            elem.style.top = y + 'px';
            elem.style.left = x + 'px';
 
        }
 
    }
}

https://jsfiddle.net/sdnq7q38/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar