您的位置：首页 > 其它

第九周 技术博客发表 网页设计打地鼠游戏

2016-04-28 21:23 274 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打地鼠游戏</title>

<style type="text/css">
img{cursor:url('images/mouse.ani');}
</style>

<script language="JavaScript">
var no1,no2,no3,no4;
var gameTime,spaceTime,stayTime;
var button1,button2;
var time;
var sum=0;
var mouse=0;
function onGame(){
init();
no1=window.setInterval("showTime()",1000);
no2=setInterval("showImage()",1000);
}
function init(){
gameTime=document.getElementById("gameTime");
spaceTime=document.getElementById("spaceTime");
stayTime=document.getElementById("stayTime");
gameTime.disabled=true;
spaceTime.disabled=true;
stayTime.disabled=true;
button1=document.getElementById("button1");
button2=document.getElementById("button2");
button1.disabled=true;
button2.disabled=false;
time=parseInt(gameTime.value)*60;
sum=0;
mouse=0;
}

function showTime(){
document.getElementById("time").innerHTML=time;
time-=1;
if(time<=0){
esc();
}

}
function showImage(){
var images=document.getElementsByName("image");
var index=Math.floor(Math.random()*25);
images[index].src="images/01.jpg";
sum+=1;
no3=setTimeout("stopImage("+index+")",parseInt(stayTime.value)*1000);
}
function stopImage(index){

document.images[index].src="images/00.jpg";

}
function leaveImage(o){

o.src="images/00.jpg";

}
function clickMouse(o){
var str=o.src.substr(o.src.length-6,6);
if(str=="01.jpg"){
o.src="images/02.jpg";
mouse+=1;
no4=setInterval("leaveImage(o)",500);
}
}
function esc(){
window.clearInterval(no1);
window.clearInterval(no2);
window.clearTimeout(no3);
window.clearInterval(no4);
gameTime.disabled=false;
spaceTime.disabled=false;
stayTime.disabled=false;
button1.disabled=false;
var images=document.getElementsByName("image");
for(var i=0;i<images.length;i++){
images[i].src="images/00.jpg";
}
}
</script>
</head>

<table align="center">
<tr>
<td><font color="#0066FF">打地鼠游戏说明:</font></td>
</tr>
<tr>
<td>
<font color="#0066FF">在开始游戏之后，玩家要点击游戏的地鼠，如果打中了，就可以增加积分，如果没有打中，便会扣掉积分，现在开始游戏吧<br>
</font>
</td>
</tr>
<tr align="right">

</tr>
</table>

<br />
<br />

<table align="center" cellspacing="5">
<tr>
<td>
<table cellspacing="3">
<tr>
<td>--游戏时间:--</td>
<td><input type="text" width="6" id="gameTime" value="1"/> 分钟</td>
</tr>
<tr>
<td>--倒计时间:--</td>
<td><div id="time"></div></td>
</tr>
<tr>
<td>--地鼠出现间隔:--</td>
<td><input type="text" width="6" id="spaceTime" value="1"/> 秒钟</td>
</tr>
<tr>
<td>--停留时间:--</td>
<td><input type="text" width="6" id="stayTime" value="1"/> 秒钟</td>
</tr>
<tr>

</tr>
<tr align="center">
<td ><input type="button" value="开始游戏" id="button1" onclick="onGame()"/></td>
<td><input type="button" value="退出游戏" id="button2" disabled onclick="esc()"/></td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="3" bgcolor="white">
<tr>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
</tr>
<tr>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
</tr>
<tr>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
</tr>
<tr>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
</tr>
<tr>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
<td><img src="images/00.jpg" name="image" onclick="clickMouse(this)"/></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="text-align:center;">

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航