<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>疯狂的打地鼠</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.map{
width: 400px;
height: 410px;
margin: 0 auto;
margin-top: 30px;
background-color: rgb(146,197,0);
}
h1{
color: red;
text-align: center;
}
img{
margin-top: 31px;
width: 100px;
height: 100px;
}
#Score{
width: 200px;
height: 100px;
background-color: gray;
float: right;
margin-top: -450px;
margin-right: 150px;
color: red;
font-size: 20px;
line-height: 100px;
text-align: center;
}
table td{
width: 200px;
height: 100px;
}
#colok{
width: 200px;
height: 100px;
background-color: blue;
float: right;
margin-top: -400px;
margin-right: 150px;
text-align: center;
color: white;
font-size: 20px;
line-height: 100px;
}
#counts{
width: 400px;
height: 30px;
background-color: gray;
margin-top: 10px;
margin-left: 33%;
text-align: center;
color: red;
font-size: 20px;
}
#Pause{
margin-left: 40%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
}
#Start,#Refresh,#Speed{
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 55px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
}
#cover{
margin-top: 0px;
position: absolute;
z-index: 2;
width: 800px;
height: 600px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
background :rgba(128,128,128,0.5);
color: red;
font-size: 30px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="main">
<h1>打地鼠</h1>
<!-- 地图块 -->
<div class="map">
<table>
<tr>
<!-- 坑的图片 -->
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
<tr>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
<tr>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
<td><img src="img/3.png"></td>
</tr>
</table>
<!-- 记录成绩的块 -->
</div>
<div id="Score">最佳记录:<span id="score">0</span>分</div>
<div id="counts">当前得分:<span id="nowScore">0</span>分</div>
<div id="colok"></div>
</div>
<!-- 暂停按钮 -->
<input type="button" name="name" value="Pause" id="Pause">
<!-- 开始按钮 -->
<input type="button" name="name" value="Start" id="Start">
<!-- 刷新按钮 -->
<input type="button" name="name" value="Refresh" id="Refresh">
<!-- 调节难度的按钮-->
<select id="Speed">
<option>普通型</option>
<option>一般型</option>
<option>困难型</option>
</select>
<div id="cover" style="display: none;"><span id="text"></span></div>
</body>
<script type="text/javascript">
//获取元素
var imgs = document.getElementsByTagName('img');
//设置随机数
var rank;
//获取计算分数的 span
var sscore = document.getElementById('score');
var newScore = document.getElementById('nowScore');
//定义变量记录分数
var count = 0;
// 定义记录最佳成绩的变量
var preScore = 0;
//localStorage.getItem(key):获取指定key本地存储的值
preScore = localStorage.getItem("bestScore");
//获取时间
var times =document.getElementById('colok');
//获取最后的结果 div
var cover = document.getElementById('cover');
// 最后的输出的文字
var text = document.getElementById('text');
//显示最佳成绩
sscore.innerHTML = preScore;
//定义变量控制游戏的进行
var play = true;
//定义变量控制速度
var sspeed = 1000;
//设置自调函数
//通过 play 和 时间来控制游戏的进程
if (play) {
setTimeout('chulai()',1000);
}else{
alert('11')
}
//为了能够开始
function mov(){
setTimeout('paole()',sspeed);
}
//设置出来的函数
function chulai(){
//设置开始/暂停和结束循环
if (play&&seconds>0) {
rank = Math.floor(Math.random()*9);
// 冒出来的图片
imgs[rank].src='img/2.png';
imgs[rank].style.marginTop="0px";
// 建立点击事件
imgs[rank].setAttribute('onclick','die()');
mov();
}
}
//设置跑了的函数
function paole(){
//设置开始/暂停和结束循环
if (play&&seconds>0) {
// 坑的图片
imgs[rank].src='img/3.png';
imgs[rank].style.marginTop='31px';
//移除点击
imgs[rank].removeAttribute('onclick');
setTimeout('chulai()',sspeed);
}
}
//设置被打中的函数
function die(){
// 被打中的图片
imgs[rank].src='img/6.png';
imgs[rank].style.marginTop='3px';
imgs[rank].removeAttribute('onclick');
// 记录分数
count++;
newScore.innerHTML=count;
// 分数和最佳成绩比较
if (count>preScore) {
sscore.innerHTML=count;
preScore=count;
}
//给本地保存最佳成绩
localStorage.setAttribute('bestScore',preScore);
}
//创建时间控制游戏进度
var seconds = 60;
var speed = 1000;
// 时间的方法
function creatTime(seconds,speed){
//判断时间是不是小于10
var txt = '剩余时间: '+((seconds>10)?seconds:'0'+seconds)+'秒';
// 将时间显示在页面上
times.innerHTML = txt;
// 按钮控制的逻辑
if (play) {
var timeId = setTimeout("creatTime(seconds--,speed)",speed);
}else{
clearTimeout(timeId);
}
// 如果时间结束的成绩判断
if (seconds==0) {
// 清除延时
clearTimeout(timeId);
//localStorage.setItem(key,value):将value存储到key字段
localStorage.setItem("bestScore",preScore);
// 显示隐藏的结果块
if(cover.style.display=='none'){
cover.style.display='block';
//如果没有成绩 输出的结果
if(count==undefined){
text.innerHTML = "当前成绩为:"+0+"分"+"<br/>"+"游戏结束!";
//localStorage.getItem(key):获取指定key本地存储的值
//如果有超过原来的最佳成绩
}else if(count==localStorage.getItem("bestScore")){
text.innerHTML = " 恭喜你打破记录,当前成绩为:"+count+"分"+"<br/>"+"游戏结束!";
//最后的结果
}else{
text.innerHTML = "当前成绩为:"+count+"分"+"<br/>"+"游戏结束!";
}
}
}
}
//调用方案
creatTime(seconds,speed);
//获取按钮
var pause = document.getElementById('Pause');
var start = document .getElementById('Start');
var refresh = document.getElementById('Refresh');
var dl = document.getElementById('Speed');
//创建按键
pause.onclick = function(){
play =false;
}
start.onclick = function(){
play=true;
mov();
//建立延时
timeId = setTimeout("creatTime(seconds--,speed)",speed);
}
refresh.onclick = function(){
window.location.reload();
}
dl.onclick = function(){
//通过改变速度来改变难度
if (dl.value=='普通型') {
sspeed = 700;
}else if (dl.value=='一般型') {
sspeed=600;
}else {
sspeed = 480;
}
}
</script>
</html>