js贪吃蛇

下载：源码地址

```javascript
// 全局变量
var sw = 20,
    sh = 20,
    td = 30,
    th = 30;

var snake = null; //蛇的实例对象
var game = null; //游戏的实例对象
var food = null; //食物的实例对象

// 方块
// 方块的构造函数及原型链方法
function Square(x, y, className) {
    this.x = x;
    this.y = y;
    this.class = className;

    this.viewContent = document.createElement('div');
    this.viewContent.className = this.class;
    this.parent = document.getElementsByClassName('snakeWrap')[0];
}

// 创建小方块，蛇头，蛇身都是小方块
Square.prototype.create = function () {
    this.viewContent.style.left = this.x * sw + 'px';
    this.viewContent.style.top = this.y * sh + 'px';
    this.parent.appendChild(this.viewContent);
}
// 移除小方块
Square.prototype.remove = function () {
    this.parent.removeChild(this.viewContent);
}

//蛇
// 蛇   的构造函数及原型链方法
function Snake() {
    this.head = null;
    this.tail = null;
    this.pos = [];
    this.directionNum = {
        left: {
            x: -1,
            y: 0,
            rotate : 180
        },
        right: {
            x: 1,
            y: 0,
            rotate : 0
        },
        up: {
            x: 0,
            y: -1,
            rotate : -90
        },
        down: {
            x: 0,
            y: 1,
            rotate : 90
        }
    }
}

// 初始化蛇
Snake.prototype.init = function () {
    var snakeHead = new Square(2, 0, 'snakeHead');
    snakeHead.create();
    this.head = snakeHead;
    this.pos.push([2, 0]);

    var snakeBody1 = new Square(1, 0, 'snakeBody');
    snakeBody1.create();
    this.pos.push([1, 0]);

    var snakeBody2 = new Square(0, 0, 'snakeBody');
    snakeBody2.create();
    this.tail = snakeBody2;
    this.pos.push([0, 0]);

    snakeHead.last = null;
    snakeHead.next = snakeBody1;

    snakeBody1.last = snakeHead;
    snakeBody1.next = snakeBody2;

    snakeBody2.last = snakeBody1;
    snakeBody2.next = null;


    this.direction = this.directionNum.right;
}

// 蛇获取移动的下一个点
Snake.prototype.getNextPos = function () {
    this.nextPos = [
        this.head.x + this.direction.x,
        this.head.y + this.direction.y
    ]
}

// 蛇移动下一步触发的事件
Snake.prototype.nextType = function () {
    this.getNextPos();
    var nextPos = this.nextPos;
    var flag = false;

    // 1.撞自己
    this.pos.forEach(function (value) {
        if (nextPos[0] == value[0] && nextPos[1] == value[1]) {
            flag = true;
            return;
        }
    })

    if(flag){
        console.log("撞到自己的了");
        game.over();
        return;
    }
    // 2.撞墙
    else if (nextPos[0] < 0 || nextPos[0] > td - 1 || nextPos[1] < 0 || nextPos[1] > th - 1) {
        console.log("撞墙了");
        game.over();
        return;
    }

    // 3.下一个是食物吃
    else if(food && nextPos[0] == food.pos[0] && nextPos[1] == food.pos[1]){
        console.log("食物")
        this.strategies.eat.call(this);
    }

    // 3.空，接着走
    else{
        this.strategies.move.call(this);
    }
}

Snake.prototype.strategies = {
    move : function(format) {
        var newBody = new Square(this.head.x, this.head.y, 'snakeBody');
        newBody.next = this.head.next;
        newBody.next.last = newBody;
        newBody.last = null;

        this.head.remove();
        newBody.create();


        var newHead = new Square(this.nextPos[0], this.nextPos[1], 'snakeHead');
        newHead.last = null;
        newHead.next = newBody;
        newBody.last = newHead;
        newHead.viewContent.style.transform = 'rotate('+ this.direction.rotate +'deg)';

        newHead.create();
        this.pos.unshift([this.nextPos[0], this.nextPos[1]]);
        this.head = newHead;

        if(!format){
            this.tail.remove();
            this.tail = this.tail.last;
            this.pos.pop();
        }
    },

    eat : function() {
        this.strategies.move.call(this, true);
        game.source++;
        Food();
    },

    die : function() {
        
    }
}

// 食物
// 食物的构造函数及方法
function Food () {
    var x = null;
    var y = null;
    var include = true;
    while(include) {
        x = Math.round(Math.random()* (td - 1));
        y = Math.round(Math.random()* (th - 1));
        snake.pos.forEach(function (value) {
            if(value[0] != x && value[1] != y){ 
                include = false;
            }
        })
    }

    food = new Square(x, y, 'snakeFood');
    food.pos = [x, y];

    var foodDom = document.querySelector('.snakeFood');
    if(foodDom){
        foodDom.style.left = x * sw + 'px';
        foodDom.style.top = y * sh + 'px';
    }else{
        food.create();
    }
}

// 游戏
// 游戏的 构造函数及方法
function Game() {
    this.timer = null;
    this.source = 0;
}

// 初始化游戏
Game.prototype.init = function () {
    snake.init();
    Food();
    document.onkeydown = function (ev) {
        var event = ev || window.ev;
        if (event.which == 37 && snake.direction != snake.directionNum.right) {
            snake.direction = snake.directionNum.left;
        } else if (event.which == 38 && snake.direction != snake.directionNum.down) {
            snake.direction = snake.directionNum.up;
        } else if (event.which == 39 && snake.direction != snake.directionNum.left) {
            snake.direction = snake.directionNum.right;
        } else if (event.which == 40 && snake.direction != snake.directionNum.up) {
            snake.direction = snake.directionNum.down;
        }
    }
    this.start();
}

// 开始游戏
Game.prototype.start = function () {
    this.timer = setInterval(function(){
        snake.nextType();
    },100)
}

// 暂停游戏
Game.prototype.pause = function () {
    clearInterval(this.timer);
}

// 游戏结束
Game.prototype.over = function () {
    clearInterval(this.timer);
    alert('得分为：' + this.source);
    var snakeWrap = document.getElementsByClassName('snakeWrap')[0];
    snakeWrap.innerHTML = " ";
    snake = new Snake();
    game = new Game();
    var start = document.getElementsByClassName('startBtn')[0];
    start.style.display = "block";
}

snake = new Snake();
game = new Game();


var start = document.querySelector('.startBtn button');
start.onclick = function () {
    start.parentNode.style.display = "none";
    game.init();
}

var snakeWrap = document.getElementsByClassName('snakeWrap')[0];
var pauseBtn = document.querySelector('.pauseBtn button')
snakeWrap.onclick = function () {
    game.pause();
    pauseBtn.parentNode.style.display = "block";
}

pauseBtn.onclick = function () {
    game.start();
    pauseBtn.parentNode.style.display = "none";
}