HTML+js写的简单的打地鼠游戏，还有待完善_前端js'写打地鼠游戏-CSDN博客

本文链接：https://blog.csdn.net/wangkaiyuan110/article/details/47811713

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Keywords" content="打地鼠游戏,dishu,youxi">
<meta http-equiv="description" content="这是一个用js写的简单的游戏">
<script type="text/javascript" src="js/dishu.js"></script>
<title>游戏</title>
<style Type="text/css">
*{ margin:0px; padding:0px; border:0px;}
/*start navi*/
.navi{ width:100%; height:27px; background:green;}
.navi ul{ margin-left:200px;}
.navi ul li{ float: left; list-style:none; font-family:"微软雅黑"; font-size:14px; font-weight:bold;color:white; margin-left: 75px; margin-right:75px;margin-top: 3px;}
/*navi end*/
/*start game_content*/
.game_content{ display:none; padding-top: 120px;}
.game_content input{display:block; width:100px; height:30px;border-radius: 5px; background:red; color:white; font-weight:bold; margin:10px auto;}
.game1{margin:0 auto;}
.keng_bg{ width:70px; height:70px; float:left;}
/*game_content end*/
</style>
</head>
<body>

<div class="navi">
<ul>
<li>打地鼠</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</div>


<div class="game_content" style="background:pink; width:100%; height:600px;">
<input type="button" value="开始游戏" οnclick="dishu()" /><span id="score"></span>
<div class="game1" style="width:210px; height:210px;">

<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
<div class="keng_bg"><img src="images/keng.jpg"/></div>
</div>
</div>
<div class="game_content" style="background:orange; width:100%; height:600px;"></div>
<div class="game_content" style="background:red; width:100%; height:600px;"></div>
<div class="game_content" style="background:yellow; width:100%; height:600px;"></div>

</body>

</html>

js代码：

window.οnlοad=function(){
init();
}
function init(){
var limouse=document.getElementsByClassName("navi")[0].getElementsByTagName("li");
var gamecontent=document.getElementsByClassName("game_content");
var i;
console.log(limouse);
/*添加每个li的onmouseover事件*/
for(i=0; i<limouse.length;i++){
console.log(limouse[i].innerHTML);
limouse[i].index=i;
gamecontent[i].index=i;
limouse[i].οnmοuseοver=function(){
limouse[this.index].style.cursor="pointer";
}
limouse[i].οnclick=function(){
disapear();
gamecontent[this.index].style.display="block";
}
}
}
function disapear(){//使gamecontent消失
var gamecontent=document.getElementsByClassName("game_content");
for(var i=0;i<gamecontent.length;i++){
gamecontent[i].style.display="none";
}
}
function dishu(){
var pic=document.getElementsByClassName('game1')[0].getElementsByTagName('img');
var dishu=[0,0,0,0,0,0,0,0,0];
var xiaoshi=[0,0,0,0,0,0,0,0,0];
var count=0;
var score=0;
for(var i=0;i<pic.length;i++){
pic[i].index=i;
pic[i].οnclick=function(){
if(dishu[this.index]==1){
pic[this.index].src="images/za.jpg";
score+=10;
dishu[this.index]=3;
document.getElementById('score').innerHTML=score;
console.log(score);
//console.log(pic[this.index]);
}else{
score-=10;
document.getElementById('score').innerHTML=score;
console.log(score);
if(score<=0){
show();
alert("游戏失败");
}
}
}
}
var timer=setInterval(function(){
for(var i=0;i<xiaoshi.length;i++){
if(dishu[i]==3){
pic[i].src="images/keng.jpg";
dishu[i]=0;
}
if(xiaoshi[i]==count){
pic[i].src="images/keng.jpg";
dishu[i]=0;
xiaoshi[i]=0;
}
}
var num=Math.random()*9;
num=num-num%1;
while(dishu[num]==1){
num=nextkeng(dishu,num,0);
}
if(num!=-1){
pic[num].src="images/dishu.jpg";
dishu[num]=1;
xiaoshi[num]=count+2;
}
count++;
}, 1000);

}
function nextkeng(a,num,count){
if(count==a.length){
return -1;
}
if(num==a.length){
num=0;
}
if(a[num]==1){
return nextkeng(a,num+1,count+1);
}else{
return num;
}
}
function show(){
clearInterval(timer);
}