学习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(){	// 自调用函数，保证属性和方法的局部性
  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币）。
喜欢的小伙伴可以关注我哦， 有任何问题的欢迎私聊我。