html5+jquery, 聪明的子弹完整版

这里给出了跟踪飞机的子弹完整版。子弹会一直跟踪直到打到飞机。打到后会提示坚持了几秒。
有个小bug，打到后是先出提示再变红的，可以改下，变成先变红，再提示。
另外可以改成子弹飞行10s后自动消失（重头再来）
还可以改成子弹的速度每秒+1；
 
!DOCTYPE htML>
html>
head>
    tITle> 聪明的子弹完整版/title>
    script type="text/javascript" src="jquery-1.6.1.js"> /script>
  script type="text/javascript">
      VAR x = 225;
      var y=450;
      var mousex, mousey;
      var canvas;
      var ctx;
      var c=0;
      var zidan=new Object();
      $(document).ready(function () {
           canvas = $(document).get(0).getElementById("myCanvas");
         
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              zidan.x = 245;
              zidan.y = 10;
              zidan.jiaodu = Math.PI * 0.5;
              zidan.sudu = 10;
              zidan.daDAO = 0; //0代表没打到，1代表打到
              aniMATE();
              }
      } );
      zidan.move = function () {
          if(y - zidan.y> 0)
          {
          zidan.y = zidan.y + Math.abs(zidan.sudu * Math.cos(zidan.jiaodu));
          }
          else
          {
            zidan.y = zidan.y - Math.abs(zidan.sudu * Math.cos(zidan.jiaodu));
           }
          if(x - zidan.x> 0)
          {
          zidan.x = zidan.x + Math.abs(zidan.sudu * Math.sin(zidan.jiaodu));
           }
           else
           {
            zidan.x = zidan.x - Math.abs(zidan.sudu * Math.sin(zidan.jiaodu));
           }
          
         
          //超出下边界 www.2cto.COM
          if (zidan.y > 500)
              zidan.y = 10;
         //请添加超出上左右边界的判断
          //if (zidan.y == 10)
              zidan.jiaodu = Math.atan((x - zidan.x) / (y - zidan.y));
      } ;
      function animate()
      {
       
          ctx.clearRect(0, 0, 500, 500);
          //由键盘控制的方块
          if (zidan.dadao == 1)
              ctx.fillStyle = "red";
          ctx.fillRect(x, y, 50, 50);
          ctx.fillStyle = "black";
          ctx.beginPath();
          ctx.arc(zidan.x, zidan.y, 10, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();
          if(zidan.dadao==0)
          setTimeout(animate, 100);
          //动画的逻辑,子弹直线运动，超出范围，则重新设置为10
          zidan.move();
          //碰撞检测,如果打到，则方块变成红色，游戏停止
          if((zidan.y> y)& & (zidan.yy+50)& & (zidan.x> x)& & (zidan.xx+50))
          {
              zidan.dadao = 1;
              alert(c/10);
          }
          c=c+1;
         
      } ;
/script>
/head>
body  >
      p>
        canvas id="MyCanvas" width="500" height="500" > /canvas>
      /p>
  
  /body>
     script type="text/javascript">
        
         //注意这里是document，canvas应该也能捕获keydown事件，留以后试吧
         $(document).keydown(function (e) {
             var k = e.keyCode;
             //如果不知道按键的代码，用alert输出看
             //alert(k);
             if (k == 37)
                 x = x - 10;
             if (k == 39)
                 x = x + 10;
             if (k == 38)
                 y = y - 10;
             if (k == 40)
                 y = y + 10;
          
     } );
    /script>
/html>

摘自 txdb的专栏

这里给出了跟踪飞机的子弹完整版。子弹会一直跟踪直到打到飞机。打到后会提示坚持了几秒。
有个小bug，打到后是先出提示再变红的，可以改下，变成先变红，再提示。
另外可以改成子弹飞行10s后自动消失（重头再来）
还可以改成子弹的速度每秒+1；
 
!DOCTYPE html>
html>
head>
    title> 聪明的子弹完整版/title>
    script type="text/javascript" src="jquery-1.6.1.js"> /script>
  script type="text/javascript">
      var x = 225;
      var y=450;
      var mousex, mousey;
      var canvas;
      var ctx;
      var c=0;
      var zidan=new Object();
      $(document).ready(function () {
           canvas = $(document).get(0).getElementById("MyCanvas");
         
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              zidan.x = 245;
              zidan.y = 10;
              zidan.jiaodu = Math.PI * 0.5;
              zidan.sudu = 10;
              zidan.dadao = 0; //0代表没打到，1代表打到
              animate();
              }
      } );
      zidan.move = function () {
          if(y - zidan.y> 0)
          {
          zidan.y = zidan.y + Math.abs(zidan.sudu * Math.cos(zidan.jiaodu));
          }
          else
          {
            zidan.y = zidan.y - Math.abs(zidan.sudu * Math.cos(zidan.jiaodu));
           }
          if(x - zidan.x> 0)
          {
          zidan.x = zidan.x + Math.abs(zidan.sudu * Math.sin(zidan.jiaodu));
           }
           else
           {
            zidan.x = zidan.x - Math.abs(zidan.sudu * Math.sin(zidan.jiaodu));
           }
          
         
          //超出下边界 www.2cto.com
          if (zidan.y > 500)
              zidan.y = 10;
         //请添加超出上左右边界的判断
          //if (zidan.y == 10)
              zidan.jiaodu = Math.atan((x - zidan.x) / (y - zidan.y));
      } ;
      function animate()
      {
       
          ctx.clearRect(0, 0, 500, 500);
          //由键盘控制的方块
          if (zidan.dadao == 1)
              ctx.fillStyle = "red";
          ctx.fillRect(x, y, 50, 50);
          ctx.fillStyle = "black";
          ctx.beginPath();
          ctx.arc(zidan.x, zidan.y, 10, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();
          if(zidan.dadao==0)
          setTimeout(animate, 100);
          //动画的逻辑,子弹直线运动，超出范围，则重新设置为10
          zidan.move();
          //碰撞检测,如果打到，则方块变成红色，游戏停止
          if((zidan.y> y)& & (zidan.yy+50)& & (zidan.x> x)& & (zidan.xx+50))
          {
              zidan.dadao = 1;
              alert(c/10);
          }
          c=c+1;
         
      } ;
/script>
/head>
body  >
      p>
        canvas id="MyCanvas" width="500" height="500" > /canvas>
      /p>
  
  /body>
     script type="text/javascript">
        
         //注意这里是document，canvas应该也能捕获keydown事件，留以后试吧
         $(document).keydown(function (e) {
             var k = e.keyCode;
             //如果不知道按键的代码，用alert输出看
             //alert(k);
             if (k == 37)
                 x = x - 10;
             if (k == 39)
                 x = x + 10;
             if (k == 38)
                 y = y - 10;
             if (k == 40)
                 y = y + 10;
          
     } );
    /script>
/html>

摘自 txdb的专栏

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！