HTML5 打地鼠简化版

1、canvas 画图的时候相对的坐标是画板‘

2、浏览器兼容性问题，在IE下面是clientX clientY

3、修改小球的运动轨迹可以在addX和addY上面下功夫 ~

4、修改容人值可以修改 catch_ball函数 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var ballX,ballY;
        var addX,addY;
        var intervalId ;

        var context ;
        var canvas ;
        var whdth;
        var height = 500;
        
        function catch_ball(ev){
            alert('catch');
            var x = ev.pageX;
            var y = ev.pageY;
            // get position relative to canvas .
            
            var relativeX = x - document.getElementById("mycanvas").offsetLeft;
            var relativeY = y - document.getElementById("mycanvas").offsetTop;
            
            //judge  whether  clicked  the ball
            if(-5<(relativeX - ballX)&&(relativeX - ballX)<=5){
                 if(-5<(relativeY - ballY)&&(relativeY - ballY)<=5){
                     alert('congratulation  to  you  ~~~ ,you are win .');
                     clearInterval(intervalId);
                     document.getElementById("start_btn").disabled = "";
                }
            }
        }
        
        function windowLoad(){
            document.getElementById("mycanvas").onclick = catch_ball;
        }
        
        function jump(){
           context.clearRect(0,0,width,height);
           context.save();
           //draw  ball table .
           context.fillStyle = "lightgreen";
           context.strokeStyle = "black";
           context.lineWidth = 3;
           context.fillRect(3,3,width -6,height-6);
           context.strokeRect(3,3,width-6,height-6);
           
           //draw ball .
           context.beginPath();
           context.fillStyle = "blue";
           context.arc(ballX,ballY,5,0,2*Math.PI,false);
           ballX += addX;
           ballY += addY;
           //alert(ballX+":"+ballY);
           //modify position .
           if(ballX<5){
               ballX = 5;
               addX = -addX;
           }
           
           if(ballY <5){
               ballY = 5;
               addY = -addY;
           }
           
           if(ballX>width-6){
               ballX = width-6;
               addX = -addX;
           }
           
           if(ballY>height-6){
               ballY = height-6;
               addY = -addY;
           }
           
           context.closePath();
           context.fill();
           context.restore(); 
        }
        
        function startclick(){
           // alert('game  start ');
            canvas = document.getElementById("mycanvas");
            context = canvas.getContext("2d");
            
            width = canvas.width;
            height = canvas.height;
            //alert(height);
            //init  ball  init position .
            ballX = parseInt(Math.random()*width);
            ballY = parseInt(Math.random()*height);
            
            addX = -5;
            addY = -5;
            
            jump();
            
            //test
            //context.fillStyle = "red";
            //context.fillRect(5,5,20,20);
            intervalId = setInterval("jump()",200);
            document.getElementById("start_btn").disabled = "disabled";
        }

    </script>
  </head>
  <body onload="windowLoad();">
      <h1> jump  game  </h1>
      <H2>click  the  start button  , then   click  jumping  ball .</H2>
      <input type="button"  value="start game" id="start_btn" onclick="startclick();"/>
      <div style="width:600px;height:550px;border:blue solid 2px;">
          <canvas   id="mycanvas" width="500px" height="500px"> broswer is not support ！</canvas>
      </div>
  </body>
</html>

　　

posted @ 2012-08-12 10:28  美一天  阅读(3602)  评论(0)    收藏  举报