贪吃蛇

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); //这样设置参数可以实现重载；
    }();

• 20行简约代码

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); //这样设置参数可以实现重载；
    }();