原生 JS 烟花的 SmallFire 坐标算错很常见。调试前先把通道备好到 TaoToken 官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 创建一把 API Key再把 Codex 的 Base URL 填成 https://taotoken.net/api末尾不要 /v1。这段源码是用面向对象思路写的Fire 负责从底部升空SmallFire 按角度把一圈小烟花甩出去散开坐标全靠 Math.cos 和 Math.sin 换算。逻辑不绕但一旦效果不对肉眼盯着randomNum、r、sum、i这几个变量来回跳很容易看花眼。我更推荐把源码切成几段连同现象一起交给 Codex 复核让它专门盯三角函数和坐标基准本文就按这个思路走一遍从「现象分类」到「提问模板」再到「回填验证」中间顺手把 Codex 的模型通道配通。1. SmallFire 到底是「没炸」还是「炸偏了」先把现象分类比直接改代码有效得多。点击 #sky 之后的效果不对通常不是同一个原因而是分属两条完全不同的路径一条是Fire.fireMove的回调压根没执行小烟花根本没被创建另一条是小烟花创建了、也动了但落点算错。这两条路径的排查位置差得很远混在一起看只会反复改错地方。1.1 先确认 Fire.fireMove 的回调有没有进来主体烟花升空后代码是在运动结束的回调里做三件事删掉主体元素、算出一个随机数量randomNum、再按这个数量循环new SmallFire(...)。所以只要回调没触发页面上就是「升上去了然后什么都没有」。在浏览器里手动验证很快打开开发者工具在回调函数的第一行插一句console.log(boom, randomNum, r)。点一次 #sky如果控制台没有任何输出那问题在运动函数move的完成回调上跟 SmallFire 里的三角函数一点关系都没有如果打印出来了但页面上没东西那才轮到小烟花这一层。还有一个小细节循环里创建实例用的是for (var i 0; i randomNum; i)如果哪天你把randomNum改成 0 或者负数的取值区间循环体一次都不进现象和「回调没触发」几乎一样。所以日志里一定要把randomNum和r一起打出来两个值都是正常范围才继续往下查。1.2 三种「炸偏」的典型现象回调正常执行、randomNum也在 10 到 20 之间那接下来就是坐标问题通常表现为三种第一种是全部叠在一起。十几个小烟花元素都在但看上去只有一个点或者只有一团比主体烟花大一点的色块。这多半是半径r被算成了 0 附近或者Math.cos/Math.sin的结果被parseInt直接截断成了很小的整数。第二种是整圈整体平移。散开的形状是对的圆也确实是个圆但圆心不在主体烟花爆炸的位置而是偏了固定的几十像素。这类问题几乎都出在坐标基准上——起点用的坐标系和终点用的坐标系不是同一套。第三种是只炸出半圈甚至一个扇形。角度看起来是均匀的但只有 0 到 180 度那一半。这种一般跟sum、i的取值有关比如索引从 1 开始算或者sum在传参时被覆盖成了别的值导致角度步长算成了 720 除以总数。把现象归到这三类里再去读代码定位速度会快很多。下面这一节就是把每一类对应的源码片段挑出来准备交给 Codex。2. 喂给 Codex 之前先把这四段源码摊平直接把整个文件贴过去模型会给你一堆「建议加注释」「建议改命名」的无效输出。真正有效的问法是把与坐标有关的四段代码单独摘出来配上你观察到的现象一段一段问。下面四段是我每次都会准备的顺序也建议按这个来。2.1 点击坐标那段pageX 减 offsetLeft 埋的雷原始写法大致是这样var ocont document.getElementById(sky); ocont.onclick function (eve) { var e eve || window.event; var x e.pageX - this.offsetLeft; var y e.pageY - this.offsetTop; var f new Fire({ x: x, y: y }); f.create(); };pageX / pageY是相对整个文档的坐标会随着页面滚动整体变大而offsetLeft / offsetTop是相对偏移父级的坐标。#sky 在样式里给了position: relative和margin: 20px auto页面一滚动这两个值就不在同一套坐标系里了差值会多出一个滚动距离。更稳的写法是统一用视口坐标减去元素自身的矩形位置const sky document.getElementById(sky); sky.addEventListener(click, (evt) { const rect sky.getBoundingClientRect(); const x evt.clientX - rect.left; const y evt.clientY - rect.top; new Fire({ x, y }).create(); });这样无论页面滚到哪里点哪儿就是哪儿。这一段单独发给 Codex问它「这两套坐标混用会产生什么现象」它一般能明确告诉你就是「整圈平移」那一类。2.2 randomNum 与 r散开半径和数量的取值区间散开的规模和半径来自两个随机值小烟花个数randomNum、圆的半径r。它们由封装好的随机函数生成形如Math.round(Math.random() * (a - b) b)。这个写法在a小于b时确实能返回区间内的整数但它把上下限的顺序反着写非常容易被后人改错。一旦有人习惯性地写成random(20, 10)这种「从大到小」的调用结果就会跑到区间外面去半径变成负数或者几百像素的异常值现象就变成了第一种「全部叠在一起」或「散得满屏都是」。自己重写一版更直观function randomInt(min, max) { return Math.floor(Math.random() * (max - min 1)) min; } const randomNum randomInt(10, 20); const r randomInt(100, 200);把这两行连同调用处一起交给 Codex并注明「我观察到小烟花全挤在一个点上」它基本能顺着r的取值范围给出结论。注意半径是像素值而 #sky 只有 500px 高、宽度是 80%半径取到 200 时靠边的点击位置会有小烟花飞出容器——overflow: hidden会把它们裁掉看起来就像只炸了半圈。2.3 360/sum*i 的角度换算小烟花的落点公式核心是「把一圈 360 度均分给sum个小烟花第i个占第几份」const step 360 / this.sum; const rad (Math.PI / 180) * (step * this.i); const tx Math.cos(rad) * this.r this.x; const ty Math.sin(rad) * this.r this.y;这里有两个容易被忽略的点。第一Math.cos和Math.sin吃的是弧度不是角度所以Math.PI / 180这个换算不能省也不能写成Math.PI / 180 * 360之类的合并形式否则整圈会被放大 360 倍。第二this.i必须从 0 开始如果循环写成i 1最后一个角度会正好落在 360 度上也就和第一个小烟花重叠视觉上就是「某一个方向明显更亮」。想要更像真实烟花可以在均分角度的基础上加一点抖动让每个小烟花的距离也不完全一致const jitter (Math.random() - 0.5) * step * 0.6; const angle step * this.i jitter; const radius this.r * (0.7 Math.random() * 0.4);这段代码值得单独让 Codex 复核一次因为它同时动了角度和半径两个维度。你只需要告诉它「我希望散开是一圈但不要规整得像轮辐」它会给出一版带随机扰动的实现。2.4 move 的语义绝对目标值还是增量小烟花这一层最终是靠move(元素, { left, top }, 回调)落地的。问题在于left、top传进去的到底是最终绝对像素值还是相对当前位置要移动的距离这两种语义写出来的效果完全不同。如果是绝对目标值那Math.cos(rad) * r this.x就是对的如果move内部实现成了「在当前style.left上累加」那实际落点就变成了起点 起点 偏移会整体偏移一个点击位置的距离——这正好对应第二种现象「整圈平移」。同理主体烟花.fire在样式里写的是bottom: 0升空动画却在改top。绝对定位元素同时拿到bottom和top、又固定了 10px 高度时浏览器只会认其中一个具体认哪个取决于move是从计算样式里读起点还是从 0 开始赋值。这一段不看move的实现根本没法判断所以提问时一定要把它一起贴过去。3. Codex 的 config.toml 里把 provider 接到 https://taotoken.net/api源码整理好了接下来的操作在 Codex 这边。想让提问真的走通模型通道需要两个东西一把 Key和一段正确的~/.codex/config.toml。这两步都不长但顺序别搞反。3.1 创建 Key写 model_provider 与 base_url先把 Key 拿到手打开 TaoToken注册登录后进控制台创建一把 API Key复制出来备用。模型 ID 不要凭印象写以 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 上的模型广场当时列表为准。然后编辑 Codex 的配置文件。Windows 在用户目录下的.codex\config.tomlmacOS 和 Linux 在~/.codex/config.toml注意不要跟别的工具的环境变量混着写model YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chatenv_key写的是环境变量的名字不是 Key 本身所以再把这个变量设上export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell 用$env:TAOTOKEN_API_KEYYOUR_API_KEY想长期生效就写进系统环境变量。Key 一律用占位符替换别把真实 Key 提交进仓库。3.2 两个必踩的坑末尾 /v1 和把官网链接当 Base URL第一个坑是base_url后面顺手加了/v1。这里填的是https://taotoken.net/api末尾不带/v1多写一段路径会直接指向不存在的接口表现是连接被拒或者返回 404。判断方法很简单把配置里的base_url原样复制出来看看最后是不是停在/api。第二个坑更容易犯——把浏览器地址栏里那个带参数的官网链接粘进base_url。注册、创建 Key、看模型广场用的是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 这一类落地页地址而填进工具的接口地址只有https://taotoken.net/api一个写法。两个地址长得像但用途完全不同混用之后请求会发到一个 HTML 页面上返回的内容自然不是模型回复。配置改完先别急着拿烟花源码去问。随便发一句「你好」确认通道通了再进入正式的排障提问。这一句测试对话同样会消耗 Token属于正常调用。4. 提问模板让 Codex 逐行核对 SmallFire 的三角函数通道通了之后重点就回到怎么问。同一段源码问法不同拿到的结果差别很大。我的习惯是分两轮第一轮只找疑点第二轮才要代码。4.1 第一轮只让它找疑点不要改代码把第 2 节里摘出来的片段按顺序贴进去每段前面标一句「这是点击坐标处理」「这是小烟花落点计算」再补上你观察到的现象和浏览器环境。比如下面是原生 JS 烟花源码里的三段代码分别是点击坐标处理、小烟花数量与半径生成、 小烟花落点计算。现象是主体烟花升空正常小烟花全部叠在点击位置附近散不开。 请只做三件事 1. 指出每一段里可能影响落点的写法 2. 说明这个写法会导致什么现象 3. 先不要给出修改后的完整代码。明确要求「先不要给完整代码」很重要。不加这句模型经常一口气重写整个类把你原本想保留的结构也改掉了后面反而更难对比。4.2 第二轮要它给出可粘贴的修正片段第一轮的回答如果指向了角度换算和坐标基准第二轮就可以收窄范围按照你上一条的分析请只给出需要替换的最小代码片段 - 点击坐标那段改用视口坐标 - 小烟花落点保留 Math.cos / Math.sin 的均分角度但加上小幅随机扰动 - 起点坐标沿用点击位置不要改类名和已有的调用方式。这种问法拿到的结果通常可以直接粘回页面。需要注意的是模型看不到你的move函数也不知道.fire的bottom: 0会带来什么影响所以如果它的回答里出现了「假设 move 是绝对定位」这类前提一定要去自己的运动函数里核对一遍确认假设成立再回填。4.3 回填后你在浏览器里验证Codex 不替你点页面这一点必须说清楚Codex 只能读代码、解释代码、生成代码它不会打开你的页面也点不了 #sky。真正执行验证的是你——在本地把改好的文件保存刷新浏览器点几下看开发者工具的 Console 有没有报错、Elements 面板里.small-fire元素的数量和位置对不对。如果还是不对别急着再贴一次完整源码而是把新的证据带回去Console 里的报错原文、某一个小烟花元素的计算样式、你点击的坐标值。把「生成或解释代码」放在对话里把「运行和观察」留在本地这个分工能让每一轮提问都产生有效信息而不是反复重写同一段代码。5. 现象对照表小烟花不动、整圈偏移、DOM 残留调了两轮之后大部分问题会收敛到几个固定的点上。下面这张表是按我自己的排查顺序整理的从上往下试基本不用回头。5.1 页面现象对照页面现象优先检查常见原因只有主体升空没有任何小烟花Fire.fireMove的完成回调回调未触发或randomNum取到了 0 附近小烟花全部叠在一个点半径r与parseInt半径被截断成小整数或半径取值区间写反整圈形状正确但圆心偏移坐标基准pageX/pageY与offsetLeft/offsetTop混用只炸出半圈、边缘被切容器与半径#sky的overflow: hidden裁掉了出界元素某个方向明显更亮角度步长索引起点不是 0或sum被覆盖反复点击后页面越来越卡元素回收小烟花结束后没有removeDOM 持续累积最后一行值得多说一句小烟花数量是随机的一次点击创建十几个元素如果结束回调里不把元素删掉连点几十次之后页面上会留下上千个不可见的 div。这类问题不会立刻显现但调试时容易误判成「动画卡了」。5.2 通道报错对照配 Key 和 Base URL 的过程中也会遇到跟烟花源码无关的报错两者不要混着查401 / 鉴权失败多半是环境变量没生效或者 Key 复制时带了空格。重开一个终端确认TAOTOKEN_API_KEY有值再试。404 / 路径不存在检查base_url是不是写成了https://taotoken.net/api/v1。这里只填https://taotoken.net/api。连接超时或返回一段 HTML说明地址填成了官网落地页而不是接口地址。接口地址和注册页地址是两个东西别互换。提示模型不存在模型 ID 写错了。以 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 的模型广场当时列表为准重新复制一次。排障的顺序建议是先确认「你好」这种最简对话能通再拿源码去问。通道问题和代码问题分开处理能省掉大量「到底是模型没回还是我代码没生效」的来回猜。6. 跑通以后去控制台核对这次烟花排障的调用烟花效果改对了顺手做一步收尾确认这次排障提问真的记在了你的账户上。打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 进控制台看用量记录里有没有刚才那几轮对话模型 ID 和你配的是不是同一个。有记录说明整条链路是通的没记录回头再看config.toml里的model_provider有没有被别的地方覆盖。6.1 用同一把 Key 做一次交叉验证想再确认一遍可以打开 模型对话 页面用同一把 Key 发一条消息。如果这里能正常返回而 Codex 里不行那问题一定在 Codex 的配置文件或环境变量上跟接口本身无关。想长期拿它核对这类前端源码可以到 Coding Plan 看看套餐是否够用需要新建或轮换 Key在 控制台 API Keys 里操作。6.2 这套流程还能接着用在哪烟花这个例子的价值不在于烟花本身而在于它把「前端坐标类 bug」的排查套路完整演示了一遍先分类现象再摘出与坐标相关的代码片段把假设和观察一起交给模型最后回到浏览器里验证。同一套方法可以直接挪到其他场景——拖拽元素的落点偏移、Canvas 里按角度绘制、粒子按半径散开只要涉及坐标系和三角函数思路都一样。下次再遇到散不开、炸偏了的效果问题与其对着Math.cos反复改数字不如先把四段代码整理清楚然后从 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 确认 Key 可用、base_url停在/api把问题描述好丢给 Codex。改代码的力气留给最后那几次点击验证就够了。