思路：

• 每个格子代表地图
• 蛇的移动实际是格子的变色
• 食物随机创建及随机一个格子被赋予类名
• 身体加长即将食物颜色变为身体颜色
• -

整体效果：

吃东西时身体+1，分数+1：

难度改变时速度加快，可以暂停和重新开始：

边界判断：

咬到自己判断：

1. 创建地图（即蛇走的格子）

//创建地图
        var rowNumber = 30;// 行数
        var columnNumber = 30;// 列数;
        var mapWidth = columnNumber * 20 + 'px';
        var mapHeight = rowNumber * 20 + 'px';
        map.style.width = mapWidth;
        map.style.height = mapHeight;

        var snakeDIVPosition = [];

        for ( var i = 0; i < rowNumber; i++) {

            var rowDIV = document.createElement('div');
            rowDIV.className = 'row';
            map.appendChild(rowDIV);
            var rowArray = [];

            for ( var j = 0; j < columnNumber; j++) {

                var columnDIV = document.createElement('div');
                columnDIV.className = 'col';
                rowDIV.appendChild(columnDIV);
                rowArray.push(columnDIV);
            }

            snakeDIVPosition.push(rowArray);
        }

2、创建蛇

//创建蛇


        for ( var i = 0; i < 3; i++) {
            snakeDIVPosition[0][i].className = 'col activeSnake';
            snake[i] = snakeDIVPosition[0][i];
        }

3、蛇移动

//蛇移动
            autoMove();


            function autoMove(){
                switch (dir) {
                case 'left':
                    x--;
                    break;
                case 'right':
                    x++;
                    break;
                case 'up':
                    y--;
                    break;
                case 'down':
                    y++;
                    break;
                };
                if (x < 0 || y < 0 || x >=columnNumber || y >= rowNumber) {
                    alert('四不四撒！！撞墙啦！也不看着点');

                    clearInterval(timer);
                    return;

                }

                 for ( var i = 0; i < snake.length; i++) {

                    if (snake[i] == snakeDIVPosition[y][x]) {
                        alert('咬着自己了！结束！气死本蛇了');
                        clearInterval(timer);
                        return;
                    };
                }
                snake[0].className = 'col';
                snake.shift();
                snakeDIVPosition[y][x].className = 'col activeSnake';

                snake.push(snakeDIVPosition[y][x]);
                check()


        }

3、蛇变向

 //蛇变向

        document.onkeydown = function(ev){

            if (!changeDir) {
                return;
            }
        var ev = ev || event;
        var keyCode = ev.keyCode;

        if(dir=="right"&&keyCode==37){


            return;
        }
         if(dir=="down"&&keyCode==38){

            return;
        }
         if(dir=="left"&&keyCode==39){
            return;
        }
         if(dir=="up"&&keyCode==40){
            return;
        }


        switch(keyCode){
           case 37:dir="left"; break;
           case 38:dir="up";break;
           case 39:dir="right";break;
           case 40:dir="down";break;

           case 65:dir="left";break;
           case 87:dir="up";break;
           case 68:dir="right";break;
           case 83:dir="down";break;

        }


      changeDir = false;
          delayTimer = setTimeout(function() {

        changeDir = true;
    }, 300);

    }

4、碰撞检测

//碰撞检测
        function check(){
            if (p==x&&q==y) {
                snakeDIVPosition[q][p].className = 'col activeSnake';
                snake.push(snakeDIVPosition[q][p]);
                food()
                index++;
                score.innerHTML=index;

            }


        }

5、创建食物

//创建食物
        function food(){

             p=parseInt(Math.random()*(rowNumber-1))
             q=parseInt(Math.random()*(columnNumber-1))

        if (snakeDIVPosition[q][p].className == 'col activeSnake') {

             food();
            } else {
                snakeDIVPosition[q][p].className = 'col food';
            }

        }

6、选择难度

//选择难度


        var speed=300;
        function hard(){
            var obj = document.getElementById("sel");
            var num=obj.selectedIndex;
            var text = obj.options[num].text; 
            var value = obj.options[num].value; 


            switch(value){
                case "1":
                    speed=300;
                    clearInterval(timer)
                break;
                case "2":
                speed=280;
                clearInterval(timer)
                break;
                case "3":
                speed=220;

                clearInterval(timer)

                break;

                case "4":
                speed=180;

                clearInterval(timer)
                 //timer = setInterval('autoMove()',speed);
                break;


            }
            //console.log(speed)
            //timer = setInterval('autoMove()', speed);

        }

7、上方按钮

“`
//各种按钮
var pause = document.getElementById(‘Pause’);
var start = document.getElementById(‘Start’);
var refresh = document.getElementById(‘Refresh’);

    // 添加暂停按钮
    pause.onclick = function() {
        clearInterval(timer);

    };
    // 添加开始按钮
    start.onclick = function() {
        clearInterval(timer);
        console.log(speed)
        timer = setInterval('autoMove()',speed);
    };
    // 添加刷新按钮
    refresh.onclick = function() {
        window.location.reload();
    };

拓展项：

• 吃不同的食物加分不同
• 吃有毒的食物游戏结束
• 加分多的食物有时间限制