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

<!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>

原文地址:https://www.cnblogs.com/youu/p/5444301.html