飞机大战（canvas小练习）

1、创建一个画布，然后初始化对象

  // 初始化
        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 = 800;


        // 准备阶段 ready
        var bg = new Image();
        bg.src = "img/background.png";

        // 背景数据
        var bgParam = { 
            bg:bg,
            x: 0,
            y: 0,
            width: 480,
            height: 800

        }

2、绘制背景，利用一张背景图实现循环播放的效果

// 背景
        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
            // 绘制
            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)
            }

            // 运动
            this.sport = function(){
                this.y +=1;
                this.y1 +=1;
                
                if(this.y >= this.height){
                    this.y = -this.height;
                }
                if(this.y1 >= this.height){
                    this.y1 = -this.height;
                }

            }
        }

        var bgObj = new Bg(bgParam)

3、绘制飞机大战的logo

 // logo
        var logo = new Image()
        logo.src = "img/start.png"

        var logoParam = {
            logo: logo, 
            x: 0,
            y: 0,
            width: 460,
            height: 850,
        }

        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)

4、点击界面进入游戏准备状态

// 点击画布进入下一阶段 loading

        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)

        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.inde