学习JavaScript的面向对象编程——JavaScript贪吃蛇小游戏

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(){
   	// 自调用函数ÿ