diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/insect-catch-game/index.html b/insect-catch-game/index.html
index ebd3581..84a6ed3 100644
--- a/insect-catch-game/index.html
+++ b/insect-catch-game/index.html
@@ -9,7 +9,25 @@
Catch The Insect
+
+
+
+
+
+ High Score:
+
@@ -48,12 +66,49 @@
/>
+
+
+
+
+
+
+
+
+
+
+
+
Time: 00:00
Score: 0
+ Best: 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..a993699 100644
--- 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
+ }
}
\ No newline at end of file
diff --git a/insect-catch-game/style.css b/insect-catch-game/style.css
index 9808e9c..d0fe83d 100644
--- 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);