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

时间:2021-1-18 作者:admin

说在前面

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

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

效果图.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,是没得用的。

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。