贪吃蛇小项目——思路（面向对象、原型）

1. 观察项目的对象有哪些？

   • 地图
     • 宽、高、背景颜色
   • 食物
     • 宽、高、背景颜色、坐标值
   • 小蛇
     • 宽、高、背景颜色、坐标值（包括蛇头和蛇身—对象）
   • 游戏
     • 食物初始化、小蛇初始化、相应事件的初始化

2. 编写构造各对象的构造函数与初始化

   • 地图构造函数

     function map(width,height,color){
         this.width = width || 500;
         this.height = height || 500;
         this.color = color;
     }

   • 地图的初始化

     map.prototype.init = function(body){
         let div = document.createElement('div');
         div.style.width = this.width + 'px';
         div.style.height = this.height + 'px';
         div.style.backgroundColor = this.color;
         body.appendChild(div);
     }

     以下就不一一放代码了

   • 食物构造函数

   • 食物的初始化

   • 食物的随机产生方法

   • 小蛇构造函数

   • 小蛇的初始化

   • 小蛇的移动方法

   • 游戏对象构造函数

   • 游戏对象的初始化

3. 本项目中需要注意的地方

   • 食物的每次初始化（包括被小蛇吃了之后），需要将上一次食物清除，如果未清除则会在地图上显示多个食物
   • 小蛇的移动也需要清除上一次所记录的位置，未清除则会观察到小蛇的长度在一直增加，需要注意的是清除的顺序是先清除尾部，再到头部
   • 小蛇的每次移动，是蛇头与蛇身分开进行编写的，蛇身的移动是通过改变第三节与第二节蛇身的位置进行移动，蛇头的移动需要先判断方向，再进行移动

这次的贪吃蛇小项目还存留着很多的缺陷，例如蛇能够碰到自己的身体，能够无视左右、上下方向进行摆动，如果大家想要完善下的话，自己可以试着去增加一些方法哦(^▽^)