关闭

打地鼠

158人阅读 评论(0) 收藏 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title></title>

//流程为:playGame()-showMouse() & checkMouse() -checkScore()-leverUp() & InnitalGame().

<script type="text/javascript">
//定义names来接受img所有的元素
var names = document.getElementsByTagName("img");
//定义index接受随机产生的数字作为老鼠出现的位置
  var index = 0 ;
  //
   var number;
   //score来保存最终得分
   var score=0;
   //times来接受地鼠1计时器
   var times;
   //定义times2来接受地鼠2计时器
   var times2;
   //定义index2来接受第二个随机数字作为第二只老鼠出现的位置
   var index2 = 0;
   //定义gk关卡来确定
   var gk = 1;
   
   //定义playgame()方法 来实现第一次开始时启动游戏
function playGame(){
//第一个计时器
times=setInterval(showMouse,1000);
}

//定义一个showMouse()方法来实现将老鼠的图片展现
function showMouse(){
//第一个替换为空,它的作用是来覆盖掉计时器第二次调用时第一次剩余的图片
names[index].src = "img/00.jpg";
//随机产生一个数来作为老鼠出现的位置
index = parseInt(Math.random()*names.length);
//将产生的数对应的位置改为老鼠的图片
names[index].src = "img/01.jpg";
}

//定义第二个展现老鼠的方法,在第二关时使用
function showMouse2(){
names[index2].src = "img/00.jpg";
index2 = parseInt(Math.random()*names.length);
names[index2].src = "img/01.jpg";
}

//定义一个checkMouse方法,来确定点击的位置是否有老鼠图片
function checkMouse(obj){
//通过接受点击的位置的图片的地址的后6位数字,与老鼠的后六位比较是否相同来确定是否点中老鼠图片
var str = obj.src.substr(obj.src.length-6,6);
//如果点中,则替换掉当前图片为老鼠被打中的图片,同时加100分
if(str == "01.jpg"){
obj.src = "img/02.jpg";
score = score+100;
}
//将所得分数显示在body中
document.getElementById("fenshu").innerHTML=score;
//调用checkScore方法来确定是否达到目的分数
checkScore();
}

//定义checkScore方法来检查是否达到目标分数来升级
function checkScore(){
if ( score == 1000&& gk ==1){
alert("进入下一关");
//清除第一个老鼠的计时器
clearInterval(times);
//将关卡更换为2
gk=2;
//定义speed变量来改变老鼠出现的速度
var speed=800;
//调用levelUp()方法来对地图进行升级
levelUp();
//设置两个时间计时器来来重复调用showMouse方法
times = setInterval(showMouse,speed);
times2 = setInterval(showMouse2,speed);
//自调用checkScore)()方法,检验是否到达2000分,如果到达则结束游戏
checkScore();
}else if( score == 2000&& gk == 2){
alert("恭喜通关,游戏结束");
//关闭两个计时器
   clearInterval(times);
   clearInterval(times2);
//结束游戏并且初始化界面
innitalGame();
}
}
//定义一个方法来对地图进行升级
function levelUp(){
var js = gk+2;
//产生一个新的table 它的长宽为js确定
var inHTML = "";
for(var i = 0; i <js  ;i++){
inHTML = inHTML + "<tr>";
for(var j = 0 ; j < js; j++){
inHTML = inHTML + "<td><img src='img/00.jpg' onclick='checkMouse(this)'/></<td>"
}
inHTML = inHTML + "</tr>";
}
document.getElementById("table").innerHTML = inHTML;
//将关卡显示改变
document.getElementById("guanka").innerHTML = 2;


}

//初始化方法
function innitalGame(){
document.getElementById("fenshu").innerHTML = 0;
document.getElementById("guanka").innerHTML = 1;
var inHTML = "";
for(var i = 0; i <3 ;i++){
inHTML = inHTML + "<tr>";
for(var j = 0 ; j <3; j++){
inHTML = inHTML + "<td><img src='img/00.jpg' onclick='checkMouse(this)'/></<td>"
}
inHTML = inHTML + "</tr>";
}
document.getElementById("table").innerHTML = inHTML;

}

</script>
</head>
<body>
<p align="center"> <input type="button" value="开始" onclick="playGame()" /></p>
<p align="center">你的分数是:<span id ="fenshu">0</span>&nbsp;&nbsp;关卡为:<span id = "guanka">1</span></p>
<table border="1px" align="center"id="table">
<tr>
<!-- 将图片定义为可点击的,同时将checkMouse()方法设为带参的,这样就可以用this指针指向这个图片-->
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
</tr>
<tr>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
</tr>
<tr>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
<td><img onclick="checkMouse(this)" src="img/00.jpg"/></td>
</tr>
</table>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:860次
    • 积分:85
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条