JS 经典案例：贪食蛇游戏

我们再来回顾一下面向对象的编程思想：
根据需求，抽象出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法，然后定义（js）构造函数，实例化对象，通过对象调用属性和方法，完成相应的需求。

我们今天要利用面向对象的编程思想，利用 JS 写一个很熟悉的贪食蛇游戏：

贪食蛇游戏

分析案例：
地图：宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的，这里的小蛇和食物都是地图的子元素，随机位置显示，脱离文档流的，地图也需要脱离文档流。--- css需要设置：宽、高、背景颜色、脱标

食物 --- div元素
elements --- 存储 div 的数组（将来删除的食物 div 时候，先从 map 中删除 div，再从数组中移除 div）
食物：宽，高，背景颜色，横坐标，纵坐标
一个食物就是一个对象，这个对象有相应的属性，这个对象需要在地图上显示。最终要创建食物的对象，先有构造函数，并且把相应的值作为参数传入到构造函数中。
食物要想显示在地图上，食物的初始化就是一个行为

1. 食物的构造函数 -> 创建食物对象
2. 食物显示的方法 -? 通过对象调用方法，显示食物，设置相应的样式
   2.1.1 因为食物要被小蛇吃掉，吃掉后应该再次出现食物，原来的食物就删除了
   2.1.2 每一次初始化食物的时候先删除原来的食物，然后重新的初始化食物
   2.1.3 通过一个私有的函数删除地图上的食物，同时最开始的时候食物也相应的保存到一个数组中，再从这个数组中把食物删除
   最后，把食物的构造函数给 window 的属性，这样外部就可以直接使用这个食物的构造函数了局部变量变成全局变量。

小蛇：每个身体都有宽，高，方向，身体分三个部分，每个部分都是一个对象，每个部分都有横纵坐标，背景颜色。
小蛇要想显示在地图上，先删除之前的小蛇，然后再初始化小蛇

小蛇要移动：
把小蛇的头的坐标给小蛇的第一部分的身体，第一部分的身体的做标给下一个部分的身体。

一般来说，我们会将 script 中不同的功能：食物、小蛇、游戏的自定义函数分别定义到不同的 js 文件中，然后在页面中引用这个 js 文件，从而让代码更为清晰。