jquery+html5 4--躲避子弹游戏2-聪明的子弹

最新推荐文章于 2025-11-05 16:55:10 发布

原创最新推荐文章于 2025-11-05 16:55:10 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html5 #游戏 #function #object #div

编程语言专栏收录该内容

76 篇文章

订阅专栏

本文介绍了一个简单的游戏编程案例——智能子弹。通过JavaScript实现了一个能够自动调整方向追踪目标的子弹，涉及对象方法、函数封装及Math库三角函数的应用。

这个例子里，子弹不在是垂直运动了，会根据当前飞机的位置，做斜线运动

为此，我们专门为子弹添加了一个move方法。注意和上个例子中代码的区别。

基本的逻辑是这样的，zidan.y=0的时候，判断运动角度，后面根据这个角度运动，超出屏幕则从新来。

超出屏幕要对x，y轴做判断

这里例子主要的知识点有

1.对象的方法

2.通过函数和对象来封装代码。

3.Math库中的几个三角函数

大家可能已经体会到对象的好处，学生可以参试把飞机也做成一个对象，

另外，可以把子弹改成跟踪弹，

<!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 mousex, mousey;
      var canvas;
      var ctx;
      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 () {
          zidan.y = zidan.y + zidan.sudu * Math.cos(zidan.jiaodu);
          zidan.x = zidan.x + zidan.sudu * Math.sin(zidan.jiaodu);
          if (zidan.y > 500)
              zidan.y = 10;
          if (zidan.y == 10)
              zidan.jiaodu = Math.atan((x - zidan.x) / (450 - zidan.y));
      };
      function animate()
      {

          ctx.clearRect(0, 0, 500, 500);
          //由键盘控制的方块
          if (zidan.dadao == 1)
              ctx.fillStyle = "red";
          ctx.fillRect(x, 450, 50, 50);
          ctx.beginPath();
          ctx.arc(zidan.x, zidan.y, 10, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();

          //动画的逻辑,子弹直线运动，超出范围，则重新设置为10
          zidan.move();
          //碰撞检测,如果打到，则方块变成红色，游戏停止
          if((zidan.y>450)&&(zidan.y<500))
          {
              zidan.dadao = 1;
          }

          setTimeout(animate, 100);
      };
</script>
</head>
<body >
      <div>
        <canvas id="MyCanvas" width="500" height="500" > </canvas>
      </div>

</body>
     <script type="text/javascript">

         //注意这里是document，canvas应该也能捕获keydown事件，留以后试吧
         $(document).keydown(function (e) {
             var k = e.keyCode;
             //如果不知道按键的代码，用alert输出看
            // alert(k);
             if (k == 37)
                 x = x - 5;
             if (k == 39)
                 x = x + 5;

     });
    </script>
</html>