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)容如下
一、說(shuō)明
本游戲頁(yè)面設(shè)計(jì)分為左右兩欄。左上為跑馬燈，左下為計(jì)時(shí)器和”START”按鈕；右上為排行榜，右下為游戲規(guī)則說(shuō)明。
跑馬燈用的是定時(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ī)則說(shuō)明 -->
<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í)候，請(qǐng)按下鍵盤的空格鍵，系統(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;
}
/* 排行榜滾動(dòng)界面 */
#right .board1 {
height: 350px;
width: 100%;
border: 1px solid #344665;
overflow-y: scroll;
padding: 5px;
background-color: rgba(10, 0, 6, 0.2);
}
/*滾動(dòng)條整體樣式*/
#right>div::-webkit-scrollbar {
background-color: rgba(219, 200, 212, 0.4);
}
/*滾動(dòng)條里面小方塊*/
#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ī)則說(shuō)明 */
#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; // 存儲(chǔ)跑馬燈原來(lái)的顏色，用于還原
/* 開始按鈕 */
var start = this.document.getElementById("start");
start.onclick = function () {
start.blur(); // 移除焦點(diǎn)
if (flag) {
clearInterval(timer); // 處理沒(méi)按空格鍵停止就再次點(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對(duì)應(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，說(shuō)明是第一個(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是對(duì)數(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)專題，分享給大家：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中常見(jiàn)的Polyfill介紹
在多姿多彩的JavaScript世界,Polyfill如同一座架在瀏覽器兼容性鴻溝之上的橋梁,本文將介紹常見(jiàn)的JavaScript Polyfill兼容方案,并舉例說(shuō)明它們的應(yīng)用,需要的可以參考下2023-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS字符串補(bǔ)全方法padStart()和padEnd()
這篇文章主要介紹了JS字符串補(bǔ)全方法padStart()和padEnd()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
把項(xiàng)目里很土的彈窗，改成了遮罩層顯示，現(xiàn)在感覺(jué)好多了。在這里創(chuàng)建一個(gè)div和body一樣大小，這樣就可以把整個(gè)頁(yè)面全部蓋住了，具體實(shí)現(xiàn)祥看本文，希望可以幫助到你2013-05-05
javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值，用于表單驗(yàn)證。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
使用JavaScript實(shí)現(xiàn)連續(xù)滾動(dòng)字幕效果的方法
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)連續(xù)滾動(dòng)字幕效果的方法,文中給出了瀏覽器端運(yùn)行的示例腳本,需要的朋友可以參考下2015-07-07
圖片自動(dòng)更新(說(shuō)明)...2006-10-10
這篇文章主要介紹了JavaScript如何獲取某年某月的最后一天，需要的朋友可以參考下2014-06-06
利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見(jiàn)方法
這篇文章主要給大家介紹了關(guān)于利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見(jiàn)方法,其實(shí)有很多方法可以判斷數(shù)據(jù)是否是數(shù)組或字符串,需要的朋友可以參考下2023-07-07
通用javascript腳本函數(shù)庫(kù) 方便開發(fā)
javascript 在 WEB 編程中能起到很大的作用，將一些常用的功能寫成javascript類庫(kù)。2009-10-10