序言

欢迎来到贪吃蛇的世界！

在这篇博客中，我们将一起探索如何使用HTML、CSS和JavaScript创建一个经典的贪吃蛇游戏。

贪吃蛇，作为一款极具代表性的经典游戏，以其简单而引人入胜的游戏机制备受欢迎，老少咸宜~

作为编程练手而言，通过实现贪吃蛇游戏，可以学习和巩固许多前端开发的基础知识，如 DOM 操作、事件处理、画布绘制等。

废话少说，直接开冲！！

实现思路

首先，游戏的主要元素是：蛇、食物、障碍物；

通常来说：其中障碍物是游戏的边界；

本次，我想新增设置一个机制：即根据贪吃蛇不断增长的长度，在墙内也不断随机新增障碍物，以增加游戏的难度~

因为是基础本 HTML 代码练手，就是老三样：

• HTML结构：负责HTML元素的组织。
• CSS样式：简易的像素点及颜色。
• JavaScript逻辑：描述如何初始化游戏元素、游戏循环和 Canvas 绘图函数、分析碰撞检测的逻辑等

实现关键在于：

• 处理用户输入，控制蛇的移动
• 检测碰撞，以及碰撞后如何处理
• 态添加食物和障碍物

另外还要加一个按钮，用于撞墙后，重新开始游戏~ 避免手动刷新

代码实现

    
    
    
    




重新开始

运行效果

本地网页运行：

码上掘金：

https://code.juejin.cn/pen/7293778946855239730

上下左右键操作：黑色以及黑框边界为障碍物；绿色为蛇头；红色为食物；

优化思考

通常以我们探究（尤其面试中）的尿性，实现之后都要想想优化的可能性：

对于一个基本的贪吃蛇游戏来说，以上代码性能应该是可以接受的，存在一些可以优化的地方比如有：

1、以考虑将相关的变量和函数组织成对象；

2、其中，每个游戏循环都会清除整个画布然后重新绘制。可以考虑只清除和绘制发生变化的部分；

3、碰撞检测可以更加高效：例如，检查蛇头是否碰到蛇身，可以从蛇的第四个部分开始检查，因为前三个部分不可能与蛇头碰撞；

4、还有当生成新的食物或障碍物时，应该确保它们不会出现在蛇的身体上，可以添加一个检查来确保新生成的食物或障碍物的位置是空闲的

function generatePosition() {
    let position;
    do {
        position = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };
    } while (collision(position, snake) || collision(position, obstacles));
    return position;
}

food = generatePosition();

5、考虑使用 requestAnimationFrame 替代 setInterval 来创建游戏循环。requestAnimationFrame 有更好的性能（这个很多文章都有讲了，就不作展开了）

function gameLoop() {
    draw();
    requestAnimationFrame(gameLoop);
}

gameLoop();

OK，以上就是本次分享~~

有兴趣的掘友们可基于此版自行动手试试~