//使小鸟飞起来的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="cvs" height="500" width="500"></canvas>
</body>
<script src="js/loadImage.js"></script>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
/*创建一个天空的构造函数*/
function Sky( ctx, img, speed) {
//debugger;
this.ctx = ctx;
this.img = img;
this.speed = speed || 2;
/*创建一个实例,length就自增*/
Sky.len++;
console.log(Sky.len);
this.width = this.img.width;
//console.log(this.width);
this.height = this.img.height;
/*根据背景数量,动态计算起始的x轴坐标*/
this.x = this.width * ( Sky.len - 1 );
//console.log(this.x);
//this.x = 0;
this.y = 0;
}
/*创建一个鸟类的构造函数*/
function Bird(ctx, img, widthFrame, heightFrame,x,y) {
this.ctx = ctx;
this.img = img;
this.widthFrame = widthFrame;
this.heightFrame = heightFrame;
this.width = this.img.width/this.widthFrame;
this.height = this.img.height/this.heightFrame;
console.log(this.width,this.height);
this.x = x;
this.y = y;
this.currentFrame = 0;
/*小鸟下落速度*/
this.speed = 2;
this.speedPlus = 0.5;
}
/*给原型添加方法*/
Bird.prototype = {
constructor: Bird,
/*绘制鸟*/
draw: function () {
this.ctx.drawImage(this.img, this.currentFrame * this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height)
},
update: function () {
this.currentFrame = ++this.currentFrame >= this.widthFrame? 0 : this.currentFrame;
this.y += this.speed;
this.speed += this.speedPlus;
},
/*绑定事件*/
_bind: function () {
var self = this;
this.ctx.canvas.addEventListener("click",function () {
self.speed = -2 ;
})
}
};
/*sky实例默认的数量*/
Sky.len = 0;
/*给原型扩充方法*/
Sky.prototype = {
constructor: Sky,
draw: function () {
this.ctx.drawImage(this.img, this.x, this.y);
},
update: function () {
this.x -= this.speed;
//console.log(sky.x);
if( Math.abs(this.x) >= this.width){
this.x += this.width *2;
}
}
}
</script>
<script>
loadImage({
bird: './images/bird.png',
land: './images/land.png',
pipeDown: './images/pipeDown.png',
pipeDown: './images/pipeDown.png',
sky: './images/sky.png'
},function ( imgObj) {
/*根据背景的大小设置画布的大小*/
cvs.width = imgObj.sky.width;
cvs.height = imgObj.sky.height;
/*创建两个天空的实例,两个实例是为了保证循环的连续性*/
var sky = new Sky(ctx, imgObj.sky,10);
var sky2 = new Sky(ctx, imgObj.sky,10);
/*创建鸟的实例*/
var bird = new Bird(ctx, imgObj.bird, 3, 1, 10,10);
setInterval(function () {
sky.draw();
sky.update();
/* sky.x -= sky.speed;
//console.log(sky.x);
if( Math.abs(sky.x) >= sky.width){
sky.x += sky.width *2;
}*/
sky2.draw();
sky2.update();
/* sky2.x -= sky2.speed;
if( Math.abs(sky2.x) >= sky2.width){
sky2.x += sky2.width *2;
}*/
bird.draw();
bird.update();
bird._bind();
},100);
})
</script>
</html>
结果如图所示:
