练习题1:经典游戏小测试、SVG游戏、微信小程序 AI跑起来
按顺序发,一次发一段,跑通再发下一段。练习题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 和打包命令。
增加难度,三国志单机版游戏开发:
总控提示词:
你是一个资深前端工程师。请帮我用单文件 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 和操作步骤。 拥有分销功能的商城小程序,微信小程序 + 微信云开发。不用自己买服务器,登录、数据库、云函数都能在云开发里跑。分销只做 二级分销,合规风险最低。支付先用 模拟支付,跑通流程后再接微信支付。
总控提示词:
<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]