相信贪吃蛇的游戏大家都玩过。在那个水果机还没有流行，人手一部诺基亚的时代，贪吃蛇是手机中的必备游戏。笔者闲的无聊的时候就拿出手机来玩上几局，挑战一下自己的记录。
后来上大学了，用c语言做过贪吃蛇的游戏，不过主要是通过函数来控制（PS：现在让我看代码都看不懂(⊙﹏⊙)）。现在学习前端框架之后，通过jQuery来实现一个贪吃蛇的游戏效果，虽然游戏界面比（bu）较（ren）简（zhi）陋（shi），但是主要学习一下游戏中面向对象和由局部到整体的思想。
设计思想
在开始写代码前首先让我们来构思一下整体游戏的实现过程：
需要的对象
首先既然是贪吃蛇，那么游戏中肯定要涉及到两个对象，一个是蛇的对象，另一个是食物的对象。食物对象肯定要有一个属性就是食物的坐标点，蛇对象有一个属性是一个数组，用来存放蛇身体所有的坐标点。
如何移动
另外全局需要有一个定时器来周期性的移动蛇的身体。由于蛇的身体弯弯曲曲有各种不同的形状，因此我们只处理蛇的头部和尾部，每次移动都根据移动的方向的不同来添加新的头部，再把尾部擦去，看起来就像蛇在向前爬行一样。
方向控制
由于蛇有移动的方向，因此我们也需要在全局定义一个方向对象，对象中有上下左右所代表的值。同时，在蛇对象的属性中我们也需要定义一个方向属性，用来表示当前蛇所移动的方向。
碰撞检测
在蛇向前爬行的过程中，会遇到三种不同的情况，需要进行不同的判断检测。第一种情况是吃到了食物，这时候就需要向蛇的数组中添加食物的坐标点；第二种情况是碰到了自己的身体，第三种是碰到了边界，这两种情况都导致游戏结束；如果不是上面的三种情况，蛇就可以正常的移动。
开始编程
整体构思有了，下面就开始写代码了。
搭建幕布
首先整个游戏需要一个搭建活动的场景，我们通过一个表格布局来作为整个游戏的背景。
<style type="text/css"> #pannel table{ border-collapse:collapse; } #pannel td{ width: 10px; height: 10px; border: 1px solid #000; } #pannel td.food{ background: green; } #pannel td.body{ background: #f60; } </style> <div> </div> <select> <option value="10">10*10</option> <option value="20">20*20</option> <option value="40">30*30</option> </select> <select> <option value="500">速度-慢</option> <option value="250">速度-正常</option> <option value="100">速度-快</option> </select> <button>开始</button>
pannel就是我们的幕布，我们在这个里面用td标签来画上一个个的“像素点”。我们用两种样式来表现不同的对象，.body表示蛇的身体的样式，.food表示食物的样式。
var settings = { // pannel面板的长度 pannelSize: 10, // 贪吃蛇移动的速度 speed: 500, // 贪吃蛇工作线程 workThread: null, }; function setPannel(size){ var content = []; content.push('<table>'); for(let i=0;i<size;i++){ content.push('<tr>'); for(let j=0;j<size;j++){ content.push('<td></td>'); } content.push('</tr>'); } content.push('</table>'); $('#pannel').html(content.join('')); } setPannel(settings.pannelSize);
我们定义了一个全局的settings用来存放全局性的变量，比如幕布的大小、蛇移动的速度和工作的线程。然后通过一个函数把幕布画了出来，最后的效果就是这样：
方向和定位
既然我们的“舞台”已经搭建完了，怎么来定义我们“演员”的位置和移动的方向呢。首先定义一个全局的方向变量，对应的数值就是我们的上下左右方向键所代表的keyCode。
var Direction = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39, };
我们在上面画幕布的时候通过两次遍历画出了一个类似于中学里学的坐标系，有X轴和Y轴。如果每次都用{x:x,y:y}来表示会很（mei）麻（bi）烦（ge），我们可以定义一个坐标点对象。
function Position(x,y){ // 距离X轴长度，取值范围0~pannelSize-1 this.X = x || 0; // 距离Y轴长度，取值范围0~pannelSize-1 this.Y = y || 0; }
副咖–食物
既然定义好了坐标点对象，那么可以先来看一下简单的对象，就是我们的食物（Food）对象，上面说了，它有一个重要的属性就是它的坐标点。