jquery+html5 4--躲避子弹游戏1

来源：互联网发布：海康知乎编辑：程序博客网时间：2024/04/26 03:57

这是第一个游戏，红色小圆圈（子弹）从顶部每隔1s出现一个，朝着当前飞机运动。超出屏幕则重新来。

屏幕中只有一颗子弹，以后可以改成可以存在多颗子弹。

打到飞机则游戏结束

这个例子并不完善，但是包括了键盘控制，子弹动画的实现，以及碰撞检测

这里介绍了javascript的对象创建，与或非逻辑，以及if语句的很多应用。

这里例子没有加x轴的判断，子弹到底部飞机就变红了

变红了以后飞机和子弹还是再动的，而不是游戏停止了。

学生可以修改下，实现躲避子弹的功能以及打到游戏就停止的功能。

<!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();
              }
      });
      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.y = zidan.y + zidan.sudu;
          if (zidan.y > 500)
              zidan.y = 10;
          //碰撞检测,如果打到，则方块变成红色，游戏停止
          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>