diff --git a/js/InputHandler.js b/js/InputHandler.js index 9e73e72..fb5f31a 100644 --- a/js/InputHandler.js +++ b/js/InputHandler.js @@ -1,14 +1,18 @@ class InputHandler { - constructor(idOfWatchedArea) { - const elem = document.getElementById(idOfWatchedArea); + constructor(canvasHandler) { + const elem = canvasHandler.canvas; - const handleMouse = ({ offsetX, offsetY }) => - this.setPointerPosition([offsetX, offsetY]); - const handleTouch = ({ touches }) => - this.setPointerPosition([touches[0].clientX, touches[0].clientY]); + const handleMouse = ({ clientX, clientY }) => + this.setPointerPosition(canvasHandler.clientToCanvas(clientX, clientY)); + + const handleTouch = (event) => { + event.preventDefault(); + const { clientX, clientY } = event.touches[0]; + this.setPointerPosition(canvasHandler.clientToCanvas(clientX, clientY)); + }; elem.addEventListener("mousemove", handleMouse); - elem.addEventListener("touchmove", handleTouch); + elem.addEventListener("touchmove", handleTouch, { passive: false }); this.pointerPosition = [0, 0]; } diff --git a/js/main.js b/js/main.js index a3be31d..931f358 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,7 @@ const enemySpawnFrequency = 4.5; const canvasHandler = new CanvasHandler("canvas"); -const inputHandler = new InputHandler("canvas"); +const inputHandler = new InputHandler(canvasHandler); let game; function newGame() { @@ -31,7 +31,10 @@ class Circle { canvasHandler.drawCircle(this.position, this.size, this.color); } isTouching(other) { - return magnitude(subtract(this.position, other.position)) < 2 * this.size; + return ( + magnitude(subtract(this.position, other.position)) < + this.size + other.size + ); } } @@ -47,7 +50,7 @@ class Game { this.circleHolder = [this.player]; this.spawnInterval = 1000 / enemySpawnFrequency; - this.previousSpawn = this.previousTimestamp = 0; + this.previousSpawn = this.previousTime = 0; this.score = 0; this.menuBox = document.getElementById("menuBox").style; @@ -55,14 +58,15 @@ class Game { "none"; this.isActive = true; - window.requestAnimationFrame(this.nextFrame.bind(this)); + this.boundNextFrame = this.nextFrame.bind(this); + window.requestAnimationFrame(this.boundNextFrame); } nextFrame(timestamp) { if (this.isActive) { canvasHandler.fillCanvas("rgba(165, 64, 45, 0.1)"); this.spawnEnemyIfNeeded(timestamp); this.moveCircles(timestamp); - window.requestAnimationFrame(this.nextFrame.bind(this)); + window.requestAnimationFrame(this.boundNextFrame); } } spawnEnemyIfNeeded(timestamp) { @@ -86,20 +90,27 @@ class Game { } moveCircles(timestamp) { const deltaTime = this.getDeltaTime(timestamp); + const collided = new Set(); for (let i = 0; i < this.circleHolder.length; i++) { this.circleHolder[i].move(deltaTime); this.circleHolder[i].draw(canvasHandler); for (let j = i + 1; j < this.circleHolder.length; j++) { if (this.circleHolder[i].isTouching(this.circleHolder[j])) { - if (this.circleHolder[i] == this.player) this.showEndScreen(); - else { - this.circleHolder.splice(i, 1); - this.circleHolder.splice(j - 1, 1); + if (this.circleHolder[i] === this.player) { + this.showEndScreen(); + return; } + collided.add(i).add(j); } } } + + if (collided.size > 0) { + this.circleHolder = this.circleHolder.filter( + (_, index) => !collided.has(index) + ); + } } getDeltaTime(timestamp) { const tempPreviousTime = this.previousTime;