飞机大战-1

H5实践之飞机大战

1.什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.如何创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

3.通过 JavaScript 来绘制

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

分析：

1.整个游戏分为：准备阶段，加载阶段，开始阶段，暂停阶段，结束阶段
2.游戏会显示我放飞机生命值以及击败敌方飞机的分数

①数据初始化

// 0. 数据初始化
      var canvas = document.getElementsByTagName("canvas")[0];
      var ctx = canvas.getContext("2d");
      var ready = 0;
      var loading = 1;
      var running = 2;
      var pause = 3;
      var over = 4;
      // 当前游戏阶段的判定
      var state = ready;
      // 游戏生命值
      var life = 3;
      // 游戏分数
      var score = 0;

      // 画布宽高
      var width = 480;
      var height = 852;

②准备阶段

// 1. 准备阶段 ready
      // 1. 绘制运动的背景图片
      // 1.1 创建背景图片对象
      var bg = new Image();
      bg.src = "img/background.png";
      // 1.2 确定当前背景图片的绘制位置、绘制大小的信息
      var bgParam = {
        bg: bg,
        x: 0,
        y: 0,
        width: 480,
        height: 852,
      };

      // 1.3创建一个构造函数  用来实例化背景图片对象
      function Bg(param) {
        this.bg = param.bg;
        this.x = param.x;
        this.y = param.y;
        this.width = param.width;
        this.height = param.height;

        // 交替图片的坐标位置
        this.y1 = -this.height;

        // 1. 绘制
        this.paint = function () {
          ctx.drawImage(this.bg, this.x, this.y, this.width, this.height);
          ctx.drawImage(this.bg, this.x, this.y1, this.width, this.height);
        };
        // 2. 运动
        this.sport = function () {
          this.y += 5;
          this.y1 += 5;

          // 交换图片
          if (this.y >= this.height) {
            this.y = -this.height;
          }
          if (this.y1 >= this.height) {
            this.y1 = -this.height;
          }
        };
      }
      var bgObj = new Bg(bgParam);

 // 2. 绘制logo
      // 2.1 创建logo图片
      var logo = new Image();
      logo.src = "img/start.png";
      // 2.2 定义logo初始化信息
      var logoParam = {
        logo: logo,
        x: 0,
        y: 0,
        width: 400,
        height: 654,
      };
      // 2.3 创建构造函数
      function Logo(param) {
        this.logo = param.logo;
        this.x = param.x;
        this.y = param.y;
        this.width = param.width;
        this.height = param.height;

        // 绘制
        this.paint = function () {
          ctx.drawImage(this.logo, this.x, this.y, this.width, this.height);
        };
      }
      var logoObj = new Logo(logoParam);

      //  点击画布进入到下一个阶段 loading
      canvas.onclick = function () {
        if (state === ready) {
          state = loading;
        }
      };

③加载阶段

// 2. 游戏加载阶段 loading
      // 2.1. 进场图片
      var imgArr = [
        "img/game_loading1.png",
        "img/game_loading2.png",
        "img/game_loading3.png",
        "img/game_loading4.png",
      ];
      var imgLoading = [];
      for (var i = 0; i < imgArr.length; i++) {
        imgLoading[i] = new Image();
        imgLoading[i].src = imgArr[i];
      }
      console.log(imgLoading); //
      // 绘制完进场图片马上进入下一阶段 running

      // 2.3 定义图片信息
      var loadingParam = {
        imgLoading: imgLoading,
        width: 186,
        height: 38,
      };
      function Loading(param) {
        this.imgLoading = param.imgLoading;
        this.width = param.width;
        this.height = param.height;
        this.x = 0;
        this.y = height - param.height;

        // 定义绘制图片的下标
        this.index = 0;

        // 定义一个属性 用来判断定时器的执行次数
        this.time = 0;

        this.paint = function () {
          ctx.drawImage(
            this.imgLoading[this.index],
            this.x,
            this.y,
            this.width,
            this.height
          );
        };
        this.sport = function () {
          this.time++;
          if (this.time % 5 == 0) {
            this.index++;
            if (this.index === this.imgLoading.length) {
              // 绘制图片超过整体数量时 进入到下一个阶段
              state = running;
            }
          }
        };
      }
      var loadingObj = new Loading(loadingParam);