这里我们可以把整个地图看成是一个坐标系，把地图的宽度除以 “食物”的宽度 来切分这个地图 ，x=1则相当于1个“食物宽度”的单位长，x=3 则相当于3个“食物宽度的单位长”
高度同理
这里我取了随机数 乘以 地图被切分的总份数 这样就会的到 随机的 X和Y 然后乘以 宽度和高度 就的到了不会超出地图的随机坐标 ,举例 : 因为Math.random(0,5) 是不包括5的
因为“食物”是会被贪吃蛇 “吃”掉的
所以我们必须创建一个方法来“消灭”这个“食物”，因此我定义了一个 remove 函数
并且 上方创建了一个 数组elements用于存放 创建出来的 "食物" 这个div元素 的对象，方便用来删除，每次初始化“食物” 时，将对象追加入elements 数组
我们遍历 elements 数组, 通过数组中每个div对象 先找到其父级，然后通过removeChild 方法将其自身删除
因为有保存在elements 数组中，那我们想要删除“食物就很方便了”，每次初始化之前我们秩序要调用一次 remove函数就是实现了“消灭”食物，然后再生成新的食物
因为此处的所有函数都写在了一个 自调用的匿名函数中，所以内部的Food 对象，在外部是访问不到的，
那怎么办呢?
这里我调用了window 对象，将配置好的Food 对象暴露给window ，这样，我们再其他的地方有需要时也可以实例化 Food了
Snake.js 代码分析
其实 “贪吃蛇”身体的实现和 “食物”的实现原理大体相同 ，首先我也同样建立了一个elements数组，用于存放之后小蛇移动时所产生的旧的“身体”,用于删除，因为都是局部变量，所以虽然两个数组名字相同，但不会冲突
这里我也给小蛇设置了宽、高，宽高我设定为默认和食物相同,并且还设置了方向direction 这用来控制小蛇的移动方向，这里我默认给了“right”向右移动，
并且，因为当游戏开始时，小蛇必当有一个初始的长度，我给了它一个脑袋 二节身体，脑袋设置成了红色，方便识别
所以我之后如果需要让小蛇增加长度，体现越吃越长的感觉 ，只需要在 body这个数组中追加对象就可以了
好，小蛇的基本属性配置完了，我们下一步就是要初始化小蛇
同样的，上方也提到了，我创建过一个elements数组，用于存放“小蛇”的旧身体，所以在初始化之前，我们需要调用remove函数，遍历elements数组，和删除“食物”一样的方法，将旧的“蛇身”都给删除了
执行完删除之后呢，我们就可以专心初始化了，
蛇身这么长，那我们该怎么知道蛇身的每一节到底该在哪里呢
这时就用到了我们上方定义的 body 这个数组了，它存放了小蛇的身体的所有部分
我们只需要遍历它，根据其中每个对象的属性都进行创建新的div对象，同意设置其宽、高、left、top，并且，将创建好的对象又存入elements数组中，方便下一次删除
定义完初始化的方法后，我们就得考虑小蛇的移动该怎么实现了，
既然是贪吃蛇游戏，我们肯定需要与玩家互动，让玩家来操控小蛇的走向，
对了，我们自定义构造函数的时候不是设置过一个direction 属性吗，我们就得利用起来，依据此来判断小蛇的走向
至于更改方向，我们放在之后的代码中实现
这里我们定义了一个move 函数 ，并传入两个参数 food "食物对象" 和 map“地图对象”
那为什么要传呢，
虽然我们这个demo里面只有一条小蛇，但这样的写法保留了同时开启多个游戏的可能性