使用CodeBuddy开发《凡人修仙传》画风修仙版黄金矿工小游戏

一、前言

本文为使用CodeBuddy开发修仙版黄金矿工小游戏的完整学习笔记，严格按照“前期准备→操作步骤→注意事项→进阶优化”的逻辑整理，贴合网页HTML开发学习需求，兼顾实用性和可操作性，可直接对照执行，同时记录核心要点，方便后续复习和修改。

二、核心开发前提

1. 开发工具：CodeBuddy（无需额外安装，网页端/客户端均可，支持HTML+CSS+JavaScript单文件生成）

https://www.codebuddy.cn/ide/

2. 游戏核心设定
   • 玩法 ：复刻黄金矿工，将“钩子”改为修真法门，“矿石”改为修仙四大资源（财侣法地）
   • 画风 ：《凡人修仙传》水墨国风、清冷仙侠调，低饱和青灰配色，简约大气
   • 技术栈 ：纯前端（HTML+CSS+JavaScript），无框架、无后端，可直接在浏览器运行
3. 核心目标：通过CodeBuddy快速生成完整可玩游戏，掌握“提示词编写→资源准备→代码生成→调试优化”的全流程

三、前期准备

3.1 资源准备

资源类型	文件名	内容要求	尺寸建议	作用	可选性
背景图	bg.jpg	凡人修仙传风格，山洞、灵脉、地底秘境，水墨质感	800×600px	优化游戏背景，贴合修仙氛围	可选（不准备则用CSS渐变实现）
钩子图标	hook.png	修真法器样式（金钩、锁链），简约线条，贴合水墨风	64×128px	替代CSS绘制的钩子，更有修仙感	可选
物品图标	灵石.png、功法.png等	财侣法地四类资源图标，简约水墨风	32×32px/64×64px	替代CSS绘制的物品，视觉更清晰	可选

https://ezremove.ai/zh/ 背景透明

https://snapcute.toolooz.com/ 切图

image

image

资源说明：

1. 背景图片：bg.png
2. 人物：zy_p.png
3. 物品图片：
   1. 下品灵石 ：zy_ls1.png
   2. 中品灵石 ：zy_ls2.png
   3. 上品灵石 ：zy_ls3.png
   4. 极品灵石 ：zy_ls4.png
   5. 上品法器 ：zy_fq2.png
   6. 中品法器 ：zy_fq1.png
   7. 道侣玉符 ：zy_yf1.png
   8. 灵玉 ：zy_ly1.png
   9. 灵脉晶石 ：zy_lmj.png
   10. 玄级功法：zy_gf1.png
   11. 上品功法残篇：zy_gf2.png
   12. 符箓：zy_fulu1.png

3.2 提示词准备

基础版提示词

请使用 HTML + CSS + JavaScript 开发一款仿黄金矿工玩法的修仙主题网页小游戏，画风严格参考《凡人修仙传》水墨国风、清冷仙侠风格，色调以青、灰、黑、浅黄为主，简约大气。
游戏核心玩法与机制：
1. 玩家操控钩子（仙剑）自动左右摆动，按空格键发射钩子，抓取地下修仙资源，抓取后自动收回并计分。
2. 所有资源图片统一放在 imgs/ 目录下，代码中使用正确路径加载。
3. 游戏包含关卡系统，每关有目标分数，倒计时60秒，时间内达标则晋级下一关，否则游戏结束。
4. 界面显示：实时分数、当前关卡、倒计时、目标分数。游戏结束显示重新开始按钮，支持重启游戏。



资源与图片路径（必须严格使用）：
1. 背景图片：imgs/bg.png
2. 玩家角色（修士）：imgs/zy_p.png

物品图片与对应分数：

【财】

1. 下品灵石：imgs/zy_ls1.png → 10分
2. 中品灵石：imgs/zy_ls2.png → 30分
3. 上品灵石：imgs/zy_ls3.png → 50分
4. 极品灵石：imgs/zy_ls4.png → 100分
5. 灵玉：imgs/zy_ly1.png → 120分



【侣】
1. 道侣玉符：imgs/zy_yf1.png → 200分



【法】
1. 符箓：imgs/zy_fulu1.png → 120分
2. 上品功法残篇：imgs/zy_gf2.png → 180分
3. 玄级功法：imgs/zy_gf1.png → 300分
4. 中品法器：imgs/zy_fq1.png → 150分
5. 上品法器：imgs/zy_fq2.png → 250分



【地】

1. 灵脉晶石：imgs/zy_lmj.png → 500分



美术与界面要求：
1. 背景使用 imgs/bg.png 铺满全屏，修仙灵脉矿洞风格。
2. 顶部显示修仙小道人（imgs/zy_p.png）。
3. 钩子使用 imgs/zy_xianjian.png，实现摆动、伸出、收回动画。
4. 所有资源物品使用对应图片，禁止使用CSS绘制物品。
5. 界面风格：水墨仙侠、半透明面板、文字简洁、低饱和度、凡人修仙传氛围。


代码要求：
1. 输出完整可直接运行的单文件HTML代码。
2. 图片路径全部使用 imgs/xxx.png 格式。
3. 功能完整：钩子摆动、发射、收回、碰撞检测、计分、关卡、倒计时、重启。
4. 代码结构清晰，注释详细，交互流畅。
5. 禁止使用外部图片链接，全部使用本地imgs路径。

四、CodeBuddy开发完整操作步骤

步骤1：打开CodeBuddy，打开文件夹

1. 打开CodeBuddy（网页端/客户端），登录账号后，点击“打开文件夹”，
2. 确认文件格式正确，无需添加默认代码，清空编辑区，准备粘贴提示词。

步骤2：粘贴提示词，提交生成请求

1. 复制“基础版提示词”（优先生成基础游戏，后续再优化），粘贴到CodeBuddy的编辑区。
2. 若未准备任何外部资源（背景图、图标），在提示词末尾添加补充说明：“所有物品、角色、背景均用CSS绘制，不使用任何外部图片和素材”。
3. 点击CodeBuddy的“生成”按钮（不同版本按钮名称可能为“运行”“生成代码”），等待1-3分钟，系统自动生成完整HTML代码。

步骤3：运行代码，测试游戏基础功能

1. 代码生成完成后，点击CodeBuddy的“运行”按钮，或直接将生成的代码复制到本地记事本，保存为“.html”文件，双击用浏览器打开。
2. 测试核心功能，确认无异常：
   • 钩子是否自动左右摆动，按空格键是否能正常发射、收回；
   • 抓取各类资源是否能正常计分，分数显示是否准确；
   • 倒计时是否正常，达到目标分数是否能晋级，未达到是否显示游戏结束；
   • 画风是否贴合凡人修仙传水墨风，无明显违和感。

image

image

步骤4：调试修改，优化细节

1. 若出现bug（如钩子无法收回、计分错误、动画卡顿），复制bug现象，粘贴到CodeBuddy编辑区，添加提示：“修复以下bug：XXX，保持原有画风和功能不变，优化代码流畅度”，点击重新生成。
2. 若对画风不满意，添加提示：“优化游戏画风，更贴近《凡人修仙传》的水墨质感，降低饱和度，增加灵雾、发光等修仙元素”，重新生成。
3. 若未准备外部资源，觉得CSS绘制的元素不够美观，可补充提示：“优化CSS绘制的资源和钩子，增加仙气发光效果，简化线条，贴合水墨风”。
   

game3

game4