const INITAL_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) <= .2 || Math.abs(this.direction.x) >= .9) {
const heading = randomNumberBetween(0, 2 * Math.PI)
this.direction = { x: Math.cos(heading), y: Math.sin(heading) }
}
this.velocity = INITAL_VELOCITY
}
update(delta) {
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 (rect.right >= window.innerWidth || rect.left <= 0) {
// this.direction.x *= -1
//.}
}
}
function randomNumberBetween(min, max) {
return Math.random() * (max-min) + min ```
#Command not executing
3 messages · Page 1 of 1 (latest)
import Paddle from "./Paddle.js";
const ball = new Ball(document.getElementById("ball"))
const playerPaddle = new Paddle(document.getElementById("player-paddle"))
const computerPaddle = new Paddle(document.getElementById("computer-paddle"))
const playerScoreElem = document.getElementById("player-score")
const computerScoreElem = document.getElementById("computer-score")
let lastTime
function update(time) {
if (lastTime !=null) {
const delta = time - lastTime
ball.update(delta)
computerPaddle.update(delta, ball.y)
if (isLose()) handleLose()
}
lastTime = time
window.requestAnimationFrame(update)
}
function isLose() {
const rect = ball.rect()
return (rect.bottom >= window.innerHeight || rect.top <= 0)
}
function handleLose() {
const rect = ball.rect()
if(rect.right >= window.innerWidth) {
playerScoreElem.textContent = parseInt(playerScoreElem.textContent) +1
} else {
computerScoreElem.textContent = parseInt(computerScoreElem.textContent) +1
}
ball.reset()
computerPaddle.reset()
}
document.addEventListener("mousemove", e => {
playerPaddle.position = (e.y / window.innerHeight) * 100
})
window.requestAnimationFrame(update)```
Adding onto that, their is not errors in the console log.