首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript实现秒表计时游戏

Posted in Javascript onMay 27, 2020

本文实例为大家分享了javascript实现秒表计时游戏的具体代码，供大家参考，具体内容如下

一、说明

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

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

二、效果展示

Javascript实现秒表计时游戏

三、代码

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>  <span>点击"START"开始游戏，当秒表计时到10秒的时候，请按下键盘的空格键，系统将记录按下键盘时刻秒表与10秒时刻的时间差，并按照最终时间差从小到大顺序进行排名。</span>
      如果想要重新开始游戏，只需再次点击"START"。
      <br>  
      <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);
  }
 }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Javascript实现秒表计时游戏

- Author -

Samven_7

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
JavaScript实现猜数字游戏
May 20 #Javascript
Vue 打包体积优化方案小结
May 20 #Javascript
vue实现输入框自动跳转功能
May 20 #Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 #Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 #Javascript
Vue3 的响应式和以前有什么区别，Proxy 无敌？
May 20 #Javascript
新加坡购物网站(41) CPU(2) 英国购物网站(954) 爱尔兰购物网站(30) AE3805(1) 巴西购物网站(71) SLi Minor 2020(63) 香港购物网站(84) 美国购物网站(1542) 天梯图(1)
You might like
php pki加密技术(openssl)详解
2013/07/01 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP操作redis实现的分页列表，新增，删除功能封装类与用法示例
2018/08/04 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Kathmandu澳洲户外商店：新西兰户外运动品牌
2017/11/12 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
校园广播稿500字
2014/02/04 职场文书
法律进社区实施方案
2014/03/21 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
会计电算化专业求职信
2014/06/10 职场文书
农村文化活动总结
2014/08/28 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
2015年环保局工作总结
2015/05/22 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
2019年度开业庆典祝福语大全！
2019/07/05 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python