# 1、分析 小游戏中共有三个对象。一个是地图（Map）、一个是食物（Food）、一个是蛇（Snake）。 以面向对象的方式来开发，应该创建三个对象。 每个对象的特点： > 地图Map： * 宽width * 高height * 背景颜色backgroundColor * 显示方法：show > 食物Food： * 宽width * 高height * 背景颜色backgroundColor * x轴坐标：0~29(每个坐标实际像素是20px) * y轴坐标：0~19（每个坐标实际像素是20px） > 蛇Snake： * 身体body（默认有三个div组成，其中一个蛇头，两段蛇身，都有颜色） * 能够移动move * 能够拐弯，改变移动方向 * 能够吃食物，变长 # 2、创建地图  # 3、创建食物 创建一食物，让它显示在body中。  食物没有和地图对齐，解决办法是让父级元素地图position是relative，让子元素食物position是absolute，并且让食物显示在地图中，而不是显示在body中。 所以修改Map，添加position属性，并且用一个属性_map来保存地图：  然后修改食物，让其显示在地图中即可：  # 4、创建蛇  蛇的每一节用一个div来表示，每一节都有宽度、高度、背景颜色、坐标。创建蛇，并让它显示到地图上。  # 5、让蛇移动 移动方向：默认先向右移动。  这样做有个问题，当蛇移动的时候，会调用show方法，让蛇从新显示。调用show方法，会一直循环创建div。所以看到的效果是蛇移动了，但是越走越长。 解决办法：  # 6、让蛇拐弯 控制蛇头即可，因为身体一直跟着蛇头走。 蛇头的方向肯定是上下左右四个方向，可以用一个属性来表示蛇的移动方向。  当蛇移动的时候，根据方向修改蛇头的坐标：  下面添加键盘事件，修改蛇的运行方向：  # 7、让蛇吃食物 蛇头和食物重叠，才算吃到食物。即在移动过程中，如果发现蛇头的坐标和食物的坐标一样，才表示吃到食物。  这样做，吃完食物，发现食物没有从新显示。修改Food函数：  # 8、让蛇加速  当蛇吃到食物的时候，让时间变小，速度加快：