Código de JavaScript - Pelota rebotando

Imágen de perfil

Pelota rebotandográfica de visualizaciones


JavaScript

Publicado el 19 de Mayo del 2014 por Xavi
3.377 visualizaciones desde el 19 de Mayo del 2014. Una media de 28 por semana
Código que muestra una pelota rebotando por la pantalla.
Gracias a la aportación de Jecht en los foros.

Versión 1

Publicado el 19 de Mayo del 2014gráfica de visualizaciones de la versión: Versión 1
3.378 visualizaciones desde el 19 de Mayo del 2014. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
118
119
120
121
122
123
<!DOCTYPE HTML>
<html lang="es">
<head>
    <meta charset="utf-8"/>
    <title>Pelota rebotando</title>
    <style>
        #imagen {
            border:1px solid #808080;
            background-color:#808080;
            border-radius:15px;
            position:relative;
            display:block;
            height:20px;
            width:20px;
        }
 
        #lienzo {
            width:300px;
            height:200px;
            border:1px solid #000;
            overflow: hidden;
        }
    </style>
 
    <script type="text/javascript">
        // controlY, determina dirección vertical: 1-baja|0-sube
        var controlY=Math.floor((Math.random() * 1) + 0);
 
        // controlX, determina dirección vertical: 1-derecha|0-izquierda
        var controlX=Math.floor((Math.random() * 1) + 0);
 
        // definimos las variables que contienen la posicion de la pelota
        var x=y=0;
 
        // definimos la velocidad de movimiento en pixels
        var velocidad=1;
 
        // variable que contiene 
        var idSetInterval=0;
 
        // funcion que se ejecuta al pulsar el botón iniciar
        function iniciar()
        {
            if(idSetInterval==0)
            {
                idSetInterval=setInterval("mover()",10);
            }
        }
 
        // funcion que se ejecuta por cada iteracion del setInterval()
        function mover()
        {
            // vertical
            if(controlY==1)
            {
                y+=velocidad;
            }else{
                y-=velocidad;
            }
            if(y<0)
            {
                controlY=1;
                y=velocidad;
            }else if(y>=document.getElementById("lienzo").offsetHeight-22){
                controlY=0;
                y=document.getElementById("lienzo").offsetHeight-22;
            }
 
            // horizontal
            if(controlX==1)
            {
                x+=velocidad;
            }else{
                x-=velocidad;
            }
 
            if(x<0)
            {
                controlX=1;
                x=velocidad;
            }else if(x>=document.getElementById("lienzo").offsetWidth-22){
                controlX=0;
                x=document.getElementById("lienzo").offsetWidth-22;
            }
            document.getElementById("imagen").style.left=String(x)+"px";
            document.getElementById("imagen").style.top=String(y)+"px";
        }
 
        // funcion que se ejecuta para parar
        function parar()
        {
            clearInterval(idSetInterval);
            idSetInterval=0;
        }
 
        // funcion que se ejecta al iniciar
        window.onload=function()
        {
            // posicionamos la pelota de manera aleatoria en la pantalla
            y=Math.floor((Math.random() * (document.getElementById("lienzo").offsetHeight-22)) + 1);
            x=Math.floor((Math.random() * (document.getElementById("lienzo").offsetWidth-22)) + 1);
 
            document.getElementById("imagen").style.left=String(x)+"px";
            document.getElementById("imagen").style.top=String(y)+"px";
        }
    </script>
</head>
 
<body>
    <h1>Pelota rebotando</h1>
    <div>
        <div>
            <input type="button" value="Iniciar" id="iniciar" onclick="iniciar();"/>
            <input type="button" value="Parar" id="parar" onclick="parar();"/>
        </div>
        <div id="lienzo">
            <div id="imagen"></div>
        </div>
    </div>
 
    <p><a href="http://www.lawebdelprogramador.com" target="_blank">http://www.lawebdelprogramador.com</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2673