diff --git a/insect-catch-game/index.html b/insect-catch-game/index.html
index ebd3581..265b9c4 100644
--- a/insect-catch-game/index.html
+++ b/insect-catch-game/index.html
@@ -48,12 +48,42 @@
/>
+
+
+
+
+
+
+
+
+
+
+
+
Time: 00:00
Score: 0
+
High Score: 0
+
+
+
+ 1x
+
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..a0adab3 100644
--- a/insect-catch-game/script.js
+++ b/insect-catch-game/script.js
@@ -4,25 +4,44 @@ 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 speedSlider = document.getElementById('speed')
+const speedValue = document.getElementById('speed-value')
const message = document.getElementById('message')
let seconds = 0
let score = 0
let selected_insect = {}
+let gameSpeed = 1
+let highScore = localStorage.getItem('insectCatchHighScore') || 0
+
+highScoreEl.innerHTML = `High Score: ${highScore}`
start_btn.addEventListener('click', () => screens[0].classList.add('up'))
choose_insect_btns.forEach(btn => {
btn.addEventListener('click', () => {
const img = btn.querySelector('img')
- const src = img.getAttribute('src')
- const alt = img.getAttribute('alt')
- selected_insect = { src, alt }
+ const emoji = btn.querySelector('span')
+ if (img) {
+ const src = img.getAttribute('src')
+ const alt = img.getAttribute('alt')
+ selected_insect = { type: 'img', src, alt }
+ } else if (emoji) {
+ const content = emoji.textContent
+ const alt = btn.querySelector('p').textContent.toLowerCase()
+ selected_insect = { type: 'emoji', content, alt }
+ }
screens[1].classList.add('up')
setTimeout(createInsect, 1000)
startGame()
})
})
+speedSlider.addEventListener('input', (e) => {
+ gameSpeed = parseInt(e.target.value)
+ speedValue.textContent = `${gameSpeed}x`
+})
+
function startGame() {
setInterval(increaseTime, 1000)
}
@@ -42,7 +61,12 @@ function createInsect() {
const { x, y } = getRandomLocation()
insect.style.top = `${y}px`
insect.style.left = `${x}px`
- insect.innerHTML = `
`
+
+ if (selected_insect.type === 'emoji') {
+ insect.innerHTML = `${selected_insect.content}`
+ } else {
+ insect.innerHTML = `
`
+ }
insect.addEventListener('click', catchInsect)
@@ -65,14 +89,24 @@ function catchInsect() {
}
function addInsects() {
- setTimeout(createInsect, 1000)
- setTimeout(createInsect, 1500)
+ const baseDelay = 1000
+ const adjustedDelay = baseDelay / gameSpeed
+
+ setTimeout(createInsect, adjustedDelay)
+ setTimeout(createInsect, adjustedDelay * 1.5)
}
function increaseScore() {
score++
+ scoreEl.innerHTML = `Score: ${score}`
+
+ if (score > highScore) {
+ highScore = score
+ highScoreEl.innerHTML = `High Score: ${highScore}`
+ localStorage.setItem('insectCatchHighScore', highScore)
+ }
+
if(score > 19) {
message.classList.add('visible')
}
- scoreEl.innerHTML = `Score: ${score}`
-}
\ No newline at end of file
+}
diff --git a/insect-catch-game/style.css b/insect-catch-game/style.css
index 9808e9c..66ca07e 100644
--- a/insect-catch-game/style.css
+++ b/insect-catch-game/style.css
@@ -95,7 +95,8 @@ h1 {
}
.time,
-.score {
+.score,
+.high-score {
position: absolute;
top: 20px;
}
@@ -108,24 +109,34 @@ h1 {
right: 20px;
}
-.message {
- line-height: 1.7;
- background-color: rgba(0, 0, 0, 0.5);
- width: 100%;
- padding: 20px;
- z-index: 100;
- text-align: center;
- opacity: 0;
+.high-score {
+ top: 60px;
+ right: 20px;
+}
+
+.speed-control {
position: absolute;
- top: 0;
+ top: 20px;
left: 50%;
- transform: translate(-50%, -150%);
- transition: transform 0.4s ease-in;
+ transform: translateX(-50%);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ z-index: 100;
}
-.message.visible {
- transform: translate(-50%, 150%);
- opacity: 1;
+.speed-control label {
+ font-size: 12px;
+}
+
+.speed-control input[type="range"] {
+ width: 100px;
+ cursor: pointer;
+}
+
+.speed-control span {
+ font-size: 12px;
+ min-width: 30px;
}
.insect {
@@ -148,3 +159,23 @@ h1 {
width: 100px;
height: 100px;
}
+
+.message {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -150%);
+ background-color: rgba(0, 0, 0, 0.3);
+ width: 100%;
+ padding: 20px;
+ z-index: 100;
+ text-align: center;
+ opacity: 0;
+ transition: transform 0.4s ease-in;
+ line-height: 1.6;
+}
+
+.message.visible {
+ transform: translate(-50%, 150%);
+ opacity: 1;
+}