我们可以看到这个游戏由背景蓝天,土地,小鸟,管道四部分组成,在开始游戏我们必须保证全部加载完所有图片资源,这里书写一个函数传进所有图片资源,再通过回调函数的方式返回加载好的图片资源
1 | // 思路: |
(1)绘制背景
和轮播图差不多,准备两张相同的背景图,在计时器里调用上下文对象的drawImg()方法不断的向左偏移重绘即可,其构造函数如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40// 书写绘制背景函数
function Sky(ctx,img,speed){
this.ctx=ctx;
this.img=img;
this.width=this.img.width;
this.height=this.img.height;
Sky.len++;
this.x=this.width * (Sky.len-1);
this.y=0;
this.speed=speed||2;
} Sky.len=0;
// 给原型增加方法 Sky.prototype={
// 重新指向构造函数 constructor: Sky,
// 绘制背景 draw:function(){
this.ctx.drawImage(this.img,this.x,this.y);
},
update:function(){
// 让它往右走 this.x-=this.speed;
if(this.x<-this.width){
this.x += this.width * Sky.len;
}
}
}
//我们再在loadImg函数中调用即可
// 先把图片调用出来
loadedImg({ beiJing:'./images/sky.png', bird:'./images/bird.png', land:'./images/land.png', pipeDown:'./images/pipeDown.png', pipeUp:'./images/pipeUp.png',
}, function(imgObj){
// 实例化天空 var sky=new Sky(vas,imgObj.beiJing,2);
var sky2=new Sky(vas,imgObj.beiJing,2);
// 让canvas的宽高与背景图自适应
ctx.width=imgObj.beiJing.width;
ctx.height=imgObj.beiJing.height;
// 让背景动起来 setInterval(function(){
//第一张图片
sky.update();
sky.draw();
//第二张图片
sky2.update();
sky2.draw(); },50)
})
(2)绘制大地同理
(3)绘制小鸟同理,需要额外为画布添加一个点击事件,点击时让小鸟的this.y(y轴坐标)往上移动。
(4)绘制管道的思路:每一组的管道,上管道和下管道的长短随机生成,但是中间的间距是一定的,我们将中间的距离固定,上管道的长为随机生成,下管道的长即画布高减去大地高减去中间间距即可也是随机的,让它移动起来方法也是和前面一样的。