Enhance Pacman game with collision detection, lives system, and game over screen

Author: Brigit Murtaugh

pacman.html

@@ -24,7 +24,7 @@
 
 <a href="#pacman-game" class="pacman-link"><h1 id="pacman-game">Pacman Game</h1></a>
 <canvas id="pacmanCanvas" width="896" height="992"></canvas>
-<p>Use arrow keys to move Pacman. Eat all the features!</p>
+<p>Use arrow keys to move Pacman. Collect all the whale icons while avoiding the monsters.</p>
 <script>
 // Larger Pacman game (dev container themed, fewer collectibles, bigger whales)
 const canvas = document.getElementById('pacmanCanvas');
@@ -62,6 +62,8 @@
 let pacman = { x: 14, y: 17, dx: 0, dy: 0, nextDx: 0, nextDy: 0 };
 let score = 0;
 let dots = 0;
+let gameOver = false;
+let lives = 3;
 for (let row of map) for (let c of row) if (c === '.' || c === 'o') dots++;
 function drawMap() {
   for (let y = 0; y < map.length; y++) {
@@ -238,6 +240,8 @@
   if (canMove(pacman.x + pacman.dx, pacman.y + pacman.dy)) {
     pacman.x += pacman.dx;
     pacman.y += pacman.dy;
+    // Check for collisions after each move
+    checkCollisions();
   }
   // Wrap
   if (pacman.x < 0) pacman.x = map[0].length - 1;
@@ -257,9 +261,112 @@
   ctx.fillStyle = '#FFF';
   ctx.font = '28px Arial';
   ctx.fillText('Score: ' + score, 20, canvas.height - 20);
+  
+  // Draw lives
+  ctx.fillStyle = '#FFFF00';
+  ctx.font = '28px Arial';
+  ctx.fillText('Lives: ' + lives, canvas.width - 150, canvas.height - 20);
+}
+
+// Check if Pacman collides with any monster
+function checkCollisions() {
+  for (const monster of globalThis.monsterStates) {
+    if (monster.x === pacman.x && monster.y === pacman.y) {
+      lives--;
+      if (lives <= 0) {
+        gameOver = true;
+      } else {
+        // Reset Pacman position
+        pacman.x = 14;
+        pacman.y = 17;
+        pacman.dx = 0;
+        pacman.dy = 0;
+        pacman.nextDx = 0;
+        pacman.nextDy = 0;
+      }
+      return true;
+    }
+  }
+  return false;
+}
+
+// Draw game over screen
+function drawGameOver() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  
+  ctx.fillStyle = '#e74c3c';
+  ctx.font = '48px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2 - 50);
+  
+  ctx.fillStyle = '#FFF';
+  ctx.font = '24px Arial';
+  ctx.fillText('Final Score: ' + score, canvas.width/2, canvas.height/2);
+  
+  ctx.fillStyle = '#25d6a2';
+  ctx.font = '28px Arial';
+  ctx.fillText('Press SPACE to restart', canvas.width/2, canvas.height/2 + 50);
+  
+  ctx.textAlign = 'left'; // Reset text align
+}
+
+// Reset game state
+function resetGame() {
+  // Reset map (restore dots)
+  map = [
+    '############################',
+    '#      ....##....      ....#',
+    '#.####.#####.##.#####.####.#',
+    '#o####.#####.##.#####.####o#',
+    '#.####.#####.##.#####.####.#',
+    '#                          #',
+    '#.####.##.########.##.####.#',
+    '#.####.##.########.##.####.#',
+    '#      ##    ##    ##      #',
+    '######.##### ## #####.######',
+    '######.##### ## #####.######',
+    '######.##          ##.######',
+    '######.## ######## ##.######',
+    '######.## ######## ##.######',
+    '#      ....##....      ....#',
+    '#.####.#####.##.#####.####.#',
+    '#.####.#####.##.#####.####.#',
+    '#o..##                ##..o#',
+    '###.##.##.########.##.##.###',
+    '###.##.##.########.##.##.###',
+    '#      ##    ##    ##      #',
+    '#.##########.##.##########.#',
+    '#.##########.##.##########.#',
+    '#                          #',
+    '############################'
+  ];
+  
+  // Reset pacman
+  pacman = { x: 14, y: 17, dx: 0, dy: 0, nextDx: 0, nextDy: 0 };
+  
+  // Reset monsters to original positions
+  globalThis.monsterStates = monsters.map(m => ({...m, dx: 0, dy: 0}));
+  
+  // Reset game state
+  score = 0;
+  lives = 3;
+  gameOver = false;
+  dots = 0;
+  for (let row of map) for (let c of row) if (c === '.' || c === 'o') dots++;
+  
+  // Restart game loop
+  requestAnimationFrame(gameLoop);
 }
 
 document.addEventListener('keydown', e => {
+  if (gameOver) {
+    if (e.key === ' ' || e.code === 'Space') {
+      resetGame();
+    }
+    return;
+  }
+  
   if (["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key)) {
     e.preventDefault();
     let moved = false;
@@ -290,20 +397,36 @@
 function gameLoop(timestamp) {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawMap();
+  
+  if (gameOver) {
+    drawGameOver();
+    return;
+  }
+  
   if (!lastMonsterMove) lastMonsterMove = timestamp;
   if (timestamp - lastMonsterMove > MONSTER_MOVE_INTERVAL) {
     moveMonsters();
     lastMonsterMove = timestamp;
+    // Check for collisions after monsters move
+    checkCollisions();
   }
+  
   drawMonsters();
   drawPacman();
   drawScore();
+  
   if (score >= dots) {
     ctx.fillStyle = '#25d6a2';
     ctx.font = '48px Arial';
-    ctx.fillText('All Features Collected!', canvas.width/2 - 260, canvas.height/2);
+    ctx.textAlign = 'center';
+    ctx.fillText('All Features Collected!', canvas.width/2, canvas.height/2);
+    ctx.font = '28px Arial';
+    ctx.fillText('Press SPACE to play again', canvas.width/2, canvas.height/2 + 50);
+    gameOver = true;
+    ctx.textAlign = 'left';
     return;
   }
+  
   requestAnimationFrame(gameLoop);
 }