我在 React 中创建了一个贪吃蛇游戏

TL;DR：我使用 React、HTML Canvas 和 TypeScript 构建了这个经典的“贪吃蛇游戏”。没有使用任何第三方库。

动图

• 玩游戏：https://snakes-game-nine.vercel.app/
• 源代码：https://github.com/menard-codes/snakes-game

背景故事

前几天，我无聊地躺在秋千上，突然冒出一个念头。我记得以前我经常用诺基亚手机玩贪吃蛇游戏。所以我就想，我该怎么开发一个这样的游戏呢🤔。

我擅长的是 Web 开发，我不是游戏开发者，以前也从未开发过游戏，所以这将是一个挑战。

但应对挑战也是我的事。

于是我坐在那里几个小时，构思这个可能成为“新项目”的项目，看看能否实现。我在手机上写下了我的想法和项目结构，以及一些伪代码。

经过一段时间的思考，我想我可以构建这个东西，并且我的手机里有一个粗略的概念，所有的游戏逻辑都已准备好实现并测试这个想法是否可行。

开发时间

我很兴奋能开始这个项目。于是我带着手机，记录着我的想法，走到电脑前，打开了 VS Code。

我已经想好了应该用什么技术。唉，我觉得选择不多，我只懂 React（就像我说的，我只是个 Web 开发者😅）。不过，既然游戏主要用 HTML Canvas 实现，我觉得 React 应该可以不用，因为我不用框架就能构建。不过，我还是坚持了下来，因为我之前没用过这种复杂的 Canvas Element 逻辑来构建 React 项目，所以就尝试了一下。

当然，我使用了 TypeScript😉。

哦，没有 CSS 库。简单的 CSS 就够了，因为 UI 不会太复杂，而且需要样式的组件也不会太多。

经过几个小时的编码（以及大量的调试），我终于实现了游戏逻辑，我的想法也终于实现了。虽然还有些粗糙，但游戏已经可以运行了。

这是我制作的第一款游戏，制作完成的喜悦无价。它刚刚还是个想法，现在我已经开始玩了。

无论如何，我现在也有点累了，所以前几天我又继续了。

所以第二天，我花了大部分时间修复代码中的几个错误。我还添加了一些新功能，比如计分、最高分以及暂停/播放。

然后就完成了。我欣喜若狂。我把它展示给我的兄弟们，让他们玩了一会儿（同时也看看他们是否会遇到一些bug，结果他们确实遇到了）。

在修复这些小错误并使游戏完全正常运行后，我将其托管在 Vercel 上并撰写了此博客。

演示

动图

• 玩游戏：https://snakes-game-nine.vercel.app/
• 源代码：https://github.com/menard-codes/snakes-game

特征

• 经典贪吃蛇游戏
• 分数追踪
• 保存高分
• 游戏结束屏幕，可选择重新开始
• 用于导航的键盘控制

技术栈

• React.js 和 HTML Canvas
• TypeScript 类型安全
• 未使用第三方库

游戏控制

使用键盘上的箭头键或W、A、S、D键来控制蛇的方向：

↑（向上）或W- 向上移动
↓（向下）或S- 向下移动
←（向左）或A- 向左移动
→（向右）或D- 向右移动

其他的：

• 暂停游戏 - 按下esc或点击屏幕上的任意位置