1：与Food相关的代码
<html>
<head>
<!-- 地图的样式 -->
<style>
#map{
width: 800px;
height: 600px;
background-color: lightgray;
position: relative;
}
</style>
<!-- 创建相关的对象 -->
<script>
/**
*
* 启用自调用函数这种模式 可以防止与其他的js发生变量重名等冲突的异常发生
* (function(){...代码...})()
*
*/
(function(){
//创建一个工具类对象 静态的对象 也就是工具类的创建方式
var Tools = {
getRandom:function(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
}
//创建一个变量来记录生成的食物
var elements = [];
//创建食物对象 *********************************************************创建食物对象
function Food(options){
var options = options ||{};
//初始化食物的位置
this.x = options.x || 0;
this.y = options.y || 0;
//初始化食物的大小
this.width = options.width || 20;
this.height = options.height || 20;
//设置食物的颜色
this.color = options.color || ‘green‘;
}
//为食物创建一个渲染u方法(渲染就是把食物显示再浏览器中)
Food.prototype.render = function(map){
//创建食物时先删除现在已经有的食物~
remove();
var map = map;
var div = document.createElement(‘div‘);
elements.push(div); //把生成的div放置到数组中进行保存
map.appendChild(div);
div.style.position = ‘absolute‘;
div.style.left = this.x +‘px‘;
div.style.top = this.y + ‘px‘;
div.style.width = this.width +‘px‘;
div.style.height = this.height +‘px‘;
div.style.backgroundColor = this.color;
this.div = div ;//把这个div对象绑定到这个food对象上供后面调用
this.map = map;
}
//删除食物
function remove(){
for(var i =elements.length-1; i>=0; i--){
//删除div
elements[i].parentNode.removeChild(elements[i]);
//删除数组中的元素
elements.splice(i,1);
}
}
//创建随机生成位置的方法函数
Food.prototype.random = function(){
var x = Tools.getRandom(0,this.map.offsetWidth/this.width-1)*this.width;
var y = Tools.getRandom(0,this.map.offsetHeight/this.height-1)*this.height;
this.div.style.left = x + ‘px‘;
this.div.style.top = y + ‘px‘;
}
//让外部可以访问这个函数域中的对象
window.Food = Food;
})();
</script>
</head>
<body>
<div id="map"> </div>
</body>
<!-- ***********************************测试js************************************************************** -->
<script>
var map = document.getElementById(‘map‘);
var f = new Food(); //等价new Window.Food();
f.render(map);
f.random();
</script>
</html>
原文：https://www.cnblogs.com/gaoSJ/p/12714445.html