Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲
更新時(shí)間：2020年05月27日 09:16:50 作者：Samven_7
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲的具體代碼，供大家參考，具體內(nèi)容如下
一、說明
本游戲頁面設(shè)計(jì)分為左右兩欄。左上為跑馬燈，左下為計(jì)時(shí)器和”START”按鈕；右上為排行榜，右下為游戲規(guī)則說明。
跑馬燈用的是定時(shí)器，循環(huán)走一遍。計(jì)時(shí)器是從”00:00:000”開始計(jì)時(shí)，需要點(diǎn)擊”START”按鈕開始游戲，停止游戲是點(diǎn)擊空格鍵。游戲計(jì)算的是停止時(shí)間時(shí)刻和”00:10:000”時(shí)刻，也就是和10秒整的時(shí)間差。注意如果是在10秒前按下空格鍵停止，是有懲罰的，懲罰為之前計(jì)算的時(shí)間差翻倍。最后是按最終時(shí)間差從小到大順序進(jìn)行排名。
二、效果展示
三、代碼
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>計(jì)時(shí)小游戲</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>
<!-- 計(jì)時(shí)器 -->
<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>時(shí)間記錄</th>
<th>是否罰時(shí)</th>
<th>時(shí)間差</th>
</tr>
</table>
</div>
<!-- 游戲規(guī)則說明 -->
<div class="board2">
<div>
<div style="font-size: 1.5em;">計(jì)時(shí)游戲規(guī)則：</div>
<p>  <span>點(diǎn)擊"START"開始游戲，當(dāng)秒表計(jì)時(shí)到10秒的時(shí)候，請按下鍵盤的空格鍵，系統(tǒng)將記錄按下鍵盤時(shí)刻秒表與10秒時(shí)刻的時(shí)間差，并按照最終時(shí)間差從小到大順序進(jìn)行排名。</span>
如果想要重新開始游戲，只需再次點(diǎn)擊"START"。
<br>  
<span style="color: rgb(202, 59, 59);">注意：如果在秒表10秒前按下空格鍵，屬于“搶跑”違規(guī)，需要罰時(shí)，最終時(shí)間差翻倍！</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;
}
/* 計(jì)時(shí)器：分、秒、毫秒 */
#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%;
}
/* 游戲規(guī)則說明 */
#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; // 記錄開始后當(dāng)前的毫秒數(shù)
var timer; // 定時(shí)器返回值，用于停止定時(shí)器
var timer_color; // 定時(shí)器返回值，用于停止跑馬燈
var flag = false; // 增加判斷，防止重復(fù)點(diǎn)擊開始導(dǎo)致有多個(gè)定時(shí)器同時(shí)計(jì)數(shù)
/* 計(jì)時(shí) */
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(); // 移除焦點(diǎn)
if (flag) {
clearInterval(timer); // 處理沒按空格鍵停止就再次點(diǎn)擊"START"的情況
}
flag = true;
/* 計(jì)時(shí)器 */
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);
}
/* 處理時(shí)間(分、秒) */
function handleTime1(num) {
if (num < 10) {
return '0' + num;
}
return num;
}
/* 處理時(shí)間(毫秒) */
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;
}
}
/* 點(diǎn)擊空格鍵停止 */
this.document.onkeypress = function (ev) {
// 32對應(yīng)空格
if (ev.keyCode == 32 && flag) {
clearInterval(timer);
clearInterval(timer_color);
flag = false;
// 表格添加行
addRow();
}
}
// 排行榜
var table = this.document.getElementById("leaderboard");
// 玩家最終時(shí)間差記錄
var players = [];
/* 表格添加行 */
function addRow() {
var rows = table.rows.length;
var insertTr;
var before_time_diff = count - 10 * 1000; // 基礎(chǔ)時(shí)間差
var after_time_diff; // 最終時(shí)間差
if (before_time_diff < 0) {
after_time_diff = Math.abs(before_time_diff) * 2;
} else {
after_time_diff = before_time_diff;
}
// rows==1，說明是第一個(gè)玩家；否則遍歷全部玩家
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
// 時(shí)間記錄
var inserTd = insertTr.insertCell(2);
inserTd.innerText = id_M.innerText + ":" + id_S.innerText + ":" + id_MS.innerText
// 是否罰時(shí)
var inserTd = insertTr.insertCell(3);
if (before_time_diff < 0) {
inserTd.innerText = "是"
} else {
inserTd.innerText = "否"
}
// 最終時(shí)間差
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
// 將玩家最終時(shí)間差信息加入數(shù)組players，并排序
players.push(after_time_diff);
players.sort(sortNum); // 注意，sort是對數(shù)組中的字符串進(jìn)行排序，如果是數(shù)字需要自定義
// 重置排名
resetRank();
}
/* 數(shù)組中數(shù)字的排序（從小到大） */
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);
}
}
}
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript獲取移動設(shè)備型號的實(shí)現(xiàn)代碼(JS獲取手機(jī)型號和系統(tǒng))
這篇文章主要介紹了JavaScript獲取移動設(shè)備型號的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03
JavaScript 數(shù)組運(yùn)用實(shí)現(xiàn)代碼
復(fù)習(xí)一下JS中數(shù)組的運(yùn)用。學(xué)習(xí)js數(shù)組的朋友可以參考下。2010-04-04
JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
利用JS如何計(jì)算字符串所占字節(jié)數(shù)示例代碼
因?yàn)樽罱?xiàng)目有個(gè)需求要用js計(jì)算一串字符串寫入到localStorage里所占的內(nèi)存，所以便有了這篇文章，下面這篇文章主要給大家介紹了關(guān)于利用JS如何計(jì)算字符串所占字節(jié)數(shù)的相關(guān)資料，需要的朋友可以參考下。2017-09-09
Webpack?是前端工程化常用的靜態(tài)模塊打包工具,在合適的時(shí)機(jī)通過?Webpack?提供的?API?改變輸出結(jié)果,使?Webpack?可以執(zhí)行更廣泛的任務(wù),擁有更強(qiáng)的構(gòu)建能力,本文將介紹?Tapable?的基本使用以及底層實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)可搜索下拉框定制組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
escape()、encodeURI()、encodeURIComponent()三種方法都能對一些影響URL完整性的特殊字符進(jìn)行過濾。2010-11-11
這篇文章主要介紹了Cocos Creator 模塊化腳本，想加深學(xué)習(xí)CocosCreator腳本的同學(xué)，一定要看一下2021-04-04
右下角彈出提示框想必大家不會陌生吧，本文簡單的為大家實(shí)現(xiàn)一個(gè)，具體代碼如下，有需求的朋友可以參考下2013-08-08
微信JSSDK實(shí)現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器
這篇文章主要介紹了微信JSSDK實(shí)現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11