<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠界面</title>
<style type="text/css">
.textAglin {
text-align: center;
}
.maindiv {
width: 510px;
height: 520px;
border: 1px solid black;
margin: 0px auto;
overflow: hidden;
}
.maindiv td {
line-height: 3em;
width: 97px;
height: 97px;
border: 1px solid white;
margin: 0px auto;
float: left;
background: url("00.jpg");
}
.mediumdiv {
width: 248px;
height: 130px;
border: 1px solid black;
margin: 10px auto;
text-align: center;
padding: 10px;
font-family: "楷体";
font-size: 15px;
line-height: 1.4em;
background-color: lightgray;
}
.mediumdiv input {
font-family: "楷体";
font-size: 15px;
}
img {
width: 97px;
height: 97px;
}
.level {
height: 25px;
}
</style>
</head>
<body onl oad="myInit()" class="textAglin">
<div id="main" class="maindiv">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mediumdiv">
<span>击中30或漏击30或满是地鼠 结束</span>
<br />
<span> 计分：<span id="showSource"></span>分 </span>
<br />
<span>漏击：<span id='miss'></span>只</span>
<br />
<span> 计时：<span id="showTime"></span>秒 </span>
<br />
<span>难度：N<span id='setLevel'></span></span>
<br />
<input id="myStartBtn" type="button" id="start" value="开始" onclick="startGame()" />
<input type="button" id="level" value="切换难度" onclick="myLevel()" />
<input type="button" id="over" value="结束" onclick="myOver()" />
</div>
</body>
<script>
let mylevel = document.getElementById('level')
let myStartBtn = document.getElementById('myStartBtn')
let showTime = document.getElementById('showTime')
let showSource = document.getElementById('showSource')
let mouses = document.getElementsByTagName('td');
let misss = document.getElementById('miss');
let levels = document.getElementById('setLevel');
let showMousId; //出现老鼠的定时器
let times; //倒计时定时器
let difficulty; //出现时间
let disappear; //消失时间
let source; //得分
let miss; //漏击
let mole; //随机数
let time; //倒计时
let level = 1; //难度等级
levels.innerHTML = level;
//初始化游戏
function myInit() { //准备工作 准备好图片对象 并且先统一隐藏起来 如果需要冒地鼠 找到对应的图片 控制显示就可以
difficulty = 1200;
disappear = 800;
time = 0;
showTime.innerHTML = time;
miss = 0;
misss.innerHTML = miss;
source = 0
showSource.innerHTML = source
mylevel.disabled = false
myStartBtn.disabled = false
}
//点击开始按钮 触发定时冒地鼠
function startGame() {
myShowMouse()
mouseHit()
let time = 60;
times = setInterval(function() {
//禁用开始游戏和切换难度按钮
mylevel.disabled = true
myStartBtn.disabled = true
time--;
showTime.innerHTML = time;
//剩余时间小于0游戏结束，并初始化游戏
if (time <= 0) {
clearInterval(times)
clearInterval(showMousId)
myInit()
alert('游戏结束！')
}
}, 1000)
}
//单次触发地鼠显示 显示之后需要自动隐藏(通过setTimeout)
function myShowMouse() {
showMousId = setInterval(function() {
//老鼠随机出现的位置，范围在0-多少个老鼠位
mole = Number.parseInt(Math.random() * mouses.length)
mouses[mole].innerHTML = '<img src="01.jpg"/>'
//定时器控制老鼠消失的时间和操作
setTimeout(function() {
mouses[mole].innerHTML = ''
}, disappear)
}, difficulty);
}
//打地鼠
function mouseHit() {
for (let i = 0; i < mouses.length; i++) {
//鼠标单击时触发事件
mouses[i].onclick = function() {
// 当前对象的子节点的长度不为0时，触发老鼠被击中的操作，得分增加，否则得分减少，漏击增加
if (this.children.length != 0) {
setTimeout(function() {
mouses[i].innerHTML = '<img src="02.jpg">'
setTimeout(function() {
mouses[i].innerHTML = ''
}, 300)
}, 300)
source++
} else {
source--
miss++
}
//判断得分，漏击情况
if (miss > 30) {
clearInterval(times)
clearInterval(showMousId)
myInit();
alert('游戏结束！漏击大于30！！')
} else if (source > 30) {
clearInterval(times)
clearInterval(showMousId)
myInit()
alert('恭喜通关！当前得分大于为：' + source)
} else if (source < -30) {
clearInterval(times)
clearInterval(showMousId)
myInit();
alert('游戏结束！当前分数小于30分：')
}
showSource.innerHTML = source
misss.innerHTML = miss
}
}
}
//切换难度 当前难度为1时单击切换为难度2，再次单击切换为难度1
function myLevel() {
if (level == 1) {
level = 2;
levels.innerHTML = level;
difficulty = 500;
disappear = 400;
} else if (level == 2) {
level = 1;
levels.innerHTML = level;
myInit();
}
}
//点击结束按钮 ，游戏结束
function myOver() {
clearInterval(times)
clearInterval(showMousId)
myInit()
alert('游戏结束！')
}
</script>
</html>