<canvas id="can" width="400" height="400" style="background:Black"></canvas>
<script>
    var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
    /*  sn，存放蛇的数组，最左侧为蛇头，通过改变数据的方式改变位置
    dz，食物，初始位置为蛇头右侧，自动触发并之后随机
    fx，移动方向，初始向右
    n，用来存储移动方向/下次移动的位置
    */
    function draw(t,c){//
        ctx.fillStyle=c;
        ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
    /*  这里可以把canvas理解为400个20*20的小块
        参数分别为x,y,width,height
        18+1+1 这里相当于2px的padding
    */
    }
    document.onkeydown=function(e){fx=  sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
    /*  键盘按下时，n=[-1,-20,1,20] 左，上，右，下
        键盘和蛇移动方向一致，满足n=[-1,-20,1,20][(e||event).keyCode-37]
        蛇的移动方向不变，否则按照键盘方向移动
    */
    !function(){
        sn.unshift(n=sn[0]+fx);
        //获取到新的蛇头位置
        if(sn.indexOf(n,1)>0 || n<0||n>399 || fx==1&&n%20==0||fx==-1&&n%20==19 ) return alert("GAME OVER");
        /*  触碰自身
            n<0 || n>399 超出画布范围，即触碰上下边缘
            fx==1&&n%20==0||fx==-1&&n%20==19 向右撞到右侧，向左撞到左侧
        */
        draw(n,"Lime");//画出蛇头
        if(n==dz){//头部触碰食物时不移除尾部，随机生成食物
            while(sn.indexOf(dz=~~(Math.random()*400))>=0);
            draw(dz,"Yellow");
        }else
            draw(sn.pop(),"Black");//尾部移除并改变为黑色
        setTimeout(arguments.callee,100);
    }();//自运行函数，定时器运行自身
</script>