乘风原创程序

  • Javascript实现秒表计时游戏
  • 2020/6/23 10:05:37
  • 本文实例为大家分享了javascript实现秒表计时游戏的具体代码,供大家参考,具体内容如下

    一、说明

    本游戏页面设计分为左右两栏。左上为跑马灯,左下为计时器和”start”按钮;右上为排行榜,右下为游戏规则说明。

    跑马灯用的是定时器,循环走一遍。计时器是从”00:00:000”开始计时,需要点击”start”按钮开始游戏,停止游戏是点击空格键。游戏计算的是停止时间时刻和”00:10:000”时刻,也就是和10秒整的时间差。注意如果是在10秒前按下空格键停止,是有惩罚的,惩罚为之前计算的时间差翻倍。最后是按最终时间差从小到大顺序进行排名。

    二、效果展示

    三、代码

    3.1 html

    <!doctype html>
    <html lang="en">
    
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>计时小游戏</title>
     <link rel="stylesheet" href="./css/play.css" rel="external nofollow" >
     <script src="./js/play.js"></script>
    </head>
    
    <body>
     <div>
      <!-- 分栏-左部 -->
      <div id="left">
       <!-- 跑马灯 -->
       <div id="marquee">
        <table>
         <tr id="tr1">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
         </tr>
         <tr id="tr2">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
         </tr>
         <tr id="tr3">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
         </tr>
         <tr id="tr4">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
         </tr>
        </table>
       </div>
       <!-- 计时器 -->
       <div id="time">
        <span id="id_m">00</span>:
        <span id="id_s">00</span>:
        <span id="id_ms">000</span>
       </div>
       <br><br>
       <!-- "start"按钮 -->
       <div>
        <button id="start">start</button>
       </div>
       <br><br>
      </div>
    
      <!-- 分栏-右部 -->
      <div id="right">
       <!-- 排行榜 -->
       <div class="board1">
        <table border="1" id="leaderboard">
         <caption>排行榜</caption>
         <tr>
          <th>排名</th>
          <th>玩家id</th>
          <th>时间记录</th>
          <th>是否罚时</th>
          <th>时间差</th>
         </tr>
        </table>
       </div>
       <!-- 游戏规则说明 -->
       <div class="board2">
        <div>
         <div style="font-size: 1.5em;">计时游戏规则:</div>
         <p>&emsp;&emsp;<span>点击"start"开始游戏,当秒表计时到10秒的时候,请按下键盘的空格键,系统将记录按下键盘时刻秒表与10秒时刻的时间差,并按照最终时间差从小到大顺序进行排名。</span>
          如果想要重新开始游戏,只需再次点击"start"。
          <br>&emsp;&emsp;
          <span style="color: rgb(202, 59, 59);">注意:如果在秒表10秒前按下空格键,属于“抢跑”违规,需要罚时,最终时间差翻倍!</span>
         </p>
        </div>
       </div>
      </div>
     </div>
    </body>
    
    </html>

    3.2 css

    body {
     background-image: url("../images/img02.png");
     background-size: cover;
    }
    
    body>div {
     display: flex;
     margin: 50px 50px 0px 50px;
    }
    
    /* 分栏-左部 */
    #left {
     height: 550px;
     flex: 1;
     text-align: center;
     background-color: rgba(10, 0, 6, 0.3);
    }
    
    /* 跑马灯 */
    #marquee {
     width: 100%;
     height: 300px;
    }
    
    #marquee table {
     width: 95%;
     height: 280px;
     margin: 5px 20px 0px 20px;
     border-spacing: 20px;
    }
    
    #marquee table td {
     background-color: rgba(9, 28, 38, 0.8);
     border-radius: 5px;
    }
    
    /* 计时器:分、秒、毫秒 */
    #time {
     font-size: 4.5em;
     color: #02c4f2;
    }
    
    /* "start"按钮 */
    #start {
     font-size: 3em;
     background-color: rgba(10, 0, 6, 0.5);
     border-style: solid;
     border-color: #344665;
     color: #02c4f2;
     border-radius: 10px;
     cursor: pointer;
    }
    
    /* 分栏-右部 */
    #right {
     flex: 1;
     margin-left: 50px;
    }
    
    /* 排行榜滚动界面 */
    #right .board1 {
     height: 350px;
     width: 100%;
     border: 1px solid #344665;
     overflow-y: scroll;
     padding: 5px;
     background-color: rgba(10, 0, 6, 0.2);
    }
    
    /*滚动条整体样式*/
    #right>div::-webkit-scrollbar {
     background-color: rgba(219, 200, 212, 0.4);
    }
    
    /*滚动条里面小方块*/
    #right>div::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background: rgba(155, 24, 24, 0.5);
    }
    
    /* 排行榜 */
    #leaderboard {
     width: 100%;
     border-color: #344665;
     color: white;
     font-size: 1.3em;
     text-align: center;
    }
    
    #leaderboard th {
     width: 18%;
    }
    
    /* 游戏规则说明 */
    #right .board2 {
     height: 165px;
     width: 100%;
     border: 1px solid #344665;
     margin-top: 10px;
     padding: 5px;
     background-color: rgba(10, 0, 6, 0.2);
     color: white;
     line-height: 1.5em;
    }
    
    .board2>div {
     margin: 4px;
    }

    3.3 javascript

    window.onload = function () {
    
     var count = 0; // 记录开始后当前的毫秒数
     var timer; // 定时器返回值,用于停止定时器
     var timer_color; // 定时器返回值,用于停止跑马灯
     var flag = false; // 增加判断,防止重复点击开始导致有多个定时器同时计数
     /* 计时 */
     var id_m = document.getelementbyid("id_m");
     var id_s = document.getelementbyid("id_s");
     var id_ms = document.getelementbyid("id_ms");
     /* 跑马灯 */
     var td1 = this.document.getelementbyid("tr1").getelementsbytagname("td");
     var td2 = this.document.getelementbyid("tr2").getelementsbytagname("td");
     var td3 = this.document.getelementbyid("tr3").getelementsbytagname("td");
     var td4 = this.document.getelementbyid("tr4").getelementsbytagname("td");
     var color = td1[1].style.backgroundcolor; // 存储跑马灯原来的颜色,用于还原
    
     /* 开始按钮 */
     var start = this.document.getelementbyid("start");
     start.onclick = function () {
      start.blur(); // 移除焦点
      if (flag) {
       clearinterval(timer); // 处理没按空格键停止就再次点击"start"的情况
      }
      flag = true;
      /* 计时器 */
      var ms = new date().gettime();
      timer = setinterval(function () {
       count = new date().gettime() - ms;
       id_m.innertext = handletime1(parseint(count / 1000 / 60));
       id_s.innertext = handletime1(parseint(count / 1000 % 60));
       id_ms.innertext = handletime2(count % 1000);
      }, 103);
      /* 跑马灯 */
      clear(0); // 先全部清除
      row = 4; // 初始化行
      col = 4; // 初始化列
      timer_color = setinterval(paomadeng, 200);
     }
     /* 处理时间(分、秒) */
     function handletime1(num) {
      if (num < 10) {
       return '0' + num;
      }
      return num;
     }
     /* 处理时间(毫秒) */
     function handletime2(num) {
      if (num < 10) {
       return "00" + num;
      } else if (num < 100) {
       return '0' + num;
      }
      return num;
     }
     /* 跑马灯 */
     var row = 4,
      col = 4;
     function paomadeng() {
      if (col == -1) {
       clear(col + 1);
       col = 4;
      }
      if (row == 4) {
       clear(col + 1);
       td4[col].style.backgroundcolor = "green";
       row--;
      } else if (row == 3) {
       td3[col].style.backgroundcolor = "red";
       row--;
      } else if (row == 2) {
       td2[col].style.backgroundcolor = "blue";
       row--;
      } else if (row == 1) {
       td1[col].style.backgroundcolor = "#47de00";
       row = 4;
       col--;
      }
     }
     /* 清除跑马灯 */
     function clear(n) {
      for (; n <= 4; n++) {
       td1[n].style.backgroundcolor = color;
       td2[n].style.backgroundcolor = color;
       td3[n].style.backgroundcolor = color;
       td4[n].style.backgroundcolor = color;
      }
     }
    
    
    
     /* 点击空格键停止 */
     this.document.onkeypress = function (ev) {
      // 32对应空格
      if (ev.keycode == 32 && flag) {
       clearinterval(timer);
       clearinterval(timer_color);
       flag = false;
       // 表格添加行
       addrow();
      }
     }
    
     // 排行榜
     var table = this.document.getelementbyid("leaderboard");
     // 玩家最终时间差记录
     var players = [];
     /* 表格添加行 */
     function addrow() {
      var rows = table.rows.length;
      var inserttr;
    
      var before_time_diff = count - 10 * 1000; // 基础时间差
      var after_time_diff; // 最终时间差
      if (before_time_diff < 0) {
       after_time_diff = math.abs(before_time_diff) * 2;
      } else {
       after_time_diff = before_time_diff;
      }
      // rows==1,说明是第一个玩家;否则遍历全部玩家
      if (rows != 1) {
       for (var i = 0; i < players.length; i++) {
        if (after_time_diff < players[i]) {
         console.log(after_time_diff, players[i])
         inserttr = table.insertrow(i + 1);
         break;
        }
       }
       if (inserttr == null) {
        inserttr = table.insertrow(rows);
       }
      } else {
       inserttr = table.insertrow(rows);
      }
    
      // 排名
      var insertd = inserttr.insertcell(0);
      insertd.innertext = rows
      // 玩家名
      var insertd = inserttr.insertcell(1);
      insertd.innertext = "玩家" + rows
      // 时间记录
      var insertd = inserttr.insertcell(2);
      insertd.innertext = id_m.innertext + ":" + id_s.innertext + ":" + id_ms.innertext
      // 是否罚时
      var insertd = inserttr.insertcell(3);
      if (before_time_diff < 0) {
       insertd.innertext = "是"
      } else {
       insertd.innertext = "否"
      }
      // 最终时间差
      var insertd = inserttr.insertcell(4);
      var m = handletime1(parseint(after_time_diff / 1000 / 60));
      var s = handletime1(parseint(parseint(after_time_diff / 1000 % 60)));
      var ms = handletime2(parseint(parseint(after_time_diff % 1000)));
      insertd.innertext = m + ":" + s + ":" + ms
    
      // 将玩家最终时间差信息加入数组players,并排序
      players.push(after_time_diff);
      players.sort(sortnum); // 注意,sort是对数组中的字符串进行排序,如果是数字需要自定义
      // 重置排名
      resetrank();
     }
     /* 数组中数字的排序(从小到大) */
     function sortnum(a, b) {
      return a - b;
     }
     /* 重置排名 */
     function resetrank() {
      var tr = document.getelementbyid("leaderboard").getelementsbytagname("tr");
      for (var i = 1; i < tr.length; i++) {
       tr[i].getelementsbytagname("td")[0].innertext = string(i);
      }
     }
    }

    更多有趣的经典小游戏实现专题,分享给大家:

    c++经典小游戏汇总

    python经典小游戏汇总

    python俄罗斯方块游戏集合

    javascript经典游戏 玩不停

    javascript经典小游戏汇总