feat: 新增虫子游戏倍速调节、历史最高分和4种新虫子

insect-catch-game/index.html

@@ -48,12 +48,42 @@
                />
           </button>
         </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Ant</p>
+            <span style="font-size: 60px;">🐜</span>
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Bee</p>
+            <span style="font-size: 60px;">🐝</span>
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Beetle</p>
+            <span style="font-size: 60px;">🪲</span>
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Ladybug</p>
+            <span style="font-size: 60px;">🐞</span>
+          </button>
+        </li>
       </ul>
     </div>
 
     <div class="screen game-container" id="game-container">
       <h3 id="time" class="time">Time: 00:00</h3>
       <h3 id="score" class="score">Score: 0</h3>
+      <h3 id="high-score" class="high-score">High Score: 0</h3>
+      <div class="speed-control">
+        <label for="speed">Speed:</label>
+        <input type="range" id="speed" min="1" max="10" value="1">
+        <span id="speed-value">1x</span>
+      </div>
       <h5 id="message" class="message">
         Are you annoyed yet? <br>
         You are playing an impossible game!!

insect-catch-game/script.js

@@ -4,25 +4,44 @@ const start_btn = document.getElementById('start-btn')
 const game_container = document.getElementById('game-container')
 const timeEl = document.getElementById('time')
 const scoreEl = document.getElementById('score')
+const highScoreEl = document.getElementById('high-score')
+const speedSlider = document.getElementById('speed')
+const speedValue = document.getElementById('speed-value')
 const message = document.getElementById('message')
 let seconds = 0
 let score = 0
 let selected_insect = {}
+let gameSpeed = 1
+let highScore = localStorage.getItem('insectCatchHighScore') || 0
+
+highScoreEl.innerHTML = `High Score: ${highScore}`
 
 start_btn.addEventListener('click', () => screens[0].classList.add('up'))
 
 choose_insect_btns.forEach(btn => {
     btn.addEventListener('click', () => {
         const img = btn.querySelector('img')
-        const src = img.getAttribute('src')
-        const alt = img.getAttribute('alt')
-        selected_insect = { src, alt }
+        const emoji = btn.querySelector('span')
+        if (img) {
+            const src = img.getAttribute('src')
+            const alt = img.getAttribute('alt')
+            selected_insect = { type: 'img', src, alt }
+        } else if (emoji) {
+            const content = emoji.textContent
+            const alt = btn.querySelector('p').textContent.toLowerCase()
+            selected_insect = { type: 'emoji', content, alt }
+        }
         screens[1].classList.add('up')
         setTimeout(createInsect, 1000)
         startGame()
     })
 })
 
+speedSlider.addEventListener('input', (e) => {
+    gameSpeed = parseInt(e.target.value)
+    speedValue.textContent = `${gameSpeed}x`
+})
+
 function startGame() {
     setInterval(increaseTime, 1000)
 }
@@ -42,7 +61,12 @@ function createInsect() {
     const { x, y } = getRandomLocation()
     insect.style.top = `${y}px`
     insect.style.left = `${x}px`
-    insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
+    
+    if (selected_insect.type === 'emoji') {
+        insect.innerHTML = `<span style="font-size: 80px; transform: rotate(${Math.random() * 360}deg); display: inline-block;">${selected_insect.content}</span>`
+    } else {
+        insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
+    }
 
     insect.addEventListener('click', catchInsect)
 
@@ -65,14 +89,24 @@ function catchInsect() {
 }
 
 function addInsects() {
-    setTimeout(createInsect, 1000)
-    setTimeout(createInsect, 1500)
+    const baseDelay = 1000
+    const adjustedDelay = baseDelay / gameSpeed
+    
+    setTimeout(createInsect, adjustedDelay)
+    setTimeout(createInsect, adjustedDelay * 1.5)
 }
 
 function increaseScore() {
     score++
+    scoreEl.innerHTML = `Score: ${score}`
+    
+    if (score > highScore) {
+        highScore = score
+        highScoreEl.innerHTML = `High Score: ${highScore}`
+        localStorage.setItem('insectCatchHighScore', highScore)
+    }
+    
     if(score > 19) {
         message.classList.add('visible')
     }
-    scoreEl.innerHTML = `Score: ${score}`
-}
+}

insect-catch-game/style.css

@@ -95,7 +95,8 @@ h1 {
 }
 
 .time,
-.score {
+.score,
+.high-score {
   position: absolute;
   top: 20px;
 }
@@ -108,24 +109,34 @@ h1 {
   right: 20px;
 }
 
-.message {
-  line-height: 1.7;
-  background-color: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  padding: 20px;
-  z-index: 100;
-  text-align: center;
-  opacity: 0;
+.high-score {
+  top: 60px;
+  right: 20px;
+}
+
+.speed-control {
   position: absolute;
-  top: 0;
+  top: 20px;
   left: 50%;
-  transform: translate(-50%, -150%);
-  transition: transform 0.4s ease-in;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 100;
 }
 
-.message.visible {
-  transform: translate(-50%, 150%);
-  opacity: 1;
+.speed-control label {
+  font-size: 12px;
+}
+
+.speed-control input[type="range"] {
+  width: 100px;
+  cursor: pointer;
+}
+
+.speed-control span {
+  font-size: 12px;
+  min-width: 30px;
 }
 
 .insect {
@@ -148,3 +159,23 @@ h1 {
   width: 100px;
   height: 100px;
 }
+
+.message {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -150%);
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 100%;
+  padding: 20px;
+  z-index: 100;
+  text-align: center;
+  opacity: 0;
+  transition: transform 0.4s ease-in;
+  line-height: 1.6;
+}
+
+.message.visible {
+  transform: translate(-50%, 150%);
+  opacity: 1;
+}