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); //這樣設置參數可以實現重載；
    }();