(function() {
    var t = null;
    var map = null;
    var food={x:0,y:0,div:null};
    var snake={
        //初始化时的蛇身部分
        snakeBody : [[1,2,null], [2,2,null], [3,2,null], [4,2,null]],
        direct : "right"
    };
    var config = {
        width:200,
        height:200,
        px:10,  //单位块大小
        mapColor:"#dddddd",
        foodColor:"#555555",
        snakeColor:"#666666",
        position:'absolute',
        speed:100
    };
    var showMap = function() {
        var div = document.createElement("div");
        div.style.width = config.width + "px";
        div.style.height= config.height + "px";
        div.style.backgroundColor = config.mapColor;
        div.style.position = config.position;
        document.getElementsByTagName("body")[0].appendChild(div);
        map = div;
    };
    var showFood = function() {
        var x = Math.floor(Math.random()*config.width/config.px);
        var y = Math.floor(Math.random()*config.height/config.px);
        food.x = x;
        food.y = y;
        if(food.div == null) {
            var div = document.createElement("div");
            div.style.width = config.px + "px";
            div.style.height= config.px + "px";
            div.style.backgroundColor = config.foodColor;
            div.style.position = config.position;
            div.style.left = x * config.px + "px";
            div.style.top = y * config.px + "px";
            map.appendChild(div);
            food.div = div;
        } else {
            food.div.style.left = x * config.px + "px";
            food.div.style.top = y * config.px + "px";
        }
    };
    var showSnake = function() {
        for(var i=0;i<snake.snakeBody.length; i++) {
            if(snake.snakeBody[i][2] == null) {
                var div = document.createElement("div");
                div.style.width = config.px + "px";
                div.style.height= config.px  + "px";
                div.style.backgroundColor = config.snakeColor;
                div.style.position = config.position;
                div.style.left = snake.snakeBody[i][0] * config.px + "px";
                div.style.top = snake.snakeBody[i][1] * config.px + "px";
                snake.snakeBody[i][2] = div;
                map.appendChild(div);
            } else {
                snake.snakeBody[i][2].style.left = snake.snakeBody[i][0] * config.px + "px";
                snake.snakeBody[i][2].style.top = snake.snakeBody[i][1] * config.px + "px";
            }
        }
    };
    var moveSnake = function() {
        var snakeLength = snake.snakeBody.length;
        for(var i=0; i<snakeLength-1; i++) {
            snake.snakeBody[i][0] = snake.snakeBody[i+1][0];
            snake.snakeBody[i][1] = snake.snakeBody[i+1][1];
        }
        //头部向前移动一步(区分方向)
        if(snake.direct == "right") {
            snake.snakeBody[snakeLength - 1][0] += 1;
        } else if(snake.direct == "left") {
            snake.snakeBody[snakeLength - 1][0] -= 1;
        } else if(snake.direct == "up") {
            snake.snakeBody[snakeLength - 1][1] -= 1;
        } else if(snake.direct == "down") {
            snake.snakeBody[snakeLength - 1][1] += 1;
        }
        for(var i=0; i<snakeLength-1; i++) {
            if(snake.snakeBody[i][0] == snake.snakeBody[snakeLength - 1][0] && snake.snakeBody[i][1] == snake.snakeBody[snakeLength - 1][1]) {
                alert("game over");
                clearInterval(t);
                return;
            }
        }
        //吃到食物
        if(snake.snakeBody[snakeLength - 1][0] == food.x && snake.snakeBody[snakeLength - 1][1] == food.y) {
            //蛇长加1
            snake.snakeBody.push([food.x, food.y, null])
            //刷新食物
            showFood();
        }
        if(snake.snakeBody[snakeLength-1][0]>=config.width/config.px || snake.snakeBody[snakeLength-1][0]<0 ||
            snake.snakeBody[snakeLength-1][1]>=config.height/config.px || snake.snakeBody[snakeLength-1][1] <0) {
            alert("game over");
            clearInterval(t);
            return;
        }
        showSnake();
    };
    var startGame = function() {
        showMap();
        showFood();
        showSnake();
        t = setInterval(function(){moveSnake()}, config.speed);
        window.onkeydown = function() {
            if(37 == event.keyCode) {
                snake.direct = "left";
            } else if(38 == event.keyCode) {
                snake.direct = "up";
            } else if(39 == event.keyCode) {
                snake.direct = "right";
            } else if(40 == event.keyCode) {
                snake.direct = "down";
            }
        }
    };
    startGame()
})()