用js创建对象的方式做贪吃蛇

项目要求：

1. 在页面地图上显示一个食物的方块盒子, 位置是随机显示的.
2. 需要盒子被蛇吃后要消失, 并且重新随机生成新的食物盒子
3. 在页面上初始化一条蛇长3个食物宽度, 并且初始化移动方向是向右
4. 让蛇可以在页面上移动
5. 让蛇吃掉食物后, 身体变长

---

效果展示：

---

代码展示：

   <div class="content">
        <div class="btn startBtn"><button></button></div>
        <div class="btn pauseBtn"><button></button></div>
        <div class="snakewrap"> </div>     
    </div>

var snake = null;
var food = null;
var game = null;
var sw = 20, // 长
    sh = 20, // 宽
    tr = 30,
    td = 30;

function Square(x, y, classname) {
    this.x = x * sw;
    this.y = y * sh;
    this.class = classname;
    this.div = document.createElement('div');
    this.div.className = this.class;
    this.parent = document.querySelector('.snakewrap');
}
Square.prototype.create = function() {
    this.div.style.position = 'absolute';
    this.div.style.width = sw + 'px';
    this.div.style.height = sh + 'px';
    this.div.style.left = this.x + 'px';
    this.div.style.top = this.y + 'px';
    this.parent.appendChild(this.div);
}
Square.prototype.remove = function() {
    this.parent.removeChild(this.div);
}

//创建蛇对象
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]);
    // 创建蛇身体1
    var snakeBody1 = new Square(1, 0, 'snakeBody');
    snakeBody1.create();
    this.pos.push([1, 0]);
    // 创建身体2
    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() {
    var nextPos = [
            this.head.x / sw + this.direction.x,
            this.head.y / sh + this.direction.y
        ]
        // console.log(nextPos);
        // 下个点是自己--结束
    var selfCollied = false;
    this.pos.forEach(function(value) {
        if (value[0] == nextPos[0] && value[1] == nextPos[1]) {
            selfCollied = true;
        }
    });
    if (selfCollied) {
        console.log('游戏结束，撞到自己了');
        this.strategies.die();
        return;
    }
    // 下个点是墙 --结束
    if (nextPos[0] < 0 || nextPos[0] > td - 1 || nextPos[1] < 0 || nextPos[1] > tr - 1) {
        console.log('游戏结束，撞到墙了');
        this.strategies.die();
    }
    // 下个点是食物--吃 
    if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {
        // 成立说明蛇头的下一个点是食物 --吃！
        this.strategies.eat.call(this)
            // console.log('吃!');
        return;
    }
    // 下个点啥也不是--走
    this.strategies.move.call(this);
};
Snake.prototype.strategies = { //碰撞之后进行处理
    move: function(format) {
        // console.log('move');
        // 创建新身体
        var newbody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody');
        newbody.next = this.head.next;
        newbody.next.last = newbody;
        newbody.last = null;
        this.head.remove();
        newbody.create();
        // 创建新头
        var newhead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead');
        newhead.last = null;
        newhead.next = newbody;
        newbody.last = newhead;
        newhead.div.style.transform = 'rotate(' + this.direction.rotate + 'deg)';

        // 更改数组的值
        this.pos.unshift([this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y]); //在数组最前面添加元素
        // this.pos.splice(0,0,[this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y])
        this.head = newhead;
        // console.log(this.pos);
        newhead.create();

        // 判断是否需要删除尾 即吃到了食物就不删
        if (!format) { // 如果format的值为false，表示需要删除，即除了吃到食物以外的情况
            this.tail.remove();
            this.tail = this.tail.last;
            this.pos.pop();
        }
    },
    eat: function() {
        // console.log('eat');
        this.strategies.move.call(this, true);
        CreateFood();
        game.score++;
    },
    die: function() {
        console.log('die');
        game.over();

    }
}
snake = new Snake();

// 创建食物 
function CreateFood() {
    var x = null;
    var y = null;
    var include = true; // 让生成的食物不在蛇的身上，true会继续循环
    while (include) {
        // x = Math.round(Math.round() * (td - 1));
        x = getRandom(1, 29);
        y = getRandom(1, 29);

        snake.pos.forEach(function(value) {
            if (x != value[0] && y != value[1]) {
                include = false;
            }
        });
    }
    // 生成食物
    food = new Square(x, y, 'food');
    food.pos = [x, y]; // 存储食物的坐标 与蛇头要走的下一个点作对比 
    var foodDom = document.querySelector('.food');
    console.log(foodDom);
    if (foodDom) {
        foodDom.style.left = x * sw + 'px';
        foodDom.style.top = y * sh + 'px';
    } else {
        food.create();
        console.log(foodDom);
    }
}

function Game() {
    this.timer = null;
    this.score = 0;
}
Game.prototype.init = function() {
    snake.init();
    // snake.getNextPos();
    CreateFood();
    document.onkeydown = function(event) {
        console.log(event.which);
        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() { //开始游戏
    clearInterval(this.timer);
    this.timer = setInterval(function() {
        snake.getNextPos();
    }, 200)
}
Game.prototype.pauseBtn = function() {
    clearInterval(this.timer);
}
Game.prototype.over = function() {
    clearInterval(this.timer);
    alert('你的得分为' + this.score + '分');

    // 游戏回到最初状态
    snakewrap.innerHTML = '';
    snake = new Snake();
    game = new Game();

    var startBtn = document.querySelector('.startBtn');
    startBtn.style.display = 'block';
}

// 开启游戏
game = new Game();
var startBtn = document.querySelector('.startBtn');
startBtn.onclick = function() {
    startBtn.style.display = 'none';
    game.init();
}

// 暂停游戏
var pauseBtn = document.querySelector('.pauseBtn');
var snakewrap = document.querySelector('.snakewrap');
snakewrap.onclick = function() {
    pauseBtn.style.display = 'block';
    // console.log(222);
    game.pauseBtn();
}

// 继续游戏

pauseBtn.onclick = function() {
    game.start();
    pauseBtn.style.display = 'none';

}

// 随机函数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}