Repository navigation
Expand file tree
/
Copy pathmain.js
More file actions
97 lines (76 loc) · 2 KB
/
Copy pathmain.js
File metadata and controls
97 lines (76 loc) · 2 KB
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
89
90
91
92
93
94
95
96
97
// setup canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// function to generate random number
function random(min, max) {
const num = Math.floor(Math.random() * (max - min + 1)) + min
return num
}
function Ball(x, y, velx, vely, size, color) {
this.x = x
this.y = y
this.velx = velx
this.vely = vely
this.color = color
this.size = size
}
Ball.prototype.draw = function() {
ctx.beginPath()
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI)
ctx.fill()
}
Ball.prototype.update = function() {
if ((this.x + this.size) >= width) {
this.velx = -(this.velx);
}
if ((this.x - this.size) <= 0) {
this.velx = -(this.velx);
}
if ((this.y + this.size) >= height) {
this.vely = -(this.vely);
}
if ((this.y - this.size) <= 0) {
this.vely = -(this.vely);
}
this.x += this.velx;
this.y += this.vely;
}
Ball.prototype.collisionDetect = function() {
for (let j = 0; j < balls.length; j++) {
if (!(this === balls[j])) {
const dx = this.x - balls[j].x;
const dy = this.y - balls[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.size + balls[j].size) {
balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'
}
}
}
}
let balls = []
while (balls.length < 25) {
let size = random(10, 20)
let ball = new Ball(
random(0 + size, width - size),
random(0 + size,height - size),
random(-7,7),
random(-7,7),
size,
'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')'
)
balls.push(ball);
}
function loop() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].update();
balls[i].collisionDetect();
}
requestAnimationFrame(loop);
}
loop()