PI-2017/bouncing.html at master · cisterni/PI-2017 · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>Prova di animazione</title>
        <script type="text/javascript">
        function createTrail (b) {
            var ret = document.createElement('div')
            var props = [ "position", "background", "width", "height", "left", "top" ]
            for (var i = 0; i < props.length; i++)
              ret.style[props[i]] = b.style[props[i]]
            ret.style.opacity = 0.5
            // In alternativa
            // for (v in b.style)
            //   ret.style[v] = b.style[v]
            return ret;
        }

        function Box(sb) {
            var b = document.createElement('div')
            var sz = 25
            sb.appendChild(b)
            b.style.width = sz + 'px'
            b.style.height = sz + 'px'
            b.style.background = 'red'
            b.style.position = 'absolute'
            this.X = 0
            this.Y = 0
            this.dx = 2
            this.dy = 3
            this.Element = b
            var trail = new Array(10)
            var counter = 0
            var nexttrail = 0

            for (var i = 0; i < trail.length; i++) {
                trail[i] = createTrail(b)
            }

            this.UpdateBox = function () {
                if (counter++ % 5 == 0) {
                  var t = trail[nexttrail]
                  if (!t.parentNode)
                    b.parentNode.appendChild(t)
                  t.style.left = b.style.left
                  t.style.top = b.style.top
                  nexttrail = (nexttrail + 1) % trail.length
                }
                b.style.left = this.X + 'px'
                b.style.top = this.Y + 'px'
                if (this.X + sz > sb.offsetWidth || this.X < 0) this.dx *= -1
                if (this.Y + sz > sb.offsetHeight || this.Y < 0) this.dy *= -1
                this.X += this.dx
                this.Y += this.dy
            }
        }

        var snakes = new Array()

        window.addEventListener('load', function () {
            var sb =document.getElementById('snakebox')
            var t = null
            sb.addEventListener('click', function (e) {
                var box = new Box(sb)
                box.X = e.offsetX
                box.Y = e.offsetY
                snakes.push(box)
                if (!t) {
                    t = setInterval(function () {
                        for (var i = 0; i < snakes.length; i++)
                          snakes[i].UpdateBox()
                    }, 20)
                }
            })
        })
        </script>
    </head>
    <body>
        <h1>Esempio di animazione</h1>
        Il quadrato si anima se clicchi.
        <div id="snakebox" style="background: yellow; width:50%; height: 50%; position: absolute">
        </div>
    </body>
</html>