Update mario-game.njk

EiJackGH · web-flow · commit c6cd15ef0ad8 · 2026-03-18T19:11:32.000+08:00
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
@@ -2,14 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Mario Mini Game</title>
+  <title>Mario Sprite Game</title>
 
   <style>
     body {
       margin: 0;
       background: #5c94fc;
       overflow: hidden;
-      font-family: Arial;
     }
 
     #game {
@@ -18,31 +17,31 @@
       height: 100vh;
     }
 
+    /* Mario sprite */
     #mario {
       position: absolute;
-      width: 50px;
-      height: 50px;
-      background: red;
+      width: 48px;
+      height: 48px;
       bottom: 50px;
       left: 100px;
-      border-radius: 10px;
+      background: url("https://i.imgur.com/Wb1qfhK.png") no-repeat center/cover;
+    }
+
+    /* Goomba sprite */
+    .goomba {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      bottom: 50px;
+      background: url("https://i.imgur.com/6X12GQp.png") no-repeat center/cover;
     }
 
     .ground {
       position: absolute;
       bottom: 0;
       width: 100%;
       height: 50px;
-      background: green;
-    }
-
-    .obstacle {
-      position: absolute;
-      width: 40px;
-      height: 40px;
-      background: brown;
-      bottom: 50px;
-      right: -40px;
+      background: #2ecc71;
     }
 
     #score {
@@ -51,6 +50,7 @@
       left: 10px;
       color: white;
       font-size: 20px;
+      font-family: Arial;
     }
   </style>
 </head>
@@ -71,7 +71,7 @@
   let jumping = false;
   let score = 0;
 
-  // Jump function
+  // Jump mechanic
   document.addEventListener("keydown", () => {
     if (jumping) return;
 
@@ -97,38 +97,39 @@
     }, 20);
   });
 
-  // Create obstacles
-  function createObstacle() {
-    const obstacle = document.createElement("div");
-    obstacle.classList.add("obstacle");
-    game.appendChild(obstacle);
+  // Spawn Goombas
+  function spawnGoomba() {
+    const goomba = document.createElement("div");
+    goomba.classList.add("goomba");
+    game.appendChild(goomba);
 
     let position = window.innerWidth;
 
     const move = setInterval(() => {
       if (position < -40) {
         clearInterval(move);
-        obstacle.remove();
+        goomba.remove();
         score++;
         scoreText.innerText = "Score: " + score;
       } else {
-        position -= 5;
-        obstacle.style.left = position + "px";
+        position -= 6;
+        goomba.style.left = position + "px";
       }
 
       // Collision detection
       const marioBottom = parseInt(window.getComputedStyle(mario).bottom);
+
       if (position > 80 && position < 140 && marioBottom < 90) {
         alert("Game Over! Score: " + score);
         location.reload();
       }
 
     }, 20);
 
-    setTimeout(createObstacle, Math.random() * 2000 + 1000);
+    setTimeout(spawnGoomba, Math.random() * 2000 + 1000);
   }
 
-  createObstacle();
+  spawnGoomba();
 </script>
 
 </body>
