-
Notifications
You must be signed in to change notification settings - Fork 1
/
bounce.html
88 lines (80 loc) · 3.09 KB
/
bounce.html
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
<html>
<head>
<style>
.float {
position: absolute;
color: white;
font-size: 100%;
}
</style>
<script>
let body;
let bouncer = [];
let offset = 20;
let width = window.innerWidth - offset;
let height = window.innerHeight - offset;
let gravity = 0.2;
let gravity_angle = 0;
let bounce_factor = 1;
let vertical_start_velocity = 2.5;
let horizontal_start_velocity = 5;
let run = true;
window.onload = function () {
body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = randomcolor();
for (var i = 0; i < 100; i++) {
bouncer.push(document.createElement("div"));
bouncer[i].classList.add("float");
bouncer[i].style.left = (Math.random() * width).toString() + "px";
bouncer[i].style.top = (Math.random() * height).toString() + "px";
bouncer[i].setAttribute("xmove", Math.random() * horizontal_start_velocity * 2 - 5);
bouncer[i].setAttribute("ymove", Math.random() * vertical_start_velocity * 2 - 5);
body.appendChild(bouncer[i]);
if (Math.random() > 0.5) {
bouncer[i].innerText = "{}"
}
}
};
setInterval(function () {
if (run) {
width = window.innerWidth - offset;
height = window.innerHeight - offset;
for (var i = 0; i < bouncer.length; i++) {
let ypos = parseFloat(bouncer[i].style.top);
let xpos = parseFloat(bouncer[i].style.left);
let xmove = parseFloat(bouncer[i].getAttribute("xmove"));
let ymove = parseFloat(bouncer[i].getAttribute("ymove"));
//phys-x
ymove += gravity;
xpos = xpos + xmove;
ypos = ypos + ymove;
if (xpos < 0) {
xmove = -xmove * bounce_factor;
xpos = 0;
} else if (xpos > width) {
xmove = -xmove * bounce_factor;
xpos = width;
}
if (ypos < 0) {
ymove = -ymove * bounce_factor;
ypos = 0;
} else if (ypos > height) {
ymove = -ymove * bounce_factor;
ypos = height;
}
//phys-y
bouncer[i].setAttribute("ymove", ymove);
bouncer[i].setAttribute("xmove", xmove);
bouncer[i].style.left = xpos.toString() + "px";
bouncer[i].style.top = ypos.toString() + "px";
}
}
}, 16);
function randomcolor() {
return "rgb(" + Math.random() * 125 + "," + Math.random() * 125 + "," + Math.random() * 125 + ")";
}
</script>
</head>
<body>
</body>
</html>