码迷,mamicode.com
首页 > 其他好文 > 详细

canvas:飞机大战

时间:2018-12-13 11:30:56      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:图片   loading   开始   技术分享   暂停   wim   封面   位置   cti   

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

我们还需要得分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";

效果如下:

技术分享图片

 

canvas:飞机大战

标签:图片   loading   开始   技术分享   暂停   wim   封面   位置   cti   

原文地址:https://www.cnblogs.com/tangdiying/p/10112589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!