diff --git a/insect-catch-game/index.html b/insect-catch-game/index.html
index ebd3581..d0755d9 100644
--- a/insect-catch-game/index.html
+++ b/insect-catch-game/index.html
@@ -18,14 +18,14 @@
@@ -34,7 +34,7 @@
@@ -43,17 +43,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
Time: 00:00
Score: 0
+
High Score: 0
+
+
+
+
Are you annoyed yet?
You are playing an impossible game!!
diff --git a/insect-catch-game/script.js b/insect-catch-game/script.js
index f9963e7..2478f55 100644
--- a/insect-catch-game/script.js
+++ b/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}`
-}
\ No newline at end of file
+
+ if(score > highScore) {
+ highScore = score
+ localStorage.setItem('insectCatchHighScore', highScore)
+ highScoreEl.innerHTML = `High Score: ${highScore}`
+ }
+}
diff --git a/insect-catch-game/style.css b/insect-catch-game/style.css
index 9808e9c..b995b10 100644
--- a/insect-catch-game/style.css
+++ b/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);