canvas封装 FlappyBird ：小鸟第一步鼠标点击移动

<canvas id ="cvs" width="800" height="600"></canvas>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');

var imgUrls = [ //存图片名称 和图片路径的对象
{name: 'birds', path: './res/birds.png'},
{name: 'land', path: './res/land.png'},
{name: 'pipe1', path: './res/pipe1.png'},
{name: 'pipe2', path: './res/pipe2.png'},
{name: 'sky', path: './res/sky.png'},
];
//创建的函数，传入俩个参数 第一个参数是图片名称和路径的数组，第二个参数是加载完成需要执行的函数体
function loadImages(imgUrls, callback) {
var count = imgUrls.length; // 创建的长度用于遍历和计数用
var imgEls = {}; //创建一个新数组
for (var i = 0; i < imgUrls.length; i++) { //循环遍历穿入的图片数组
var imgEl = new Image(); // 创建一个 img 标签
imgEl.src = imgUrls[i].path; // img标签的 src 加载 穿入的数组内的path (路径)
var name = imgUrls[i].name; // 创建一个 name 属性 接收 数组内的name 属性
imgEls[name] = imgEl; //img 标签属性name 等于 一个对象
imgEl.addEventListener('load', function () { //imgEl（img）创建一个监听事件 图片加载完成后执行
count--; //加载完成一次，计数减一
if (count == 0) { // count 等于0的时候 执行
callback(imgEls) ; //加载完成执行函数体
}
})
}
}
// --------------------------
//主函数体
loadImages(imgUrls,function(imgEls){
//封装一个对象，能够绘制一个会自己下落的小鸟。
//有构造函数准备数据。
//有update和draw用于更新数据和绘制。
//update里面有下落和帧切换两种动画。
function Bird(x,y,img,a,speed) {
// TODO: 准备小鸟对象所需要的数据
this.x = x; //在画布上的x坐标
this.y = y; //在画布上的Y坐标
this.img = img; //图片名称
this.index = 0; //用来计算图片X轴的位置
this.a = a; // 计算加速时间
this.speed = speed; // 图片移动速度


this.waitTime = 0; // 累积小图等待的时间。
}

Bird.prototype.draw = function(){
// TODO:绘制小鸟 （不需要有旋转）
ctx.drawImage(this.img,
52*this.index, 0, 52, 45, // 原图上选择的矩形区域
this.x, this.y, 52, 45 // Cavnas上选择的矩形区域
);
};

Bird.prototype.update = function (dt) {
// 我们原来是一帧切换一张小图。昨天写的一帧是100毫秒。
// 但是现在我们的一帧，约为16.67毫秒，所以小图切换的速度，就太快了。
// r如何解决这个问题呢？
this.waitTime += dt;
if (this.waitTime >= 100) { // 等停在这给index上的时间超过100毫秒，再做切换
// 现在的思路是：
// 等待一百毫秒后，切换小图，然后用来累积等待时间的变量减去100毫秒。
this.index++;
if (this.index > 2) {
this.index = 0;
}
this.waitTime -= 100;


}
// TODO : 小鸟的下落动画
// speed和a：小鸟的速度和加速度。我们算小鸟的位置时，应该是这样的：
// speed = speed + a × dt; 速度是根据加速度和时间算出来的。
// s = speed × dt; 路程是根据速度和时间算出来的。
// y = y + s; 位置是根据路程算出来的。(纵轴的位置)

this.speed = this.speed + this.a * dt;
this.y = this.y+this.speed * dt;
};


// bird
var animate = new Bird(150,150,imgEls.birds,0.0002,0);


var lastTime =Date.now(); //计算执行之前的时间
var looper = function(){
var now = Date.now(); //执行之后的时间
var dt = now - lastTime; //执行时间
// if(dt<10){
// requestAnimationFrame(looper);
// return;
// }
lastTime = now;


ctx.clearRect(0,0,800,600);//清除图像
animate.update(dt);
animate.draw();

requestAnimationFrame(looper);
}
cvs.addEventListener('click', function () {
animate.speed = -0.15;
})
requestAnimationFrame(looper);
})
</script>