首页
所有分类
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 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
Javascript中typeof 用法小结
May 12 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
FS1016(1) 绿林侠盗(1) 死亡搁浅(1) 铁拳(1) 原神(1) 大话西游(1) 模拟人生(1) AGC(1) 吸血鬼(1) 74HC4066(1)
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php csv操作类代码
2009/12/14 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
浅谈Node.js：理解stream
2016/12/08 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue router导航守卫（router.beforeEach()）的使用详解
2019/04/19 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
js实现表格数据搜索
2020/08/09 Javascript
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Django实现跨域的2种方法
2019/07/31 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
意大利奢侈品购物网站：Giglio
2018/01/05 全球购物
美国棒球装备和用品商店：Baseball Savings
2018/06/09 全球购物
Clarks西班牙官方在线商店：clarks鞋
2019/05/03 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
《正面管教》读后有感：和善而坚定的旅程
2019/12/19 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android