html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Bouncy Ball</title>
</head>
<body>
<p align = "center"> Bouncing ball
<svg width="2000" height="2000">
<circle cx="175" cy="100" r="25" fill="red" />
<circle cx ="175" cy ="450" r ="25" fill = "blue" />
</svg>
</p>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
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
var x1 = 100;
var x2 = 300;
var y1 = 200;
var y2 = 200;
var g = 9.81;
var dt = 0.02;
var v1y = 0;
var v2y = 0;
var v1x = 20;
var v2x = 40;
var r1 = 25;
var r2 = 25;
var v1yp = 0;
var v1xp = 0;
var v2xp = 0;
var v2yp = 0;
var r = r1 + r2
function bounce() {
var b1 = document.getElementsByTagName("circle")[0];
var b2 = document.getElementsByTagName("circle")[1];
v1y += g * dt;
y1 += v1y * dt;
x1 += v1x * dt;
b1.style.cx = x1;
b1.style.cy = y1;
if (y1 > 475 - r1) {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run