JavaScript實現(xiàn)打地鼠游戲
更新時間:2021年10月09日 17:07:27 作者:♡ 小宸軒的前端
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)打地鼠游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)打地鼠游戲的具體代碼,供大家參考,具體內(nèi)容如下
游戲說明:
點擊"開始游戲"按鈕,在圖中隨機產(chǎn)生老鼠,老鼠消失前單擊老鼠進行擊打,打中一次即可獲得100的積分,沒有打中老鼠,扣取100積分
css模塊
<style> #div0{ text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url("images/bg.jpg"); position: relative; } #div_top{ text-align: left; color:brown; width: 360px; height: 100px; position: absolute; left: 500px; } #div_left{ width: 350px; height: 320px; position: absolute; left: 300px; top: 150px; } #tab_data{ width:350px; height:320px; } #div_right{ width: 350px; height: 320px; position: absolute; right: 380px; top: 150px; } #tab{ width:320px; height:320px; } #tab td{ background-image:url("images/00.jpg"); background-repeat:no-repeat; background-position:center; } </style>
html模塊
<div id="div0"> <div id="div_top"> 游戲說明:<br/> 點擊"開始游戲"按鈕,在下圖中隨機產(chǎn)生老鼠,老鼠消失前單擊老鼠進行擊打,<br/> 打中一次即可獲得100的積分,沒有打中老鼠,扣取100積分??炜煨袆影?,考驗<br/>您的 反應和眼力!<br/> </div> <div id="div_left"> <table id="tab_data"> <tr> <th>游戲時間:</th> <td><input type="text" name="text_time" value="1" />分鐘</td> </tr> <tr> <th>倒計時:</th> <td><input type="text" name="text_CD" value="60" disabled="disabled"/>秒</td> </tr> <tr> <th>出現(xiàn)間隔:</th> <td><input type="text" name="text_hide" value="1" />秒</td> </tr> <tr> <th>停留時間:</th> <td><input type="text" name="text_show" value="1" />秒</td> </tr> <tr> <th>得分情況:</th> <td><span id="span_score"></span></td> </tr> <tr> <th colspan="2"> <input type="button" value="開始游戲" id="but_start"/> <input type="button" value="結束游戲" id="but_end"/> </th> </tr> </table> </div> <div id="div_right"> </div> </div>
js模塊
<script> var collTd=[];//記錄所有的td var oTdMouse;//記錄被選中的td //定義變量記錄頁面中的標簽元素 var oButStart,oButEnd; var oTextTime,oTextHide,oTimeShow,oTimeCD; var oSpanScore; //定義變量記錄時間參數(shù): var iAll,iCD,iShow,iHide,iCount,iGet; var iCDId,iRandomId,iShow,iChangeId; window.onload=function(){ //創(chuàng)建表格 createTable(); //給標簽元素變量賦值 init(); //給按鈕注冊事件 oButStart.onclick=startGame; oButEnd.onclick=endGame; } //開始游戲 function startGame(){ iAll=parseInt(oTextTime.value)*60; iCD=iAll; //每隔1秒鐘執(zhí)行一次倒計時 iCDId=window.setInterval(setCD,1000); iShow=parseInt(oTextShow.value); iHide=parseInt(oTextHide.value); iCount=0; iGet=0; //每隔iShow+Hide隨機一個td randomId(); iRandomId=window.setInterval(randomId,(iShow+iHide)*1000); oButStart.disabled="disabled"; oButEnd.disabled=""; } //隨機td function randomId(){ iCount++; var index=parseInt(Math.random()*collTd.length); oTdMouse=collTd[index]; //更改背景圖片 oTdMouse.style.backgroundImage="url('images/01.jpg')"; //等待show時間結束后 把背景圖片設置回來 iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",iShow*1000); } //設置倒計時 function setCD(){ iCD--; oTextCD.value=iCD; //每隔一秒鐘記錄一下分數(shù) var message="共"+iCount+"只,打中"+iGet+"只!"; oSpanScore.innerHTML=message.fontcolor("blue").bold(); if(iCD<=0){ endGame(); } } //結束游戲 function endGame(){ oButEnd.disabled="disabled"; oButStart.disabled=""; window.clearInterval(iCDId); window.clearInterval(iRandomId); } //給標簽元素變量賦值 function init(){ oButStart=document.getElementById("but_start"); oButEnd=document.getElementById("but_end"); oTextTime=document.getElementsByName("text_time")[0]; oTextCD=document.getElementsByName("text_CD")[0]; oTextHide=document.getElementsByName("text_hide")[0]; oTextShow=document.getElementsByName("text_show")[0]; oSpanScore=document.getElementById("span_score"); oTextCD.value=60; oButEnd.disabled="disabled"; } //動態(tài)生成表格 function createTable(){ var oDivRight=document.getElementById("div_right"); var oTab=document.createElement("table"); oTab.id="tab"; for(var i=0;i<6;i++){ var oTr=document.createElement("tr"); for(var j=0;j<5;j++){ var oTd=document.createElement("td"); oTr.appendChild(oTd); collTd.push(oTd); //給所有的td添加點擊事件 oTd.onclick=function(){ if(this==oTdMouse){ //判斷當前單元格的背景圖片是不是01.jpg if(this.style.backgroundImage.indexOf("01.jpg")!=-1){ //得一分 iGet++; //背景圖片更改為02.jpg oTdMouse.style.backgroundImage="url('images/02.jpg')"; //等待0.2秒更改為00.jpg iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",200); var message="共"+iCount+"只,打中"+iGet+"只!"; oSpanScore.innerHTML=message.fontcolor("blue").bold(); } } } } oTab.appendChild(oTr); } oDivRight.appendChild(oTab); } </script>
更多有趣的經(jīng)典小游戲實現(xiàn)專題,分享給大家:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
element plus表格的表頭和內(nèi)容居中的實現(xiàn)代碼
這篇文章主要介紹了element plus表格的表頭和內(nèi)容居中的實現(xiàn)代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01基于javascript實現(xiàn)仿百度輸入框自動匹配功能
這篇文章主要介紹了基于javascript實現(xiàn)仿百度輸入框自動匹配功能的相關資料,需要的朋友可以參考下2016-01-01Bootstrap的popover(彈出框)2秒后定時消失的實現(xiàn)代碼
Bootstrap Popover(彈出框)是使用定制的 Jquery 插件創(chuàng)建的。它可以用來顯示任何元素的一些信息。這篇文章主要介紹了Bootstrap的popover(彈出框)2秒后定時消失功能,需要的朋友參考下2017-02-02