博客悬浮工具箱添加“贪吃蛇”

📝 博客悬浮工具箱添加“贪吃蛇”小游戏操作记录

第一步：新建游戏组件文件

• 文件路径：my-blog-manager/components/toolbox/
• 文件名：SnakeGame.tsx
• 操作：在这个文件夹里新建该文件，并把之前的贪吃蛇 React 代码（包含 useState, useEffect, useRef, framer-motion）完整粘贴进去。
• 核心逻辑：10x10 像素网格，使用 setInterval 实现游戏主循环，监听键盘方向键控制蛇的移动，用 useRef 避免闭包陷阱。
• （最后复制文件到：XHBlogs\components\toolbox）

‍

第二步：在“总指挥”文件中注册并挂载

• 文件路径：my-blog-manager/components/GlobalToolbox.tsx （即控制左下角悬浮开关和工具栏的主文件）
• 操作1（引入组件）：在文件顶部引入刚写好的贪吃蛇组件。

tsx

import SnakeGame from './toolbox/SnakeGame';
* 操作2（注册插件）：找到文件中的 TOOL_REGISTRY 数组，在里面添加贪吃蛇的配置项。

tsx

const TOOL_REGISTRY = [
  { id: 'calc', name: '计算器', icon: '🧮', component: <CalculatorTool /> },
  { id: 'snake', name: '贪吃蛇', icon: '🐍', component: <SnakeGame /> }, // 新增这一行
];

‍

第三步：调整样式以适配悬浮窗尺寸（关键！）

• 文件路径：my-blog-manager/components/toolbox/SnakeGame.tsx
• 操作：修改 SnakeGame.tsx 最外层 motion.div 的 className，防止它因为父容器太窄而挤成一团或者不显示。

修改前：className="flex flex-col gap-3 w-64"

修改后：className="flex flex-col gap-3 w-full aspect-square"

‍

第四步：本地测试运行

• 运行本地项目（双击 Start.bat 或终端 npm run dev）。
• 打开网页，点击左下角悬浮按钮展开工具箱。
• 点击“🐍 贪吃蛇”标签，测试游戏能否正常开始、键盘控制是否有效、得分和重新开始功能是否正常。确保浏览器控制台（Console）没有报红字错误。

‍

第五步：同步与部署（你总结的完美闭环）

因为博客有特殊的“四个保存地”，测试成功后，必须按照以下顺序同步，以防代码转义或丢失：

1. 本地测试并修改完毕。
2. 同步到本地控制台（修改控制台端的文件代码，确保它也有这份代码，不再被转义为文本）。
3. 上传到 Git 仓库（Git commit & push）。
4. Vercel 自动拉取更新，完成网页端的发布。

‍