又是一年六一
不知不觉,一年的时光已经流逝近半,又到了一个不再需要过的节日。还记得夕阳下的奔跑,那是我逝去的青春。。。咳咳咳!时光荏苒,甚至已经不记得自己少年模样,是以何种的心态看待这个世界。既然官方有虚拟勋章送,自然是不能错过的,那就写个锻炼手速的游戏吧🎮。
小小前端游戏
还记得十几年前,对网页小游戏总是爱不释手,而现如今Flash都已经退役有几个年头了,一时间好像那些不肝不氪但又趣味十足的小游戏全都消失不见了,很多都成为了经典。突然想测一下自己鼠标最快能点多快,于是乎写了一个小游戏玩了玩,每秒6.6次,马马虎虎了:
代码如下,粘贴到记事本使用浏览器打开,可以挑战一下😄:
<!DOCTYPE html> <html> <head> <title>点击计数器游戏</title> <style> #gameControls { display: flex; justify-content: space-between; width: 300px; margin-bottom: 20px; } </style> </head> <body> <div id="gameControls"> <div> <button id="startButton">开始新游戏</button> <button id="clickButton">点击我!</button> </div> <div> <label for="timeLimit">时间限制(秒):</label> <input type="number" id="timeLimit" min="1" value="10"> </div> </div> <p id="clickCount">点击次数: 0</p> <p id="countdown">剩余时间: 0秒</p> <script> var clickCount = 0; var isPlaying = false; var timerId = null; var countdownId = null; function startGame() { if (timerId !== null) { clearTimeout(timerId); } if (countdownId !== null) { clearInterval(countdownId); } clickCount = 0; document.getElementById('clickCount').textContent = "点击次数: " + clickCount; var timeLimit = document.getElementById('timeLimit').value; document.getElementById('countdown').textContent = "剩余时间: " + timeLimit + "秒"; isPlaying = true; timerId = setTimeout(function() { isPlaying = false; clearInterval(countdownId); alert('时间到! 你点击了 ' + clickCount + ' 次!'); }, timeLimit * 1000); countdownId = setInterval(function() { timeLimit -= 1; document.getElementById('countdown').textContent = "剩余时间: " + timeLimit + "秒"; if (timeLimit <= 0) { clearInterval(countdownId); } }, 1000); } document.getElementById('clickButton').addEventListener('click', function() { if (isPlaying) { clickCount += 1; document.getElementById('clickCount').textContent = "点击次数: " + clickCount; } }); document.getElementById('startButton').addEventListener('click', startGame); </script> </body> </html>