五子棋
我想让你作为一个前端开发专家，帮我生成一个完整的五子棋小游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 生成一个 15x15 的棋盘网格。
- 支持双人对战，黑白棋子交替落子（黑棋先手）。
- 实时检测胜负：任意一方连成五子（横、竖、斜）即胜利，弹出提示并结束游戏。
- 提供“重置游戏”按钮，点击后清空棋盘重新开始。
- 显示当前轮到哪方落子（例如“当前轮到：黑棋”）。
3. **样式与交互**：
- 棋盘使用 CSS Grid 布局，格子边长自适应屏幕大小，保证在小屏幕上也能正常显示。
- 棋子为圆形，黑棋为黑色填充，白棋为白色填充带黑色边框。
- 点击棋盘格子落子，手机端支持触摸点击。
- 界面简洁美观，背景色柔和（如浅灰色），棋盘有边框和格线。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- 支持响应式设计，棋盘和控件大小随窗口缩放自动调整。
- 在手机端，触摸事件需与鼠标点击事件等效。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化，代码注释中可以说明。
2048 小游戏
我想让你作为一个前端开发专家，帮我生成一个完整的 2048 小游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 生成一个 4x4 的棋盘网格。
- 游戏开始时随机生成两个数字方块（值为 2 或 4）。
- 支持上下左右滑动合并方块：相同数字相邻时合并为两倍值，滑动后随机生成一个新方块（2 或 4）。
- 检测胜负：合成 2048 时弹出“胜利”提示；棋盘满且无法移动时弹出“游戏结束”提示。
- 提供“重置游戏”按钮，点击后清空棋盘并重新开始。
3. **样式与交互**：
- 棋盘使用 CSS Grid 布局，方块边长自适应屏幕大小，保证在小屏幕上也能正常显示。
- 每个方块显示数字，背景色根据数字大小变化（如 2 为浅黄色，4 为浅橙色，依次加深）。
- 支持键盘方向键（上下左右）控制，手机端支持触摸滑动（检测手势方向）。
- 界面简洁美观，背景色柔和（如浅灰色），棋盘有边框和格线。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- 支持响应式设计，棋盘和控件大小随窗口缩放自动调整。
- 在手机端，触摸滑动事件需与键盘事件等效。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化，代码注释中可以说明。
贪吃蛇
我想让你作为一个前端开发专家，帮我生成一个完整的贪吃蛇小游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 使用 <canvas> 元素绘制游戏内容。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 游戏区域为 400x400 像素的矩形（逻辑上划分为 20x20 网格）。
- 初始时生成一条长度为 3 的蛇（绿色方块）和一个随机位置的食物（红色方块）。
- 蛇自动移动，吃到食物后变长 1 格并增加分数，食物重新随机生成。
- 检测失败：蛇撞到边界或自身时弹出“游戏结束”提示并显示分数。
- 提供“重启游戏”按钮，点击后重置蛇和分数。
3. **样式与交互**：
- 使用 canvas 绘制蛇和食物，背景色为浅灰色，边框为深灰色。
- 支持键盘方向键（上下左右）控制蛇的移动方向，手机端支持触摸滑动（检测手势方向）。
- 显示实时分数（例如“分数：10”），位于 canvas 上方。
- 动画流畅，每秒刷新 10-15 次。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- canvas 大小在手机端自适应屏幕宽度（最大不超过屏幕宽度）。
- 在手机端，触摸滑动事件需与键盘事件等效。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化，代码注释中可以说明。
俄罗斯方块
我想让你作为一个前端开发专家，帮我生成一个完整的俄罗斯方块小游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 使用 <canvas> 元素绘制游戏内容。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 游戏区域为 10x20 的网格（每个格子 20x20 像素，总大小 200x400 像素）。
- 随机生成下落方块（包括 I、O、T、S、Z、J、L 七种经典形状）。
- 方块自动下落，每秒下降一格，吃到满行时消除并加分。
- 检测失败：方块堆积到顶部时弹出“游戏结束”提示并显示分数。
- 提供“重启游戏”按钮，点击后清空网格并重置分数。
3. **样式与交互**：
- 使用 canvas 绘制方块和网格，背景色为浅灰色，方块颜色根据形状不同（例如 I 为青色，O 为黄色）。
- 支持键盘控制：左/右键移动，上下键旋转和加速下落。
- 手机端支持触摸操作：左右滑动移动，向上滑动旋转，向下滑动加速。
- 显示实时分数（例如“分数：100”），位于 canvas 上方。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- canvas 大小在手机端自适应屏幕宽度（最大不超过屏幕宽度）。
- 在手机端，触摸事件需与键盘事件等效。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化，代码注释中可以说明。
迷宫游戏
我想让你作为一个前端开发专家，帮我生成一个完整的迷宫游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 生成一个 10x10 的迷宫网格，使用简单的递归回溯算法随机生成（确保从起点到终点始终有解）。
- 起点固定在左上角 (0,0)，终点固定在右下角 (9,9)。
- 玩家控制一个小球从起点移动到终点，计时从第一次移动开始，精确到毫秒。
- 小球到达终点时，停止计时，弹出“胜利”提示并显示用时（例如“用时：12.345秒”）。
- 提供两个按钮：“重置游戏”将小球移回起点并重置计时，“重新生成迷宫”生成新迷宫并重置游戏状态。
3. **样式与交互**：
- 迷宫使用 CSS Grid 布局，每个格子 40x40 像素，墙为黑色实线（2px 粗），路径为白色，小球为红色圆形（直径 30 像素），起点为绿色方块，终点为蓝色方块。
- 小球移动时有平滑过渡动画（0.2 秒），撞墙时无法通过并轻微抖动（视觉反馈）。
- 支持键盘方向键（上下左右）控制小球，单次按键移动一格。
- 手机端支持触摸滑动：检测滑动方向（上下左右），滑动距离超过 20 像素时移动一格，避免误触。
- 显示实时计时（例如“时间：12.345秒”），位于游戏区域上方，游戏未开始时显示“时间：0.000秒”。
- 界面简洁，背景色为浅灰色 (#e0e0e0)，迷宫区域有深灰色边框。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- 支持响应式设计，迷宫网格大小随窗口缩放调整，手机端每个格子最小 30x30 像素（若屏幕过小，保持 10x10 网格并启用滚动）。
- 手机端触摸滑动事件与键盘事件等效，支持连续滑动操作。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化（例如迷宫生成算法的具体实现或胜利时的动画效果），代码注释中可以说明。
飞机大战
我想让你作为一个前端开发专家，帮我生成一个完整的飞机大战小游戏的前端代码，要求如下：
1. **技术栈**：
- 使用 HTML、CSS 和纯 JavaScript 实现，不依赖任何框架或外部库。
- 使用 <canvas> 元素绘制游戏内容。
- 代码结构清晰，注释简洁明了，方便理解。
2. **游戏功能**：
- 游戏区域为 300x500 像素，玩家控制一架飞机（底部初始位置），敌机从顶部随机生成。
- 玩家飞机每隔 0.5 秒自动发射子弹，击落敌机加 10 分，敌机到达底部或撞到玩家飞机则游戏结束。
- 敌机每隔 2 秒生成一架，随机水平位置向下移动。
- 提供“重启游戏”按钮，点击后重置飞机位置和分数。
3. **样式与交互**：
- 玩家飞机为蓝色三角形，敌机为红色方块，子弹为黄色小圆点，背景色为浅灰色。
- 支持键盘左右键移动飞机，按空格键发射子弹，手机端触摸滑动控制移动并自动射击。
- 显示实时分数（例如“分数：50”），位于 canvas 上方。
- 动画流畅，子弹和敌机匀速移动。
4. **适配性**：
- 确保游戏在 PC 和手机浏览器上都能流畅运行。
- canvas 大小在手机端自适应屏幕宽度（最大不超过屏幕宽度）。
- 在手机端，触摸滑动事件需与键盘事件等效。
5. **输出要求**：
- 提供完整的 HTML 文件代码（包含内联的 <style> 和 <script> 标签）。
- 代码直接复制到浏览器开发者工具中即可运行并体验。
- 不要生成图片或外部资源依赖，确保代码自包含。
请生成符合以上要求的完整代码，并确保逻辑正确、可玩性强。如果有任何假设或优化，代码注释中可以说明。
