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

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

又是一年六一

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

小小前端游戏

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


目录
相关文章
|
10月前
|
JSON 定位技术 API
腾讯位置 - 逆地址解析(结尾附视频)
腾讯位置 - 逆地址解析(结尾附视频)
475 0
|
10月前
|
存储 机器学习/深度学习 Java
Java中的位运算符
Java中的位运算符
4980 0
|
弹性计算 大数据 Linux
飞天加速计划初体验
最近因需要使用云服务器来学习,老师让我们用这个阿里云类进行相关的学习,让我们先进行免费的使用进行学习,慢慢了解,毕竟对于首次接触的事物都是了解为主不会投入大量资金。阿里云平台有详细的教程,让初学者能十分轻松的进行学习。飞天加速计划是个好想法,可以让我们这些学生进行学习,制作出自己的网站。让我在暑假对计算机有了浓厚的兴趣,于是在阿里云我选择了飞天加速计划,学习大数据和服务器啥的,让自己get到更多的知识~
|
10月前
|
语音技术 iOS开发 MacOS
Mac上的全局翻译利器 : Bob + PopClip
Mac上的全局翻译利器 : Bob + PopClip
449 0
|
10月前
|
编解码 搜索推荐 虚拟化
Windows平台安装MacOS虚拟机 - VMware(结尾附视频)(下)
Windows平台安装MacOS虚拟机 - VMware(结尾附视频)
204 0
|
10月前
|
机器学习/深度学习 Java
Java方法的嵌套与递归调用
Java方法的嵌套与递归调用
164 0
|
11月前
|
Java
Java强制类型转换异常
Java强制类型转换异常
285 0
|
9月前
|
运维 Kubernetes Serverless
|
10月前
|
SQL 机器学习/深度学习 前端开发
如何用开源组件“攒”出一个大数据建模平台?
如何用开源组件“攒”出一个大数据建模平台?
224 0
|
10月前
|
存储 分布式计算 资源调度
Hadoop全分布式部署 - CentOS(结尾附视频)
Hadoop全分布式部署 - CentOS(结尾附视频)
140 0