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