fn game logic

brong90s · Dec 6, 2021 · 4078734 · 4078734
1 parent 0b339c2
commit 4078734
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 3 deletions.
diff --git a/Ball.js b/Ball.js
@@ -37,7 +37,7 @@ export default class Ball {
         this.velocity = INITIAL_VELOCITY
     }
 
-    update(delta) {
+    update(delta, paddleRects) {
         this.x += this.direction.x * this.velocity * delta
         this.y += this.direction.y * this.velocity * delta
 
@@ -47,12 +47,22 @@ export default class Ball {
         if(rect.bottom >= window.innerHeight || rect.top <= 0) {
             this.direction.y *= -1
         }
-        if(rect.right >= window.innerWidth || rect.left <= 0) {
+
+        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
+    )
 }
diff --git a/Paddle.js b/Paddle.js
@@ -0,0 +1,28 @@
+const SPEED = 0.02
+
+export default class Paddle {
+    constructor(paddleElem) {
+        this.paddleElem = paddleElem
+        this.reset()
+    }
+
+    get position() {
+        return parseFloat(getComputedStyle(this.paddleElem).getPropertyValue("--position"))
+    }
+
+    set position(value) {
+        this.paddleElem.style.setProperty("--position", value)
+    }
+
+    rect() {
+        return this.paddleElem.getBoundingClientRect()
+    }
+
+    reset() {
+        this.position = 50
+    }
+
+    update(delta, ballHeight) {
+        this.position += SPEED * delta * (ballHeight - this.position)
+    }
+}
diff --git a/script.js b/script.js
@@ -1,17 +1,46 @@
 import Ball from './Ball.js'
+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)
+        ball.update(delta, [playerPaddle.rect(), computerPaddle.rect()])
+
+        computerPaddle.update(delta, ball.y)
+
+        if(isLose()) handleLose()
     }
 
     lastTime = time 
     window.requestAnimationFrame(update)
 }
 
+function isLose() {
+    const rect = ball.rect() 
+    return rect.right >= window.innerWidth || rect.left <= 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)