纯JS实现贪吃蛇游戏 —— 可能是全网代码最优雅的实现

说在前面

在网上看了许多的贪吃蛇这类游戏，效果基本还可以，功能也实现了，不过看代码大都是冗余或杂乱不堪的，难以维护。

所以花了点时间，对整个游戏重构了一下，也算是站在各位前辈的肩膀上做的优化，希望对大家有帮助。

效果图.gif

功能描述

生成一条蛇，可以上下左右移动，目标只有一个：吃食物。吃到一个食物蛇的身体增加一节，然后生成下一个食物，撞到地图就GG，game over。

设计思路

1. 整体实现采用原生JS，使用ES6的Class类构造，完美的诠释了面向对象编程的编程思想。

2. js 主体文件分成 food.js（食物类），snake.js（蛇类）, game.js（游戏入口文件），util.js（工具函数）。讲道理，地图也需要用到一个map.js（地图类），由于这里的地图过分简单，所以不搞也罢。

3. 设计思路图解：

 

 

1. 工具类设计 ( util.js )

目标功能点：

• 生成随机坐标

export function getRandom(a, b){
    let max = Math.max(a, b);
    let min = Math.min(a, b);
    return parseInt(Math.random() * (max - min)) + min;
}

2. 食物类设计（food.js）

目标功能点：

• 初始化食物（宽，高，颜色等）
• 在地图上随机生成
• 管理食物（删除）

import { getRandom } from './util.js';
// 食物类
class Food {
    // 初始化
    constructor({x = 0, y = 0, width = 20, height = 20, color = 'green'} = {}){
        // 结构赋值 参数默认值
        // let options = {x = 0, y = 0, width = 20, height = 20, color = 'green'} || {};
        // 存储食物
        this.elements = [];
        // 坐标
        this.x = x;
        this.y = y;

        this.width = width;
        this.height = height;
        this.color = color;
    }

    render(map){
        this.remove(); // 删除之前创建的食物

        // 随机设置x,y的值
        this.x = getRandom(0, map.offsetWidth / this.width - 10) * this.width;
        this.y = getRandom(0, map.offsetHeight / this.height - 1) * this.height;
        console.log(this.x, this.y);

        // 创建食物 dom
        let div = document.createElement('div');
        map.appendChild(div);
        this.elements.push(div);

        // 设置div的样式
        div.style.position = 'absolute';
        div.style.left = this.x + 'px';
        div.style.top = this.y + 'px';
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px';
        div.style.backgroundColor = this.color;
    }
    remove() {
        // 从后往前
        for(let i = this.elements.length -1; i >= 0; i--){
            this.elements[i].parentNode.removeChild(this.elements[i]); // 删除div
            this.elements.splice(i, 1); // 删除数组中的元素
        }
    }
}
export default Food;

3. 蛇类（snake.js）

目标功能点：

• 初始化蛇（宽，高，颜色、长度等）
• 在地图上初始定位
• 蛇的移动与管理（吃一个食物生成一个新的蛇对象）
• 判断是否吃到食物（蛇头的坐标与食物坐标重合）

// 蛇类
class Snake {
    constructor({ width = 20, height = 20, direction = 'right'  } = {}){
          // 存储蛇
          this.elements = [];

          this.width = width;
          this.height = height;
          this.direction = direction;
          // 蛇的身体 初始三节
          this.body = [
              {x: 3, y: 2, color: 'red'},
              {x: 2, y: 2, color: 'blue'},
              {x: 1, y: 2, color: 'blue'},
          ];
    }

    render(map){
        this.remove(); // 删除之前创建的蛇
        for(let i = 0, len = this.body.length; i <  len; i++ ){
            let object = this.body[i];

            let div = document.createElement('div');
            map.appendChild(div);
            this.elements.push(div);

             // 设置样式
             div.style.position = 'absolute';
             div.style.width = this.width + 'px';
             div.style.height = this.height + 'px';
             div.style.left = object.x * this.width + 'px';
             div.style.top = object.y * this.height + 'px';
             div.style.backgroundColor = object.color;
        }
    }

    move(food, map){
        // 控制蛇的移动 (当前蛇节 移动到上一个蛇节)
        for(let i = this.body.length - 1; i > 0; i--){
            this.body[i].x = this.body[i - 1].x; 
            this.body[i].y = this.body[i - 1].y; 
        }
        // 蛇头
        let head = this.body[0];

        // 蛇头的行进方向
        switch(this.direction) {
            case 'right':
                head.x += 1;
                break;
            case 'left':
                head.x -= 1;
                break;
            case 'top':
                head.y -= 1;
                break;
            case 'bottom':
                head.y += 1;
                break;
        }

        // 蛇吃食物
        // 判断蛇头的位置是否与食物的位置重合
        let  headX = head.x * this.width;
        let  headY = head.y * this.height;

        if(headX === food.x && headY === food.y){
            let last = this.body[this.body.length -1 ];
            this.body.push({
                x: last.x,
                y: last.y,
                color: last.color
            });
            // 重新生成一个食物
            food.render(map);
        }
    }
    remove() {
        for (let i = this.elements.length - 1; i >= 0; i--) {
            // 删除div
            this.elements[i].parentNode.removeChild(this.elements[i]);
            // 删除数组中的元素
            this.elements.splice(i, 1);
        }
    }
}

export default Snake;

4. 游戏入口文件（game.js）

目标功能点：

• 实例化蛇与食物
• 让蛇动起来
• 绑定按键，控制方向
• 开始游戏
• 当蛇撞到地图边缘GG，显示 game over！

import Food from "./food.js";
import Snake from "./snake.js";
// 游戏的入口文件
class Game {
    constructor() {
        // 创建食物和蛇的实例
        this.food = new Food();
        this.snake = new Snake();
        this.map = map;
        // 定时器
        this.timerId = null;
    }
    start() {
        // 食物和蛇 渲染到地图上
        this.food.render(this.map);
        this.snake.render(this.map);
        this.runSnake(); 
        this.bindKey();

    }
    // 让蛇动起来
    runSnake() {
         this.timerId = setInterval( () => {
            // 要获取游戏对象中的蛇属性
            this.snake.move(this.food, this.map);
            // 2.2  当蛇遇到边界游戏结束
            var maxX = this.map.offsetWidth / this.snake.width;
            var maxY = this.map.offsetHeight / this.snake.height;
            var headX = this.snake.body[0].x;
            var headY = this.snake.body[0].y;
            if (headX < 0 || headX >= maxX || headY < 0|| headY >= maxY) {
                console.log('Game Over');
                clearInterval(this.timerId);
                return
            }
            this.snake.render(this.map);  // 根据body 的数据 重新渲染蛇在页面位置
        }, 150);
    }
    // 绑定键盘事件 控制蛇的方向
    bindKey() {
        document.addEventListener('keydown',  (e) => {
            switch (e.keyCode) {
                case 37:
                    this.snake.direction = 'left';
                    break;
                case 38:
                    this.snake.direction = 'top';
                    break;
                case 39:
                    this.snake.direction = 'right';
                    break;
                case 40:
                    this.snake.direction = 'bottom';
                    break;
            }
        });
    }
}
export default Game;

5. 调用（index.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="map" style="width:80%;height:400px;border: 1px solid orange;"></div>
    <script type="module">
        import Game from './game.js';
        // 全局的地图 map
        let map = document.getElementById('map');
        let game = new Game(map);
        // 调用开始方法
        game.start();
    </script>
</body>

</html>

FAQ：

由于整个项目采用ES6的模块设计，所以需要启动一个本地服务才可以跑，单独点开index.html，是没得用的。

如果您老这个游戏玩的开心，学到了新的东西，可以关注、点赞、收藏、转发、评论一波，您的鼓励是我创作的最大动力！

以后将为各位客官保持优质内容的持续输出。