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


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

  • 相关阅读:
    ResGen.exe 生成resources文件方法 [转]
    C#【Winform】带参启动外部EXE
    SBO的5个开发原则机遇只给有准备的人[转]
    在SQL中插入临时表时使用自动增长的数据字段
    c# 强制退出
    C#实现SQL全库检索数据比较使用DataReader与DataAdapter+Datatable效率,差距惊人!
    推荐一个C#代码混淆器 .NET Reactor
    面向对象软件设计——设计模式学习
    AbstarctFactory模式——设计模式学习
    插入排序算法(直接,折半,希尔)
  • 原文地址:https://www.cnblogs.com/youu/p/5444301.html
Copyright © 2020-2023  润新知