【六·一】就做个纯粹的小小游戏吧

简介: 【六·一】就做个纯粹的小小游戏吧

又是一年六一

不知不觉,一年的时光已经流逝近半,又到了一个不再需要过的节日。还记得夕阳下的奔跑,那是我逝去的青春。。。咳咳咳!时光荏苒,甚至已经不记得自己少年模样,是以何种的心态看待这个世界。既然官方有虚拟勋章送,自然是不能错过的,那就写个锻炼手速的游戏吧🎮。

小小前端游戏

还记得十几年前,对网页小游戏总是爱不释手,而现如今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>


目录
打赏
0
0
0
0
159
分享
相关文章
90 python高级 - 循环导入
90 python高级 - 循环导入
85 0
【PHP】递归时把数据存到数组里(防止被覆盖)
【PHP】递归时把数据存到数组里(防止被覆盖)
131 0
【PHP】递归时把数据存到数组里(防止被覆盖)
kde
|
11天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
7095 15
|
8天前
typora免费版,激活方法,Typora使用教程
Typora是一款简洁高效的Markdown编辑器,支持即时渲染。本教程涵盖安装方法、文件操作、视图控制、格式排版、字体样式及Markdown语法,助你快速上手使用Typora进行高效写作。
1846 1
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
1806 26
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
1053 5
【保姆级图文详解】大模型、Spring AI编程调用大模型
【保姆级图文详解】大模型、Spring AI编程调用大模型
721 9
【保姆级图文详解】大模型、Spring AI编程调用大模型
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问