首页
所有分类
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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
JavaScript如何判断对象有某属性
Jul 03 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
缓冲区(1) json_extract(1) ant design(2) JOIN(1) form表单(1) NoSQL(1) 变量提升(1) cypress(1) 弹窗(1) netty(1)
You might like
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP控制反转（IOC）和依赖注入（DI）
2017/03/13 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python映射拆分操作符用法实例
2015/05/19 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
西班牙创意礼品和小工具网上商店：Curiosite
2016/07/26 全球购物
企划主管岗位职责
2013/12/12 职场文书
新春文艺演出主持词
2014/03/27 职场文书
超市创业计划书
2014/04/24 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
设备技术员岗位职责
2015/04/11 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS