canvas -资源管理

• 在开发游戏的时候，有一些静态资源是需要请求回来的，否则如果直接开始，某些静态资源没有，会报错，或者空白，比如我们的游戏背景图，如果没有请求回来就直接开始，页面会有空白现象
• 资源管理器就是当游戏需要资源全部加装完毕的时候，再开始游戏
• 现在主要是图片的资源，所以我们要在canvas渲染过程中进行对图片的资源加载

获取对象中属性的长度

this.R = {
                "one": "images/17kongqiao.jpg",
                "two": "images/dajuyuan.jpg",
                "three": "images/niaochao.jpg",
                "four": "images/tiantan.jpg",
                "five": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607933394507&di=b7d222c8fc1d1dcda7d71f24b27e2301&imgtype=0&src=http%3A%2F%2Fimg.18183.com%2Fuploads%2Fallimg%2F200924%2F291-200924104932.jpg",
                "six": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607933417709&di=a36c468b8bf7acbb4080a4ffa18e8d1b&imgtype=0&src=http%3A%2F%2Fatt.gamefy.cn%2F201105%2F130501279315727.jpg"
            }

此时如果使用this.R.length是得不到的，因为当前的this.R.length指的是获取R对象的length属性，而不是获取当前对象的属性个数，会返回undefined

正确是使用Object.keys()来获取当前的属性key列表，然后通过这个列表获取长度，策略就是曲线救国

 var allAmout = Object.keys(this.R);

返回一个数组，内部是存放对象中所有的属性key集合，可以根据这个得出我们的属性，因为key的数量就是当前JOSN或者对象的属性数量

 var allAmout = Object.keys(this.R).length;

返回属性长度

资源管理的封装

function Game() {
            this.dom = document.querySelector("canvas");
            this.ctx = this.dom.getContext("2d");
            // 添加属性，保存需要的图片地址
            this.R = {
                "one": "images/17kongqiao.jpg",
                "two": "images/dajuyuan.jpg",
                "three": "images/niaochao.jpg",
                "four": "images/tiantan.jpg",
                "five": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607933394507&di=b7d222c8fc1d1dcda7d71f24b27e2301&imgtype=0&src=http%3A%2F%2Fimg.18183.com%2Fuploads%2Fallimg%2F200924%2F291-200924104932.jpg",
                "six": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607933417709&di=a36c468b8bf7acbb4080a4ffa18e8d1b&imgtype=0&src=http%3A%2F%2Fatt.gamefy.cn%2F201105%2F130501279315727.jpg"
            }
            //获取图片总数
            var allAmout = Object.keys(this.R).length;
            // 计数器，记录的是加载完毕的数量
            var count = 0;
            // 遍历R对象获取每一个路径地址
            for (k in this.R) {
                //console.log(this.R[k]);
                // 备份每一张图片的地址
                var src = this.R[k];
                //创建新图片
                this.R[k] = new Image();
                // 赋值src图片地址
                this.R[k].src = src;
                // 判断图片是否加载完成，如果完成了，计数，如果加载完毕的数量和总数量相同了，则说明资源加载完毕，开始游戏
                var self = this;
                this.R[k].onload = function () {
                    // 增加计数器
                    count++;
                    //清屏
                    self.ctx.clearRect(0, 0, 1200, 800);
                    // 设置资源加载文案
                    self.ctx.font = "25px 微软雅黑";
                    self.ctx.fillText("已加载" + count + "张" + allAmout + "张", 20, 50);

                    if (count == allAmout) {
                        self.start()

                    }
                }
            }
        }
        Game.prototype.start = function () {
            this.ctx.drawImage(this.R["one"], 100, 100, 300, 150);
            this.ctx.drawImage(this.R["two"], 450, 100, 300, 150);
            this.ctx.drawImage(this.R["three"], 100, 300, 300, 150);
            this.ctx.drawImage(this.R["four"], 450, 300, 300, 150);
            this.ctx.drawImage(this.R["five"], 100, 500, 300, 150);
            this.ctx.drawImage(this.R["six"], 450, 500, 300, 150);
        }
        console.log(new Game());