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

1 month ago · c9bea1fefe
parent c92b0bc3a8
commit c9bea1fefe
4 changed files with 116 additions and 3 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,2 @@
+{
+}
--- a/insect-catch-game/index.html
+++ b/insect-catch-game/index.html
@ -9,7 +9,25 @@
  <body>
    <div class="screen">
      <h1>Catch The Insect</h1>
+      <div class="speed-selector">
+        <label for="speed">Speed:</label>
+        <select id="speed">
+          <option value="1">1x</option>
+          <option value="2">2x</option>
+          <option value="3">3x</option>
+          <option value="4">4x</option>
+          <option value="5">5x</option>
+          <option value="6">6x</option>
+          <option value="7">7x</option>
+          <option value="8">8x</option>
+          <option value="9">9x</option>
+          <option value="10">10x</option>
+        </select>
+      </div>
      <button class="btn" id="start-btn">Play Game</button>
+      <div class="high-score-display">
+        <span>High Score: <span id="high-score-menu">0</span></span>
+      </div>
    </div>

    <div class="screen">
@ -48,12 +66,49 @@
               />
          </button>
        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Bee</p>
+            <img
+               src="https://cdn-icons-png.flaticon.com/512/616/616492.png"
+               alt="bee"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Butterfly</p>
+            <img
+               src="https://cdn-icons-png.flaticon.com/512/1866/1866304.png"
+               alt="butterfly"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Ant</p>
+            <img
+               src="https://cdn-icons-png.flaticon.com/512/1866/1866327.png"
+               alt="ant"
+               />
+          </button>
+        </li>
+        <li>
+          <button class="choose-insect-btn">
+            <p>Ladybug</p>
+            <img
+               src="https://cdn-icons-png.flaticon.com/512/2330/2330867.png"
+               alt="ladybug"
+               />
+          </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">Best: 0</h3>
      <h5 id="message" class="message">
        Are you annoyed yet? <br>
        You are playing an impossible game!!
--- a/insect-catch-game/script.js
+++ b/insect-catch-game/script.js
@ -5,11 +5,23 @@ const game_container = document.getElementById('game-container')
 const timeEl = document.getElementById('time')
 const scoreEl = document.getElementById('score')
 const message = document.getElementById('message')
+const highScoreEl = document.getElementById('high-score')
+const highScoreMenuEl = document.getElementById('high-score-menu')
+const speedSelect = document.getElementById('speed')
+
 let seconds = 0
 let score = 0
 let selected_insect = {}
+let speed = 1
+let highScore = localStorage.getItem('insectGameHighScore') || 0
+
+highScoreMenuEl.innerHTML = highScore
+highScoreEl.innerHTML = `Best: ${highScore}`

-start_btn.addEventListener('click', () => screens[0].classList.add('up'))
+start_btn.addEventListener('click', () => {
+    speed = parseInt(speedSelect.value)
+    screens[0].classList.add('up')
+})

 choose_insect_btns.forEach(btn => {
    btn.addEventListener('click', () => {
@ -23,6 +35,7 @@ choose_insect_btns.forEach(btn => {
    })
 })

+
 function startGame() {
    setInterval(increaseTime, 1000)
 }
@ -65,8 +78,9 @@ function catchInsect() {
 }

 function addInsects() {
-    setTimeout(createInsect, 1000)
-    setTimeout(createInsect, 1500)
+    const baseDelay = 1000 / speed
+    setTimeout(createInsect, baseDelay)
+    setTimeout(createInsect, baseDelay * 1.5)
 }

 function increaseScore() {
@ -75,4 +89,11 @@ function increaseScore() {
        message.classList.add('visible')
    }
    scoreEl.innerHTML = `Score: ${score}`
+    
+    if(score > highScore) {
+        highScore = score
+        localStorage.setItem('insectGameHighScore', highScore)
+        highScoreEl.innerHTML = `Best: ${highScore}`
+        highScoreMenuEl.innerHTML = highScore
+    }
 }
--- a/insect-catch-game/style.css
+++ b/insect-catch-game/style.css
@ -39,6 +39,34 @@ h1 {
  outline: 0;
 }

+.speed-selector {
+  margin: 20px 0;
+  font-size: 14px;
+}
+
+.speed-selector label {
+  margin-right: 10px;
+}
+
+.speed-selector select {
+  padding: 10px 15px;
+  font-family: inherit;
+  font-size: 14px;
+  border: 2px solid #fff;
+  background-color: #fff;
+  color: #516dff;
+  cursor: pointer;
+}
+
+.speed-selector select:focus {
+  outline: 0;
+}
+
+.high-score-display {
+  margin-top: 20px;
+  font-size: 12px;
+}
+
 .screen {
  display: flex;
  flex-direction: column;
@ -108,6 +136,13 @@ h1 {
  right: 20px;
 }

+.high-score {
+  position: absolute;
+  top: 50px;
+  right: 20px;
+  font-size: 12px;
+}
+
 .message {
  line-height: 1.7;
  background-color: rgba(0, 0, 0, 0.5);