levels

Author: Brigit Murtaugh

frogger-game.html

@@ -24,21 +24,52 @@ <h2 class="mb-4"><a href="#frogger-game" id="frogger-game">Frogger Game</a></h2>
 
 
 function getCarsForLevel(lvl) {
-  // Increase number of cars and speed with each level
-  const baseCars = [
-    { y: 7, speed: 2 + lvl, dir: 1, positions: [0, 4] },
-    { y: 6, speed: 3 + Math.floor(lvl/2), dir: -1, positions: [2, 6] },
-    { y: 5, speed: 2 + Math.floor(lvl/2), dir: 1, positions: [1, 5] },
-    { y: 3, speed: 3 + lvl, dir: -1, positions: [3, 7] }
+  // Make each level more interesting:
+  // - Level 1: basic, slow, few cars
+  // - Level 2: more cars, some faster
+  // - Level 3: cars in both directions, more density
+  // - Level 4: cars with variable speeds, some short, some long
+  // - Level 5: cars that "blink" (disappear/reappear), and a zigzag row
+  const carConfigs = [
+    // Level 1
+    [
+      { y: 7, speed: 2, dir: 1, positions: [0, 4] },
+      { y: 5, speed: 2, dir: -1, positions: [2, 6] }
+    ],
+    // Level 2
+    [
+      { y: 7, speed: 2.5, dir: 1, positions: [0, 4] },
+      { y: 6, speed: 3, dir: -1, positions: [2, 6] },
+      { y: 4, speed: 2, dir: 1, positions: [1, 5] }
+    ],
+    // Level 3
+    [
+      { y: 7, speed: 2.5, dir: 1, positions: [0, 4, 6] },
+      { y: 6, speed: 3.5, dir: -1, positions: [2, 5] },
+      { y: 5, speed: 2, dir: 1, positions: [1, 3, 7] },
+      { y: 3, speed: 3, dir: -1, positions: [3, 7] }
+    ],
+    // Level 4
+    [
+      { y: 7, speed: 3, dir: 1, positions: [0, 2, 6] },
+      { y: 6, speed: 2, dir: -1, positions: [1, 4, 7] },
+      { y: 5, speed: 4, dir: 1, positions: [3] },
+      { y: 4, speed: 2.5, dir: -1, positions: [2, 5] },
+      { y: 2, speed: 3, dir: 1, positions: [0, 7] }
+    ],
+    // Level 5
+    [
+      { y: 7, speed: 3.5, dir: 1, positions: [0, 2, 4, 6], blink: true },
+      { y: 6, speed: 2, dir: -1, positions: [1, 3, 5, 7] },
+      { y: 5, speed: 4, dir: 1, positions: [3, 6] },
+      { y: 4, speed: 2.5, dir: -1, positions: [2, 5], zigzag: true },
+      { y: 3, speed: 3, dir: 1, positions: [1, 7] },
+      { y: 2, speed: 2, dir: -1, positions: [0, 4] }
+    ]
   ];
-  if (lvl > 1) {
-    // Add more cars for higher levels
-    baseCars.push({ y: 4, speed: 2 + lvl, dir: lvl % 2 === 0 ? 1 : -1, positions: [0, 6] });
-  }
-  if (lvl > 2) {
-    baseCars.push({ y: 2, speed: 3 + lvl, dir: lvl % 2 === 1 ? 1 : -1, positions: [2, 5] });
-  }
-  return baseCars;
+  // Clamp to max config
+  const config = carConfigs[Math.min(lvl - 1, carConfigs.length - 1)].map(car => ({...car}));
+  return config;
 }
 
 function resetGame(newLevel) {
@@ -85,12 +116,17 @@ <h2 class="mb-4"><a href="#frogger-game" id="frogger-game">Frogger Game</a></h2>
 function drawCars() {
   const toolColors = ['#0078D4', '#2496ED', '#F05032', '#222']; // VS Code, Docker, Git, Terminal
   const toolLabels = ['</>', '🐳', 'GIT', 'TER'];
+  const now = Date.now();
   cars.forEach((carRow, i) => {
     carRow.positions.forEach((pos, j) => {
-      const x = pos * grid + 5;
-      const y = carRow.y * grid + 15;
+      // Blinking cars: skip drawing every 500ms
+      if (carRow.blink && Math.floor(now / 500) % 2 === 0) return;
+      let x = pos * grid + 5;
+      let y = carRow.y * grid + 15;
       const w = grid - 10;
       const h = grid - 30;
+      // Zigzag: move up/down slightly
+      if (carRow.zigzag) y += Math.sin((now/200) + j) * 8;
       // Pick a tool type based on row and car index
       const toolIdx = (i + j) % toolColors.length;
       ctx.fillStyle = toolColors[toolIdx];