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: 0 +
@@ -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);