javascript - 隨機(jī)方塊（div）無法顯示到頁面上？

新手在學(xué)習(xí)js視頻的時(shí)候，跟著敲的代碼。實(shí)現(xiàn)的效果應(yīng)該是在一個(gè)頁面上隨機(jī)生成小方塊。
運(yùn)行實(shí)際效果

并沒有方塊出現(xiàn)

但調(diào)試中已有方塊產(chǎn)生!

代碼如下：

<script >
/*
 * 產(chǎn)生隨機(jī)數(shù)變量的
 */
(function (window) {
    function Random() {
    }
    Random.prototype.getRandom = function (min,max) {
        return Math.floor(Math.random()*(max-min)+min);
    };
    window.Random=new Random();//把局部對(duì)象暴露給window頂級(jí)對(duì)象，就成了全局對(duì)象
})(window);

/*
 * 產(chǎn)生小方塊對(duì)象
 */
(function (window) {
    console.log(Random.getRandom(0,5))//這個(gè)是顯示上面是否已經(jīng)暴露成全局對(duì)象
    var map = document.querySelector(".map");//使用選擇器的方式來獲取元素，也可以使用.getElementById
    //小方塊（食品）的構(gòu)造函數(shù)
    function Food(width,height,color) {
        this.width=width||20;//默認(rèn)的小方塊的高
        this.height=height||20;
        this.x=0;//隨機(jī)產(chǎn)生橫坐標(biāo)
        this.y=0;//隨機(jī)產(chǎn)生縱坐標(biāo)
        this.color=color;
        this.element=document.createElement("div");//生成一個(gè)裝小方塊的元素
    }
    //初始化小方塊的顯示效果與位置
     Food.prototype.init = function(map){
        var div = this.element;//設(shè)置小方塊樣式
        div.style.position = "absolute";//脫離文檔流;
        div.style.width = this.width + "px";
        div.style.height = this.height + "px";
        div.style.backgroudcolor = this.color;
        map.appendChild(div);//把小方塊加到地圖中
        this.render(map);
    };
    //產(chǎn)生隨機(jī)位置
     Food.prototype.render=function(map){
        var x =Random.getRandom(0,map.offsetWidth/this.width)*this.width;//隨機(jī)生成橫坐標(biāo)
        var y =Random.getRandom(0,map.offsetHeight/this.height)*this.height;
        this.x=x;
        this.y=y;
        var div = this.element;
        div.style.left = this.x + "px";
        div.style.top = this.y + "px";
    };
    
     var fd = new Food(20,20,"green");
     fd.init(map);
     console.log(fd.x+"--"+fd.y);
     
})(window);