html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button id = "start">Drop the balls</button>
<svg width="350" height="500">
<circle id="cue" fill="blue" cx=100 cy=100 r=20>
</circle>
<circle id="nr1" fill="red" cx=200 cy=100 r=20>
</circle>
<circle id="nr2" fill="green" cx=150 cy=100 r=20></circle>
<rect width=250 height=10 x=50 y=300>
</rect>
<rect width=270 height=10 x=40 y=40>
</rect>
<rect width=10 height=260 x=40 y=50>
</rect>
<rect width=10 height=260 x=300 y=50>
</rect>
</svg>
<script>
</script>
</body>
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
window.onload = function() {
var drop = document.getElementById('start');
drop.onclick = function () {
function ball(color,r,x,y,vx,vy) {
this.color = color;
this.r = r;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.move = function(dt) {
this.vy = this.vy + 9.8*dt
this.x = this.x + this.vx*dt;
this.y = this.y + this.vy*dt;
this.check_wall = function() {
if (this.y<=50+this.r) {
this.y = 50+this.r;
this.vy = -this.vy;
}
if (this.y>=300-this.r) {
navigator.vibrate(100);
this.y = 300-this.r;
this.vy = -this.vy;
}
if (this.x<=50+this.r) {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run