Merge branch 'main' into main

secret/asteroidDestroyer/game.js

@@ -2,9 +2,13 @@
 // Canvas setup
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
+const targetFPS = 60;
+const targetFrameTime = 1000 / targetFPS;
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
+let lastFrameTime = performance.now();
+
 // Game elements
 const player = {
   x: canvas.width / 2,
@@ -346,31 +350,37 @@ function restartGame() {
 
 // Main game loop
 function gameLoop() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  const currentTime = performance.now();
+  const elapsedTime = currentTime - lastFrameTime;
 
-  if (!isGameOver) {
-    updatePlayer();
-    updateBullets();
-    updateAsteroids();
-    updateItems();
-    checkCollisions();
-  }
+  if (elapsedTime >= targetFrameTime) {
+    lastFrameTime = currentTime - (elapsedTime % targetFrameTime);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  drawPlayer();
-  drawBullets();
-  drawAsteroids();
-  drawItems();
-  drawScore();
-  drawAmmo();
-  drawGameOver();
+    if (!isGameOver) {
+      updatePlayer();
+      updateBullets();
+      updateAsteroids();
+      updateItems();
+      checkCollisions();
+    }
 
-  if (!isGameOver) {
-    if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
-    if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
+    drawPlayer();
+    drawBullets();
+    drawAsteroids();
+    drawItems();
+    drawScore();
+    drawAmmo();
+    drawGameOver();
+
+    if (!isGameOver) {
+      if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
+      if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
+    }
   }
 
   requestAnimationFrame(gameLoop);
 }
 
 // Start game loop
-gameLoop();
+requestAnimationFrame(gameLoop);