标签:图片 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";
效果如下:
标签:图片 loading 开始 技术分享 暂停 wim 封面 位置 cti
原文地址:https://www.cnblogs.com/tangdiying/p/10112589.html