练习题1：经典游戏小测试、SVG游戏、微信小程序 AI跑起来

admin · 发表于 2026-9-25 21:11:23

欢迎你注册我们ADFA论坛

您需要登录才可以下载或查看，没有账号？立即注册

×

按顺序发，一次发一段，跑通再发下一段。

练习题1，agent 输入：

SVG打地鼠小游戏：
请用单文件 HTML + SVG + JavaScript 做一个“SVG打地鼠”小游戏。
要求：
1. 全部代码在一个 index.html 文件里，双击浏览器能玩。
2. 用 SVG 画 3x3 共 9 个洞，地鼠随机从洞里冒出。
3. 点击地鼠得分，地鼠消失。
4. 30 秒倒计时，显示分数，结束显示总分。
5. 有“重新开始”按钮。
6. 界面美观，适合课堂展示。
7. 代码加注释，解释 SVG、点击事件、计时器和游戏状态。
请给出完整代码。

接着继续完善，比如：

在现在代码基础上，只增加一个功能：每得5分，地鼠出现速度加快一点。不要重写全部代码，给出修改后的完整代码并说明改了哪里。

练习题2，agent 输入：

请用单文件 HTML + SVG + JavaScript 做一个中国象棋棋盘和棋子。
要求：
1. 全部代码在一个 index.html 里。
2. 用 SVG 画 9 列 10 行棋盘，包含楚河汉界、九宫斜线、兵炮位标记。
3. 红黑各 16 个棋子，按标准初始位置摆放。
4. 棋子用 SVG 圆形 + 汉字，红黑颜色区分。
5. 点击棋子能选中（高亮），点击目标位置能移动，能吃掉对方棋子。
6. 红黑轮流走。
7. 有“重新开始”按钮。
8. 先不实现完整规则，只允许移动到空位或敌方位置。
9. 代码注释清楚，方便后续增加规则。
请给出完整代码。

接着继续完善，比如：

在现在代码基础上，增加中国象棋基础合法走法：
车走直线；马走日且不能蹩马腿；象走田且不能塞象眼、不能过河；士在九宫斜走；将帅在九宫直走；炮走直线，吃子必须隔一个棋子；兵卒过河前只能向前，过河后可以左右。
不要重写全部代码，只给出修改后的完整代码，并说明改了哪些函数。

继续修改：
1. 增加将军检测：如果一方走完后，对方将帅被攻击，提示“将军”。
2. 禁止走出让自己将帅被将军的棋。
3. 如果一方无合法走法，判断将死或困毙，弹窗显示胜负。
4. 增加“将帅不能照面”规则。
不要重写全部代码，只给出修改后的完整代码。

继续修改：增加简单电脑对手。黑方由电脑控制，电脑从所有合法走法中选择一个，优先吃子，其次随机。保留双人对战开关。不要重写全部代码。

请把下面这个 SVG 中国象棋 HTML 放进一个 Python PyWebView 程序里，生成 app.py。
要求：
1. HTML 作为字符串嵌入 app.py，不依赖外部文件。
2. 窗口标题“中国象棋 SVG”，大小 900x800。
3. 可以用 pyinstaller -F -w --name 中国象棋SVG app.py 打包。
4. 给出完整 app.py 和打包命令。

admin · 发表于 2026-9-25 21:14:31

增加难度，三国志单机版游戏开发：

总控提示词：

你是一个资深前端工程师。请帮我用单文件 HTML + SVG + JavaScript 做一个“三国志”单机版小游戏。
技术约束：
1. 全部代码写在单个 sanguo.html 文件里，双击浏览器能玩。
2. 图形全部用 SVG 画，不用外部图片、字体、音频。
3. 代码加注释，结构清晰，方便后续分阶段增加功能。
4. 每完成一个阶段，先让我测试，不要一次写完所有功能。
5. 后续修改时，只改相关函数，不要重写全部代码。
游戏总目标：
玩家选择一个势力（魏/蜀/吴），通过征兵、移动武将、攻城，占领地图上所有城池获胜。
请先只回复“明白”，等我发第一阶段任务。

复制代码

阶段 1：SVG 地图骨架

第一阶段：只做 SVG 地图骨架，不做游戏逻辑。
要求：
1. 页面标题“三国志”。
2. 用 SVG 画一张简化三国地图，viewBox="0 0 1000 700"。
3. 地图上有 8 个城池，用 circle 表示，半径 28。
4. 城池之间用 line 连线，表示可移动路径。
5. 每个城池下方用 text 显示城池名：洛阳、长安、许昌、邺城、成都、江陵、建业、襄阳。
6. 城池位置大致符合地理方位：北方在上，南方在下，西方在左，东方在右。
7. 背景用浅色，城池用深色描边，文字居中。
8. 先不要交互，只显示地图。
验收：
- 浏览器打开能看到 8 个城池和连线。
- 城池名清晰可读。
完成后告诉我改了哪些地方，等我测试。

复制代码

阶段 2：势力与武将数据

第二阶段：加入势力、城池归属和武将数据。
要求：
1. 定义三个势力：
- 魏：蓝色，城池邺城、许昌，武将曹操、张辽、许褚
- 蜀：绿色，城池成都、襄阳，武将刘备、关羽、张飞
- 吴：红色，城池建业、江陵，武将孙权、周瑜、吕蒙
- 中立：灰色，城池洛阳、长安
2. 每个城池有属性：名称、坐标、归属势力、兵力、相邻城池。
3. 每个武将有属性：姓名、所属势力、所在城池、兵力、武力值。
4. 城池按归属势力填充颜色。
5. 鼠标悬停城池时，显示 tooltip：城池名、归属、兵力、驻守武将。
6. 用 JS 数据驱动 SVG 渲染，不要写死。
验收：
- 城池颜色按势力区分。
- 悬停能看到城池信息。
不要重写地图结构，只增加数据和渲染逻辑。

复制代码

阶段 3：玩家回合与选中

第三阶段：加入玩家回合与选中交互。
要求：
1. 游戏开始时弹出选择势力：魏 / 蜀 / 吴。
2. 玩家选择后，该势力城池高亮。
3. 玩家点击自己的城池，选中该城，显示可移动的相邻城池（高亮描边）。
4. 再点击相邻城池，执行移动：
- 如果目标是自己城池：移动部分兵力过去。
- 如果是中立或敌方城池：进入战斗。
5. 点击空白处取消选中。
6. 顶部显示状态栏：当前势力、回合数、操作提示。
7. 加入“结束回合”按钮。
8. 先只做玩家操作，敌方 AI 下一步再加。
验收：
- 能选势力。
- 能选中城池并看到可移动目标。
- 能移动兵力或发起战斗。
不要重写地图和势力数据，只增加交互。

复制代码

阶段 4：战斗系统

第四阶段：加入简单战斗系统。
要求：
1. 攻击方兵力 vs 防守方兵力。
2. 战斗公式：
- 攻击方战力 = 兵力 × (1 + 武将武力/100)
- 防守方战力 = 兵力 × (1 + 武将武力/100) × 1.2（守城加成）
3. 随机浮动 ±20%。
4. 战力高的一方获胜。
5. 胜方剩余兵力 = 双方战力差的一部分，最少保留 10%。
6. 战斗结果用弹窗或状态栏显示：谁攻谁、双方兵力、胜负。
7. 胜利后城池易主，颜色更新。
8. 失败后攻击方兵力大减，城池不变。
9. 战斗时加一个简单的 SVG 闪烁动画。
验收：
- 能发起战斗并看到结果。
- 城池归属正确更新。
- 兵力计算合理，不会出现负数或无限。
不要重写前面的交互，只增加战斗逻辑。

复制代码

阶段 5：敌方 AI 与胜负

第五阶段：加入敌方 AI 回合和胜负判断。
要求：
1. 玩家点“结束回合”后，敌方势力依次行动。
2. 敌方 AI 逻辑：
- 优先攻击相邻的弱小城池。
- 否则向相邻中立城池移动兵力。
- 否则征兵。
3. AI 行动时状态栏显示“魏国行动中...”。
4. AI 行动结束后回到玩家回合，回合数 +1。
5. 每回合开始时，每座城池自动 +5% 兵力（上限 9999）。
6. 胜负判断：
- 玩家占领所有城池：胜利。
- 玩家失去所有城池：失败。
7. 胜负后弹窗显示结果，并停止操作。
验收：
- AI 能自动行动。
- 回合能正常轮转。
- 胜负能正确触发。
不要重写战斗和交互，只增加 AI 和回合逻辑。

复制代码

阶段 6：打磨与可视化

第六阶段：打磨界面和视觉。
要求：
1. 顶部状态栏：势力名、回合数、总兵力、操作提示。
2. 底部操作按钮：征兵、结束回合、重新开始。
3. 城池上显示兵力数字。
4. 城池上有武将时，用小旗子或文字显示武将名。
5. 战斗时攻击方和防守方之间画一条红色箭头动画。
6. 用 SVG filter 给城池加一点阴影。
7. 字体用系统字体，颜色对比清晰。
8. 整体风格：简洁、古朴、适合课堂展示。
验收：
- 界面美观，信息清晰。
- 动画流畅，不卡顿。
- 适合投影展示。
不要破坏已有功能，只做视觉和体验优化。
打包 exe 提示词（可选，最后发）
text
请把当前 sanguo.html 打包成 Windows exe。

复制代码

要求：
1. 生成 app.py，用 Python + PyWebView。
2. HTML 作为字符串嵌入 app.py，不依赖外部文件。
3. 窗口标题“三国志”，大小 1100x800。
4. 给出打包命令：
pip install pywebview pyinstaller
pyinstaller -F -w --name 三国志 --collect-all webview app.py
5. 告诉我生成文件在 dist/三国志.exe。

请给出完整 app.py 和操作步骤。

admin · 发表于 2026-9-25 21:21:04

拥有分销功能的商城小程序，微信小程序 + 微信云开发。不用自己买服务器，登录、数据库、云函数都能在云开发里跑。分销只做二级分销，合规风险最低。支付先用模拟支付，跑通流程后再接微信支付。

总控提示词：

<div>你是一个资深全栈工程师。请帮我做一个“拥有二级分销功能的商城小程序”。
技术栈固定：
- 前端：微信小程序原生 + 微信云开发
- 后端：微信云开发云函数 + 云数据库
- 支付：先做模拟支付，不接真实微信支付
- 分销：仅二级分销，上级拿10%，上上级拿5%
- 全部代码放在当前项目目录，结构清晰，注释完整
项目目标：
1. 用户微信登录
2. 商品列表、商品详情、购物车、下单、模拟支付
3. 用户通过邀请码绑定上级，形成二级分销关系
4. 订单完成后，自动给上级和上上级分佣
5. 分销中心：我的团队、佣金明细、余额、提现申请
6. 管理端先用云开发控制台手动管理，不做复杂后台
约束：
1. 一次只做一个阶段，做完让我测试，不要一次写完所有功能。
2. 每次修改只改相关文件，不要重写整个项目。
3. 所有云函数要处理幂等，防止重复分佣。
4. 分销关系一旦绑定不能更改，不能自己绑自己，不能形成环。
5. 代码必须符合微信小程序云开发规范。
请先只回复“明白”，等我发第一阶段任务。</div>

复制代码

阶段 1：项目初始化与目录结构

<div>第一阶段：初始化微信小程序云开发项目结构。
请直接创建以下目录和文件：
cloudfunctions/
login/
bindRelation/
createOrder/
payOrder/
settleCommission/
applyWithdraw/
getDistributionData/
miniprogram/
app.js
app.json
app.wxss
pages/
index/
product/
cart/
order/
distribution/
withdraw/
components/
utils/
images/
要求：
1. app.json 注册所有页面，底部 tabBar 包含：首页、购物车、分销中心、我的。
2. app.js 初始化云开发，env 用占位符 "your-env-id"。
3. 每个云函数生成 index.js 和 package.json，package.json 依赖 wx-server-sdk。
4. 每个页面生成基础 wxml、wxss、js、json 四件套。
5. 先不写复杂逻辑，只搭骨架，保证能导入微信开发者工具。
验收：
- 微信开发者工具能导入项目。
- 能编译通过，看到 tabBar。
- 云函数能上传部署。
完成后告诉我每个文件的作用，等我测试。</div>

复制代码

阶段 2：数据库设计与云函数基础

<div>第二阶段：设计云数据库集合并写基础云函数。
请创建以下集合：
1. users
字段：_id, openid, nickname, avatar, inviteCode, parentId, grandParentId, balance, totalCommission, createdAt
2. products
字段：_id, name, price, image, stock, sales, description, status
3. orders
字段：_id, orderNo, userId, items, totalAmount, status, payTime, parentId, grandParentId, commissionStatus, createdAt
4. commissions
字段：_id, orderId, userId, fromUserId, amount, level, status, createdAt
5. withdrawals
字段：_id, userId, amount, status, account, createdAt, auditTime
云函数要求：
- login：获取 openid，查询或创建用户，生成唯一 inviteCode。
- bindRelation：接收 inviteCode，绑定上级和上上级，校验不能绑自己、不能重复绑、不能成环。
- 其他云函数先留空壳，返回 { code: 0, msg: 'ok' }。
验收：
- 云函数能部署。
- 调用 login 能在数据库创建用户。
- 调用 bindRelation 能正确写入 parentId 和 grandParentId。
不要写商城业务逻辑，只做数据和登录绑定。</div>

复制代码

阶段 3：商城首页、商品详情、购物车

<div>第三阶段：做商城基础页面。
要求：
1. 首页 pages/index：
- 从 products 集合读取商品列表。
- 展示商品图、名称、价格、销量。
- 点击进入商品详情。
2. 商品详情 pages/product：
- 展示商品大图、名称、价格、描述、库存。
- 有“加入购物车”和“立即购买”按钮。
3. 购物车 pages/cart：
- 展示已加入商品，支持增减数量、删除。
- 显示合计金额。
- 有“去结算”按钮。
4. 购物车数据先存在本地 storage，不急着写数据库。
5. 商品图片先用云存储占位图或纯色背景，不要依赖外部图片。
验收：
- 首页能看到商品列表。
- 能进入详情并加入购物车。
- 购物车能改数量、算总价。
不要写订单和分销逻辑。</div>

复制代码

阶段 4：下单与模拟支付

<div>第四阶段：做下单与模拟支付。
要求：
1. 创建订单云函数 createOrder：
- 接收商品列表、总金额。
- 生成订单号 orderNo。
- 写入 orders 集合，status 为 "pending"。
- 同时记录当前用户的 parentId 和 grandParentId。
2. 模拟支付云函数 payOrder：
- 接收 orderId。
- 把订单 status 改为 "paid"，payTime 写入当前时间。
- 返回支付成功。
3. 订单页面 pages/order：
- 展示我的订单列表。
- 显示订单状态：待支付、已支付、已完成。
- 待支付订单有“模拟支付”按钮。
4. 支付成功后清空购物车。
验收：
- 能创建订单。
- 能模拟支付，订单状态更新。
- 订单列表能看到记录。
不要写佣金结算。</div>

复制代码

阶段 5：二级分销佣金结算

<div>第五阶段：做二级分销佣金结算。
规则：
- 订单支付完成后，订单所属用户是买家。
- 买家上级拿订单金额的 10%。
- 买家上上级拿订单金额的 5%。
- 自购也按规则给上级分佣，但不给自己分佣。
- 每个订单只能分佣一次，必须幂等。
要求：
1. 云函数 settleCommission：
- 接收 orderId。
- 查询订单，检查 commissionStatus 是否为 "settled"。
- 如果已结算，直接返回，不重复分佣。
- 查询买家 users 记录，取 parentId 和 grandParentId。
- 给上级写入 commissions，level=1，amount=订单金额*10%。
- 给上上级写入 commissions，level=2，amount=订单金额*5%。
- 更新 users 的 balance 和 totalCommission。
- 更新订单 commissionStatus 为 "settled"。
2. 在 payOrder 成功后调用 settleCommission。
3. 佣金明细页面可以后面再做，先保证数据正确。
验收：
- 模拟支付后，commissions 集合出现两条记录。
- 上级和上上级的 balance 增加。
- 重复调用 settleCommission 不会重复加钱。
不要写提现。</div>

复制代码

阶段 6：分销中心与提现申请

<div>第六阶段：做分销中心页面和提现申请。
要求：
1. pages/distribution 分销中心：
- 显示我的邀请码、我的余额、累计佣金。
- 显示我的上级和上上级昵称。
- 显示我的下级列表。
- 显示佣金明细列表：来自哪个订单、金额、级别、时间。
- 有“申请提现”按钮。
2. pages/withdraw 提现页面：
- 输入提现金额，最低 10 元。
- 校验金额不能超过余额。
- 提交后云函数 applyWithdraw：
- 扣减用户 balance。
- 写入 withdrawals，status="pending"。
- 提现记录列表显示状态：待审核、已通过、已拒绝。
3. 管理端先不做页面，用云开发控制台手动改 withdrawals 状态。
4. 如果审核拒绝，需要手动退回余额，先写清楚操作说明。
验收：
- 分销中心能看到团队和佣金。
- 能申请提现，余额扣减。
- 提现记录能显示。
不要做复杂后台。</div>

复制代码

阶段 7：合规与测试数据

<div>第七阶段：补充测试数据和合规提示。
要求：
1. 在云开发控制台手动添加 3 个测试商品。
2. 写一个 initTestData 云函数，一键生成：
- 测试用户 A（顶级）
- 测试用户 B（A 的下级）
- 测试用户 C（B 的下级）
- 测试订单和佣金记录
3. 在分销中心底部加一行小字：
“本功能仅用于学习测试，仅支持二级分销，禁止多级分销和拉人头。”
4. 检查所有云函数：
- 参数校验
- 错误返回统一 { code, msg, data }
- 分佣和提现必须幂等
验收：
- 能一键生成测试数据。
- 二级分销链路 A→B→C 正确。
- 订单分佣正确。
完成后给出部署和测试步骤。</div>

复制代码

打包/部署提示词（最后发）

<div>请给出完整部署步骤：
1. 微信开发者工具导入项目。
2. 开通云开发，替换 app.js 里的 env-id。
3. 上传部署所有云函数。
4. 创建数据库集合和权限设置。
5. 如何用云开发控制台添加商品。
6. 如何模拟用户登录和绑定分销关系。
7. 如何测试二级分佣和提现。
8. 上线前需要注意的微信平台合规事项。
请用步骤清单输出，不要写代码。</div>

复制代码

卡住时用的修复提示词

<div>现在项目出现以下问题：
【描述问题，比如：绑定上级失败 / 分佣重复 / 提现余额不对 / 页面报错】
请先定位原因，只修改相关文件，不要重写整个项目。
给出修改后的完整代码，并说明改了哪里。
</div>

复制代码

<div>请检查当前云函数，列出所有可能出 bug 的地方，按严重程度排序，然后只修复最严重的 3 个。
不要重写全部代码。</div>

复制代码

使用顺序

<div>发总控提示词
阶段 1 → 测试 → 阶段 2 → 测试 → 阶段 3 → 测试
阶段 4 → 阶段 5 → 阶段 6 → 阶段 7
最后发部署提示词
卡住用修复提示词</div>

复制代码

账号		自动登录	找回密码
密码			立即注册

练习题1：经典游戏小测试、SVG游戏、微信小程序 AI跑起来

欢迎你注册我们ADFA论坛

浏览过的版块