-
Notifications
You must be signed in to change notification settings - Fork 0
/
Ball.js
71 lines (59 loc) · 1.57 KB
/
Ball.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
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
const INITIAL_VELOCITY = 0.025
const VELOCITY_INCREASE = 0.00001
export default class Ball {
constructor(ballElem) {
this.ballElem = ballElem
this.reset()
}
get x() {
return parseFloat(getComputedStyle(this.ballElem).getPropertyValue("--x"))
}
set x(value) {
this.ballElem.style.setProperty("--x", value)
}
get y() {
return parseFloat(getComputedStyle(this.ballElem).getPropertyValue("--y"))
}
set y(value) {
this.ballElem.style.setProperty("--y", value)
}
rect() {
return this.ballElem.getBoundingClientRect()
}
reset() {
this.x = 50
this.y = 50
this.direction = { x: 0 }
while (
Math.abs(this.direction.x) <= 0.2 ||
Math.abs(this.direction.x) >= 0.9
) {
const heading = randomNumberBetween(0, 2 * Math.PI)
this.direction = { x: Math.cos(heading), y: Math.sin(heading) }
}
this.velocity = INITIAL_VELOCITY
}
update(delta, paddleRects) {
this.x += this.direction.x * this.velocity * delta
this.y += this.direction.y * this.velocity * delta
this.velocity += VELOCITY_INCREASE * delta
const rect = this.rect()
if (rect.bottom >= window.innerHeight || rect.top <= 0) {
this.direction.y *= -1
}
if (paddleRects.some(r => isCollision(r, rect))) {
this.direction.x *= -1
}
}
}
function randomNumberBetween(min, max) {
return Math.random() * (max - min) + min
}
function isCollision(rect1, rect2) {
return (
rect1.left <= rect2.right &&
rect1.right >= rect2.left &&
rect1.top <= rect2.bottom &&
rect1.bottom >= rect2.top
)
}