canvas：飞机大战

Posted 2021-01-26 tangdiying

最开始我们要初始化信息，我们有五个状态，游戏封面，加载状态，运行状态，游戏暂停，游戏结束

我们还需要得分score，生命life

var START = 1;//初始状态
var LOADING = 2;//加载状态
var RUNNING = 3;//游戏运行状态
var WAIT = 4;//游戏暂停状态
var GAMEOVER = 5;//游戏结束状态

var state = START;//初始状态

var score = 0;//游戏得分

var life = 5;//我方飞机的生命值 

我们创建一个背景的构造函数，为了制造背景的动态效果，我们创建两张背景

第一张图片的位置为（0,0）

第二张图片我们放在第一张图片的上面，

当第一张图片运动到最底下时，然后把第一张图片放在第二张图片的上面

当第二张图片运动到最底下时，然后把第二张图片放在第一张图片的上面

var bg = new Image();//创建一个图片对象
bg.src = "img/background.png";

var BG = {
    imgs:bg,
    width:480,
    height:850
}
//创建一个背景的构造函数
//为了制造背景的动态效果，我们创建两张背景
function Bg(config){
    this.imgs = config.imgs;
    this.width = config.width;
    this.height = config.height;
    
    this.x1 = 0;
    this.y1 = 0;
    this.x2 = 0;
    this.y2 = -this.height;
    
    //绘制图片的方法
    this.paint = function(){
        ctx.drawImage(this.imgs,this.x1,this.y1);
        ctx.drawImage(this.imgs,this.x2,this.y2);
    }
    
    //运动方法
    this.step = function(){
        this.y1++;
        this.y2++;
        if (this.y1 == this.height) { //当第一张图片运动到最底下时，
            this.y1 = - this.height;//然后把第一张图片放在第二张图片的上面
        }
        if (this.y2 == this.height) {//当第二张图片运动到最底下时，
            this.y2 = -this.height;//然后把第二张图片放在第一张图片的上面
        }
    }
}

//创建背景对象
var sky = new Bg(BG);

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

效果如下：