贪吃蛇完整代码

贪吃蛇案例的完整代码~  

HTML代码如下：

  <div class="container">
        <div class="map"></div>
        <div class="btn begin"><button></button></div>
        <div class="btn pause"><button></button></div>
    </div>

CSS代码如下： 

  * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 640px;
            height: 640px;
            position: relative;
            margin: 50px auto;
        }

        .btn button {
            border: 0;
            background: 0;
            background-size: 100%;
            cursor: pointer;
            /* outline: none; */
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
        }

        .begin button {
            width: 200px;
            height: 80px;
            background-image: url(./img/btn1.gif);
            transform: translate(-50%, -50%);
        }

        .pause button {
            display: none;
            width: 70px;
            height: 70px;
            background-image: url(./img/btn4.png);
            transform: translate(-50%, -50%);
        }

        .map {
            width: 600px;
            height: 600px;
            background-color: pink;
            border: 20px solid palevioletred;
            margin: 30px auto;
            position: relative;
        }

        /* .map div {   
            width: 24px;
            height: 24px;
        }  */
        .snakehead {
            background: url(./img/snake.png) no-repeat;
            background-size: cover;
        }

        .snakebody {
            background-color: #9ccc65;
            border-radius: 50%;
        }

        .food {
            background: url(./img/food2.png) no-repeat;
            background-size: 100% 100%;
        }

js代码：

  <script>
        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('.map');
        }
        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.pause = function () {
            clearInterval(this.timer);
        }
        Game.prototype.over = function () {
            clearInterval(this.timer);
            alert('你的得分为' + this.score + '分');

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

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

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

        // 暂停游戏
        var pauseBtn = document.querySelector('.pause button');
        var map = document.querySelector('.map');
        map.onclick = function () {
            pauseBtn.style.display = 'block';
            game.pause();
        }

        // 继续游戏

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

        }

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

    </script>