1. 创建一个canvas
- 定制区域：地图面积（400*400），单位面积（20*20）
共20个单位面积
- 三种区域状态
蛇BODY（绿色） : x个单位面积
食物（黄色）：1个单位面积
剩余区域（黑色）：20-x个单位面积
- 每个单位通过
fillStyle以及fillRect来建立不同颜色的小方块
2. 每次渲染一个或两个（食物被吃）单位体积
- 位置
通过设置fillRect来建立小方块，因为面积相同
主要确定每个单位体积的位置(top,right)
为了区分蛇是准备在上下转弯还是左右转弯，
利用运算符规则
**%和/ **
令
top: t%20*20 当t<20时都会取t
left: t/20*20 当t<20时都取0
所以当t在0~20变化的时候top会变化，而left不变
而t没增加20才会使得left有明显变化
- 游戏开始
从左向右进入界面
渲染初始长度（蛇BODY）
食物
- 游戏进行
前进方向第一节渲染成绿色
渲染蛇BODY最后一节为黑色
食物没被吃(黄色) 被吃渲染成(绿色) 然后再随机创建一个食物
- 游戏结束
触碰边界 蛇头left,top大于边界尺寸 或小于<0
触碰BODY
3. 完整JS代码
//绑定canvas
var oCanvas = document.getElementById('can').getContext('2d');
//声明一个数组，存放贪吃蛇数据
//提供默认值，也是就是贪吃蛇进入游戏后出现的第一个位置
var sBody = [42,41];
//声明一个状态变化量，这个状态变化量是用来存放蛇是向那个方向的运动的;
var stats = 1;
//声明一个临时变量，保存新添加的贪吃蛇的小方块，
var nBody;
//声明一个临时变量，保存食物的小方块参数;
var fool = 43;
//生成小方块的函数
function draw(t,c){
oCanvas.fillStyle=c;
oCanvas.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
//添加按键事件
document.onkeydown=function(e){
//依据sBody的前两个数据可以判断之前的运行状态
//依据不同的状态设置stats
stats=sBody[1]-sBody[0]==(nBody=[-1,-20,1,20][(e||event).keyCode-37]||stats)?stats:nBody;
};
//渲染小方块函数
!function () {
console.log('a');
sBody.unshift(nBody = sBody[0] + stats);//根据状态变化量添加新的小方块,且保存这个状态量后面方便进行判断
//判断新添加的状态
//当小方块已经存在，就是接触了自己的身体；当方块触碰到上下边界
if(sBody.indexOf(nBody,1)>0 || nBody<0 || nBody>399
//在左右方向移动时，触碰左右边界时
||stats==1&&nBody%20 == 0 || stats==-1&&nBody%20==19) {
return alert('游戏结束');
}
//渲染蛇身
draw(nBody,'green');
//渲染食物先判断食物==nBody,true的时候才添加新的随机食物,
// 否则蛇Body的最后一个小方块要变成黑色小方块还有脱离sBody数组
if (nBody == fool) {
//创建新的食物，判断fool是否是sBody的一部分，是就要一直创建
while (sBody.indexOf(fool) >= 0) {
fool = ~~(Math.random()*400);
}
draw(fool, 'yellow');
} else {draw(sBody.pop(),'black')}
setTimeout(arguments.callee,100); //这样设置参数可以实现重载；
}();
var oCanvas=document.getElementById('can').getContext('2d'),sBody=[42,41],stats=1,nBody,fool=43;
function draw(t,c){
oCanvas.fillStyle=c;
oCanvas.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){
stats=sBody[1]-sBody[0]==(nBody=[-1,-20,1,20][(e||event).keyCode-37]||stats)?stats:nBody
};
-function () {
sBody.unshift(nBody = sBody[0] + stats);
if(sBody.indexOf(nBody,1)>0||nBody<0||nBody>399||stats==1&&nBody%20==0||stats==-1&&nBody%20==19) return alert('游戏结束');
draw(nBody,'green');
if (nBody == fool) {
while (sBody.indexOf(~~(Math.random()*400)) >= 0)
draw(fool, 'yellow');
} else draw(sBody.pop(),'black')
setTimeout(arguments.callee,100); //这样设置参数可以实现重载；
}();
