JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程
预览支持移动端和pc端哦。
Github源码地址：https://github.com/fu-x/snake
游戏预览：http://coolxiang.top/snake
编程思想：面向对象
分析
首先对贪吃蛇游戏进行逻辑分析。
1. 小蛇需要移动，需要一个参数表示移动方向。
2. 小蛇可以吃食物，蛇头和食物坐标相等让小蛇长度+1。
3. 小蛇不能移动出地图边缘。
4. 小蛇的蛇头不能和身体位置重叠（不能吃到自己的身体）。
5. 食物位置随机生成。
使用面向对象的思想，就要先找出游戏中存在哪些对象。这里的地图用简单的div做地图背景，所以我们可以很快找出有两个实体对象：蛇和食物。但是，游戏的开始和结束、小蛇和食物的控制以及规则判定也是需要一个对象，这时候再封装一个游戏对象。
我们对每个对象所需要的属性和方法进一步分析。
蛇：
1. 一块身体的宽、高、长度、颜色、地图等属性。
2. 每一块身体的位置，用数组存储。
3. 渲染当前位置的小蛇方法。
4. 移除小蛇上一个位置的方法。
5. 小蛇移动的方法。
6. 因为蛇的位置是相对于地图而改变的，所以构造函数应接受一个地图dom元素。
食物：
1. 宽、高、颜色、地图等属性。
2. 构造函数可接收一个obj对象，存储生成食物的位置。
3. 因为食物的位置是相对于地图而改变的，所以构造函数应接受一个地图dom元素。
4. 重新渲染食物（随机位置、删除上一个食物dom）。
游戏：
1. 当前得分（吃一个食物加一分）、包含一个小蛇属性、一个食物属性以及地图属性。
2. 渲染生成小蛇和食物方法。
3. 键盘或者button事件控制小球移动方法。
4. 小蛇死后重新渲染位置方法。
5. 小蛇吃食物的方法。
6. 判断死亡方法。
大致分析完对象后，就可以搭建界面，封装一个个对象，并实现对象的方法了。
我们以食物对象为例：
;(function(){ // 自调用函数，保证属性和方法的局部性
let div; // 声明一个全局变量，存储当前食物dom
function Food(map, obj){ // 声明食物对象
this.obj = obj || {}; // 接受外界参数：食物的位置x和y，并赋值给obj属性
this.obj.width = 10; // 默认食物的大小
this.obj.height = 10;
this.obj.x = obj.x || 300;
this.obj.y = obj.y || 250;
this.obj.bgc = 'green'; // 背景色
this.map = map; // 地图背景dom元素
}
Food.prototype.render = function(obj){ // 渲染食物方法
obj = obj || {}; // 如果有参数就使用参数数据，如果没有使用对象自身默认属性
this.obj.x = obj.x || this.obj.x;
this.obj.y = obj.y || this.obj.y;
if(div) div.remove(); // 删除上一个食物dom
div = document.createElement('div');
this.map.appendChild(div); // 创建新的食物dom
div.style.width = this.obj.width + 'px'; // 给dom设置style
div.style.height = this.obj.height + 'px';
div.style.position = 'absolute';
div.style.left = this.obj.x + 'px';
div.style.top = this.obj.y + 'px';
div.style.backgroundColor = this.obj.bgc;
}
window.Food = Food; // 给window一个Food方法，即将Food对象暴露出去
})()
代码我就粘贴了，需要详细代码的再标题下边有Github源码地址。或者在我主页有源码文件下载（需要c币）。
喜欢的小伙伴可以关注我哦， 有任何问题的欢迎私聊我。
