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>