JavaScript實現(xiàn)打地鼠游戲
更新時間：2021年10月09日 17:07:27 作者：♡ 小宸軒的前端
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)打地鼠游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xià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/>
點擊"開始游戲"按鈕，在下圖中隨機產生老鼠，老鼠消失前單擊老鼠進行擊打，<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>
更多有趣的經典小游戲實現(xiàn)專題，分享給大家：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在制作前端頁面的過程中,經常需要用到JavaScript進行邏輯處理,很多時候都需要對字符串進行操作,這篇文章主要給大家介紹了關于JavaScript字符串操作的四個實用技巧,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JS未跨域操作iframe里的DOM 的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
下面小編就為大家?guī)硪黄狫S函數(shù)的定義與調用方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了懸浮廣告方法日常收集整理的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了VSCode 配置uni-app的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家介紹了Blob對象實現(xiàn)文件上傳下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了JavaScript運動框架的第一部分，解決速度正負取整問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JS回調函數(shù),結合實例形式深入分析了js回調函數(shù)的概念、原理、使用方法及相關操作注意事項,需要的朋友可以參考下2019-10-10
JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位,本文給大家提到js如何限制input輸入框只能輸入數(shù)字問題，需要的朋友可以參考下2019-11-11