Javascript實現(xiàn)秒表計時游戲
本文實例為大家分享了javascript實現(xiàn)秒表計時游戲的具體代碼,供大家參考,具體內(nèi)容如下
一、說明
本游戲頁面設計分為左右兩欄。左上為跑馬燈,左下為計時器和”START”按鈕;右上為排行榜,右下為游戲規(guī)則說明。
跑馬燈用的是定時器,循環(huán)走一遍。計時器是從”00:00:000”開始計時,需要點擊”START”按鈕開始游戲,停止游戲是點擊空格鍵。游戲計算的是停止時間時刻和”00:10:000”時刻,也就是和10秒整的時間差。注意如果是在10秒前按下空格鍵停止,是有懲罰的,懲罰為之前計算的時間差翻倍。最后是按最終時間差從小到大順序進行排名。
二、效果展示
三、代碼
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> <!-- 游戲規(guī)則說明 --> <div class="board2"> <div> <div style="font-size: 1.5em;">計時游戲規(guī)則:</div> <p>  <span>點擊"START"開始游戲,當秒表計時到10秒的時候,請按下鍵盤的空格鍵,系統(tǒng)將記錄按下鍵盤時刻秒表與10秒時刻的時間差,并按照最終時間差從小到大順序進行排名。</span> 如果想要重新開始游戲,只需再次點擊"START"。 <br>   <span style="color: rgb(202, 59, 59);">注意:如果在秒表10秒前按下空格鍵,屬于“搶跑”違規(guī),需要罰時,最終時間差翻倍!</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%; } /* 游戲規(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; // 記錄開始后當前的毫秒數(shù) var timer; // 定時器返回值,用于停止定時器 var timer_color; // 定時器返回值,用于停止跑馬燈 var flag = false; // 增加判斷,防止重復點擊開始導致有多個定時器同時計數(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(); // 移除焦點 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 // 將玩家最終時間差信息加入數(shù)組players,并排序 players.push(after_time_diff); players.sort(sortNum); // 注意,sort是對數(shù)組中的字符串進行排序,如果是數(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript獲取移動設備型號的實現(xiàn)代碼(JS獲取手機型號和系統(tǒng))
這篇文章主要介紹了JavaScript獲取移動設備型號的實現(xiàn)代碼,需要的朋友可以參考下2018-03-03JavaScript 數(shù)組運用實現(xiàn)代碼
復習一下JS中數(shù)組的運用。學習js數(shù)組的朋友可以參考下。2010-04-04JavaScript進階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關于JavaScript進階教程之函數(shù)的定義、調(diào)用及this指向問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下2022-09-09利用JS如何計算字符串所占字節(jié)數(shù)示例代碼
因為最近項目有個需求要用js計算一串字符串寫入到localStorage里所占的內(nèi)存,所以便有了這篇文章,下面這篇文章主要給大家介紹了關于利用JS如何計算字符串所占字節(jié)數(shù)的相關資料,需要的朋友可以參考下。2017-09-09微信JSSDK實現(xiàn)打開攝像頭拍照再將相片保存到服務器
這篇文章主要介紹了微信JSSDK實現(xiàn)打開攝像頭拍照再將相片保存到服務器,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11