Merge c9bea1fefe into c92b0bc3a8

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

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!!

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)
+    const baseDelay = 1000 / speed
-    setTimeout(createInsect, 1500)
+    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
+    }
 }

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);