diff --git a/js/main.js b/js/main.js index 931f358..f40517f 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,5 @@ -const enemySpawnFrequency = 4.5; +const enemySpawnFrequencyPerSecond = 4.5; +const maxDeltaTimeInMs = 50; const canvasHandler = new CanvasHandler("canvas"); const inputHandler = new InputHandler(canvasHandler); @@ -27,9 +28,11 @@ class Circle { this.position = add(this.position, limit(deltaPosition, maxDistance)); } } + draw(canvasHandler) { canvasHandler.drawCircle(this.position, this.size, this.color); } + isTouching(other) { return ( magnitude(subtract(this.position, other.position)) < @@ -49,7 +52,7 @@ class Game { ); this.circleHolder = [this.player]; - this.spawnInterval = 1000 / enemySpawnFrequency; + this.spawnInterval = 1000 / enemySpawnFrequencyPerSecond; this.previousSpawn = this.previousTime = 0; this.score = 0; @@ -61,6 +64,7 @@ class Game { this.boundNextFrame = this.nextFrame.bind(this); window.requestAnimationFrame(this.boundNextFrame); } + nextFrame(timestamp) { if (this.isActive) { canvasHandler.fillCanvas("rgba(165, 64, 45, 0.1)"); @@ -69,6 +73,7 @@ class Game { window.requestAnimationFrame(this.boundNextFrame); } } + spawnEnemyIfNeeded(timestamp) { if (timestamp - this.previousSpawn > this.spawnInterval) { this.circleHolder.push( @@ -88,6 +93,7 @@ class Game { this.score++; } } + moveCircles(timestamp) { const deltaTime = this.getDeltaTime(timestamp); const collided = new Set(); @@ -112,14 +118,17 @@ class Game { ); } } + getDeltaTime(timestamp) { const tempPreviousTime = this.previousTime; this.previousTime = timestamp; - return timestamp - tempPreviousTime; + return Math.min(timestamp - tempPreviousTime, maxDeltaTimeInMs); } + showEndScreen() { document.getElementById("endText").style.display = "block"; document.getElementById("endScore").innerHTML = `Your score: ${this.score}`; + document.getElementById("startButton").textContent = "Play again"; this.menuBox.display = "flex"; this.isActive = false; }