JS 打地鼠 

<!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>
    <title>Print Game</title>
    <script type="text/javascript" src="jquery-1.6.js"></script>
    <script type="text/javascript">
        $(function(){
        
            //全局变量
            var chars=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1","2","3","4","5","6","7","8","9");               //字符数组
            var char_num=chars.length;                                  //随机的字符数字
            var mainpanel_width=400;                                    //主区域宽度
            var mainpanel_height=500;                                   //主区域高度
            
            var totalNum=25;        //字符总数
            var hitCount=0;         //击中数
            var leftCount=0;        //页面剩余数
            
        
            //设置主区域的边界
            $("#mainpanel").width(mainpanel_width).height(mainpanel_height);
            
            
           //产生一个随机数   从开始覆盖上边界
           function randNum(under, over){
                switch(arguments.length){
                case 1: return parseInt(Math.random()*under+1)-1;
                case 2: return parseInt(Math.random()*(over-under+1) + under)-1;
                default: return 0;
                }
            }
   
            //产生一个随机的颜色
            function randColor(){
                var colors=new Array("1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); 
                var color="#";
                for(var i=0;i<6;i++)
                {
                    color+=colors[randNum(colors.length)];
                }
                return color;
            }
              
              
            //生产一个字符
            function productChar(){
                leftCount++;
                $("#leftCount").text(leftCount);
                return $("<div class='char'>"+chars[randNum(char_num)]+"</div>").css({"margin-top":randNum(0,mainpanel_height-30),"margin-left":randNum(0,mainpanel_width-30),"background":randColor(),"color":"black"});
            }
            
            
            //定时产生字符
            var tidck;
            function startGame(){
             tidck=window.setInterval(function(){
                 //game success
                 if(leftCount+hitCount==totalNum){
                     alert("game over,your score is "+hitCount*(100/totalNum));
                    stopGame();
                    return false;
                 }
                
                $("#mainpanel").append(productChar());
                 
                
            },randNum(300,600));
            }
            
            function stopGame()
            {
              clearInterval(tidck);
               $(".char").each(function(){
                    $(this).remove();
                });
                hitCount=0;
                leftCount=0;
                $("#hitCount").text("+0")
                $("#leftCount").text("0");
            }
            
            $("#btnStart").click(function(){
                startGame();
            });
             
            
            //监听键盘事件
          $(document).keydown(function(event){
                  
                  var target=String.fromCharCode(event.keyCode);
                  
                  $(".char").each(function(){
                    if(target==$(this).text())
                    {
                        $(this).hide(300,function(){
                        $(this).remove();});
                        hitCount++;
                        leftCount--;
                        $("#hitCount").text("+"+hitCount).animate({fontSize:"3em"},"fast").animate({fontSize:"1em"});
                        $("#leftCount").text(leftCount);
                        return false;
                    }
                  });
            });
        });
    </script>
    
    <style type="text/css">
        body{
           font-family:cursive;
        }
        input{
           font-family:cursive;
        }
        .char{
            position:absolute;
            width:30px;
            height:30px;
            font-size:20p;
            text-align:center;
        }
    </style>
    
</head>
<body>

<div id="mainpanel" style="border:solid 2px gray;float:left;">

</div>
<div id="rightpanel" style="border:solid 2px gray;width:200px;height:500px;float:left;margin-left:20px;">
    <input id="btnStart" type="button" value="Start" />
    <br/>
    hit：
    <div id="hitCount" style=" height:40px;">
    +0
    </div>
    
    <br/>
    left：
    <div id="leftCount">
    0
    </div>
      
    
</div>
</body>
</html>

截图：

posted on 2011-10-11 11:46  寂寞成灾  阅读(221)  评论(0)    收藏  举报

导航