#Command not executing

3 messages · Page 1 of 1 (latest)

tiny coral
#

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 ```
#
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.