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

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

又是一年六一

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

小小前端游戏

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


目录
相关文章
|
11月前
关于游戏的笔记
关于游戏的笔记
点这里,玩小蚂蚁的小游戏
对于很多人来说(比如说我自己),平时没有大段的时间和精力去玩一个大游戏,这些人需要一些简单好玩的小游戏,拿起来就能玩几下,在忙碌的生活中寻求片刻的放松,随时又可以放下,继续回归到生活。如果你也是这些人的话,那么这些小游戏就是为你而做的,希望你能够喜欢。
90 0
点这里,玩小蚂蚁的小游戏
小蚂蚁的小游戏系列
对于很多人来说(比如说我自己),平时没有大段的时间和精力去玩一个大游戏,这些人需要一些简单好玩的小游戏,拿起来就能玩几下,在忙碌的生活中寻求片刻的放松,随时又可以放下,继续回归到生活。如果你也是这些人的话,那么这些小游戏就是为你而做的,希望你能够喜欢。
84 0
小蚂蚁的小游戏系列
|
存储 Python
摸鱼宝典(一)——贪吃蛇游戏改版:贪吃龙 · 双龙戏珠小游戏(Python)
摸鱼宝典(一)——贪吃蛇游戏改版:贪吃龙 · 双龙戏珠小游戏(Python)
125 0
小蚂蚁的小游戏
嗨!大家好,我是小蚂蚁。 对于很多人来说(比如说我自己),平时没有大段的时间和精力去玩一个大游戏,这些人需要一些简单好玩的小游戏,拿起来就能玩几下,在忙碌的生活中寻求片刻的放松,随时又可以放下,继续回归到生活。如果你也是这些人的话,那么这些小游戏就是为你而做的,希望你能够喜欢。
91 0
|
小程序
点这里,玩小蚂蚁学员们的小游戏
嗨!大家好,我是小蚂蚁。 这里是一些我的学员小游戏作品,很高兴越来越多的通过学习做出了的自己的游戏,这也让我觉得自己做的事情很有价值。
165 0
|
小程序
小蚂蚁学员们的小游戏
在这里是一些小游戏作品。假期休闲放松时,欢迎来玩玩。 无需下载安装,直接点击下方的对应卡片即可开始啦!
107 0
|
小程序
小蚂蚁游戏开发课程学员的第一款小游戏作品
今天要介绍的是小蚂蚁游戏开发课程学员@Sing的一款小游戏作品曹操别想逃,是一个华容道游戏。 不得不说我还是极其兴奋的,因为这是我的学员的第一款上线的小游戏,虽然我只是给了一点儿指导,但是从某种意义上来讲,这大概算是我帮助他人完成的第一款小游戏作品,带来的兴奋感和成就感甚至不亚于我自己完成了一款游戏的创作。
73 0
|
小程序
小蚂蚁的第二个小游戏作品
关于第二个游戏的想法,其实很早之前就有了,但是,一直也没有去做。所以,它就像个小讨厌鬼一样,时不时的过来戳你一下。不论你当前正在做着什么类型的游戏,它总是不时的提醒你:嗨!这个想法挺不错的,要不要试着加入到这个游戏里?消除搭配上射击,多有意思,要不要试试?这么好的想法,你舍得一直把它搁置在那里吗?…...
47 0
|
存储 缓存 前端开发
有一台服务器可以做哪些很酷的事情·2
有一台服务器可以做哪些很酷的事情·2
182 0