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

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

又是一年六一

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

小小前端游戏

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


目录
相关文章
|
Python
90 python高级 - 循环导入
90 python高级 - 循环导入
95 0
|
算法 JavaScript Java
数据结构与算法学习——动态规划-3
数据结构与算法学习——动态规划-3
655 0
数据结构与算法学习——动态规划-3
|
PHP
【PHP】递归时把数据存到数组里(防止被覆盖)
【PHP】递归时把数据存到数组里(防止被覆盖)
138 0
【PHP】递归时把数据存到数组里(防止被覆盖)
|
2天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1080 0
|
11天前
|
人工智能 运维 安全
|
10天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
2天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
267 0
|
9天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
10天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
763 23