新增功能修改-张

insect-catch-game/index.html

@@ -18,14 +18,14 @@
         <li>
           <button class="choose-insect-btn">
             <p>Fly</p>
-            <img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Housefly_%28Musca_domestica%29.jpg/640px-Housefly_%28Musca_domestica%29.jpg" alt="fly">
           </button>
         </li>
         <li>
           <button class="choose-insect-btn">
             <p>Mosquito</p>
             <img
-               src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Mosquito_2007-2.jpg/640px-Mosquito_2007-2.jpg"
                alt="mosquito"
                />
           </button>
@@ -34,7 +34,7 @@
           <button class="choose-insect-btn">
             <p>Spider</p>
             <img
-               src="http://pngimg.com/uploads/spider/spider_PNG12.png"
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/European_garden_spider_%28Araneus_diadematus%29.jpg/640px-European_garden_spider_%28Araneus_diadematus%29.jpg"
                alt="spider"
                />
           </button>
@@ -43,17 +43,58 @@
           <button class="choose-insect-btn">
             <p>Roach</p>
             <img
-               src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Blattodea_icon.png/640px-Blattodea_icon.png"
                alt="roach"
                />
           </button>
         </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Butterfly</p>
+            <img
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Monarch_Butterfly_Danaus_plexippus.jpg/640px-Monarch_Butterfly_Danaus_plexippus.jpg"
+               alt="butterfly"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Dragonfly</p>
+            <img
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Sympetrum_flaveolum_-_side_%28aka%29.jpg/640px-Sympetrum_flaveolum_-_side_%28aka%29.jpg"
+               alt="dragonfly"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Ladybug</p>
+            <img
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Coccinella_septempunctata_-_top_%28aka%29.jpg/640px-Coccinella_septempunctata_-_top_%28aka%29.jpg"
+               alt="ladybug"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Bee</p>
+            <img
+               src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Apis_mellifera_Western_honey_bee.jpg/640px-Apis_mellifera_Western_honey_bee.jpg"
+               alt="bee"
+               />
+          </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-slider">Spawn Speed: <span id="speed-value">1x</span></label>
+        <input type="range" id="speed-slider" min="1" max="10" value="1" step="1">
+      </div>
       <h5 id="message" class="message">
         Are you annoyed yet? <br>
         You are playing an impossible game!!

insect-catch-game/script.js

@@ -4,13 +4,26 @@ 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 message = document.getElementById('message')
+const speedSlider = document.getElementById('speed-slider')
+const speedValue = document.getElementById('speed-value')
+
 let seconds = 0
 let score = 0
+let highScore = localStorage.getItem('insectCatchHighScore') || 0
 let selected_insect = {}
+let spawnSpeedMultiplier = 1
+
+highScoreEl.innerHTML = `High Score: ${highScore}`
 
 start_btn.addEventListener('click', () => screens[0].classList.add('up'))
 
+speedSlider.addEventListener('input', (e) => {
+    spawnSpeedMultiplier = parseInt(e.target.value)
+    speedValue.innerHTML = `${spawnSpeedMultiplier}x`
+})
+
 choose_insect_btns.forEach(btn => {
     btn.addEventListener('click', () => {
         const img = btn.querySelector('img')
@@ -65,8 +78,10 @@ function catchInsect() {
 }
 
 function addInsects() {
-    setTimeout(createInsect, 1000)
-    setTimeout(createInsect, 1500)
+    const baseDelay1 = 1000 / spawnSpeedMultiplier
+    const baseDelay2 = 1500 / spawnSpeedMultiplier
+    setTimeout(createInsect, baseDelay1)
+    setTimeout(createInsect, baseDelay2)
 }
 
 function increaseScore() {
@@ -75,4 +90,10 @@ function increaseScore() {
         message.classList.add('visible')
     }
     scoreEl.innerHTML = `Score: ${score}`
-}
+    
+    if(score > highScore) {
+        highScore = score
+        localStorage.setItem('insectCatchHighScore', highScore)
+        highScoreEl.innerHTML = `High Score: ${highScore}`
+    }
+}

insect-catch-game/style.css

@@ -59,6 +59,7 @@ h1 {
   justify-content: center;
   list-style-type: none;
   padding: 0;
+  max-width: 800px;
 }
 
 .insects-list li {
@@ -95,7 +96,8 @@ h1 {
 }
 
 .time,
-.score {
+.score,
+.high-score {
   position: absolute;
   top: 20px;
 }
@@ -108,6 +110,36 @@ h1 {
   right: 20px;
 }
 
+.high-score {
+  right: 20px;
+  top: 50px;
+  font-size: 12px;
+  color: #ffd700;
+}
+
+.speed-control {
+  position: absolute;
+  top: 80px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 10px;
+}
+
+.speed-control label {
+  margin-bottom: 5px;
+}
+
+.speed-control input[type="range"] {
+  width: 100px;
+  cursor: pointer;
+}
+
+#speed-value {
+  color: #ffd700;
+}
+
 .message {
   line-height: 1.7;
   background-color: rgba(0, 0, 0, 0.5);