-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
87 lines (67 loc) · 2.08 KB
/
test.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
<!DOCTYPE HTML>
<html>
<head>
<title>
Bouncing Ball!!
</title>
<style>
h1 {
color: green;
}
canvas {
background-color: #F08080;
width: 600px;
height: 400px;
position: absolute;
top: 20%;
left: 20%;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Bouncing ball using JavaScript</h3>
<canvas>
</canvas>
<script>
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var l = canvas.getContext('2d');
// x and y are the co-ordinates of the circle
// vx and vy are the respective speeds
var x = Math.floor(Math.random() * innerWidth);
var y = Math.floor(Math.random() * innerHeight);
var vx = Math.floor(Math.random() * 2);
var vy = Math.floor(Math.random() * 4);
var radius = 20;
move();
// This function will do the animation
function move() {
requestAnimationFrame(move);
// It clears the specified pixels within
// the given rectangle
l.clearRect(0, 0, innerWidth, innerHeight);
// Creating a circle
l.beginPath();
l.strokeStyle = "black";
l.arc(x, y, radius, 0, Math.PI * 2, false);
l.stroke();
// Conditions sso that the ball bounces
// from the edges
if (radius + x > innerWidth)
vx = 0 - vx;
if (x - radius < 0)
vx = 0 - vx;
if (y + radius > innerHeight)
vy = 0 - vy;
if (y - radius < 0)
vy = 0 - vy;
x = x + vx;
y = y + vy;
}
</script>
</center>
</body>
</html>