From c9bea1fefe62484b6c77d54a3b45647345fc814b Mon Sep 17 00:00:00 2001 From: zhangyi-user <1293605013@qq.com> Date: Thu, 19 Mar 2026 19:40:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=99=AB=E5=AD=90?= =?UTF-8?q?=E6=B8=B8=E6=88=8F=E5=80=8D=E9=80=9F=E8=B0=83=E8=8A=82=E3=80=81?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=9C=80=E9=AB=98=E5=88=86=E5=92=8C4?= =?UTF-8?q?=E7=A7=8D=E6=96=B0=E8=99=AB=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 2 ++ insect-catch-game/index.html | 55 ++++++++++++++++++++++++++++++++++++ insect-catch-game/script.js | 27 ++++++++++++++++-- insect-catch-game/style.css | 35 +++++++++++++++++++++++ 4 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json 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);