原生js实现贪吃蛇之食物随机出现部分

• html部分

<div class="map"></div>

• css部分

 .map {
            width: 800px;
            height: 800px;
            /*渐变*/
            background: linear-gradient(to bottom, rgb(10, 10, 50) 10%, rgb(60, 10, 60) 100%);
            position: relative;
        }

• js部分

    //产生食物对象
    (function () {
        //获取地图对象
        var map = document.querySelector(".map");
        //食物的构造函数
        function Food(width, height, color, x, y) {
            //设置食物的属性（包括默认值）
            this.width = width || 20;
            this.height = height || 20;
            this.color = color || "green";
            this.x = x || 0;//横坐标随机产生的
            this.y = y || 0;//纵坐标随机产生的
        }

        //初始化小方块的显示的效果及位置---显示地图上
        Food.prototype.init = function (map) {
            //创建食物的div
            var div = document.createElement("div");
            //加入到地图中
            map.appendChild(div);
            //设置食物的属性
            div.style.width = this.width + "px";//食物的宽等于当前调用这个构造函数的实例对象的宽
            div.style.height = this.height + "px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            this.render(map);   //构造函数的原型中的方法可以互相访问
            div.style.left = this.x + "px";
            div.style.top = this.y + "px"
        };
        //产生随机位置(呈现)
        Food.prototype.render = function (map) {
            this.x = parseInt(Math.random() * map.offsetWidth / this.width) * this.width;
            this.y = parseInt(Math.random() * map.offsetHeight / this.height) * this.height;
        };
        //把Food函数和map变量暴露在外面
      window.Food=Food;
      window.map=map;
    }());
    //实例化对象
    var fd = new Food(20, 20, "yellow");
    fd.init(map);
    //测试代码
    console.log(fd.x + "====" + fd.y);