最近在折腾 AI 辅助开发工作流时尝试用 Grok Build 来快速搭建一个火星模拟游戏的网页原型。整个过程比预想中流畅但也有一些值得注意的坑生成代码的幻觉、Canvas 渲染性能、模块拆分方式等。这里把完整流程整理成一份可直接复现的实战教程既包含 AI 辅助构建的思路也包含一个真正能运行的火星模拟游戏代码新手可以照着做有经验的开发者也能直接参考代码结构和排错方案。1. 背景与核心概念1.1 什么是 Grok BuildGrok Build 是当前 AI 编程辅助工具生态中的一个新方向它强调“通过自然语言描述需求让 AI 帮助生成、修改和调试完整项目代码”。相比传统的人工手写全部代码Grok Build 的核心价值在于快速生成原型把模糊的产品想法转换成可运行的代码骨架。辅助调试把报错信息直接交给 AI让它分析可能原因并给出修复建议。代码补全与重构在已有代码基础上做功能扩展、性能优化和结构重构。不过需要注意AI 生成代码并不等于“无需验证”。Grok Build 生成的代码仍然可能存在逻辑错误、版本不匹配、安全边界缺失等问题。所以本文的实践思路是用 Grok Build 做效率放大器但最终由开发者负责审查、测试和收口。这种工作流在当前落地性最强也最值得借鉴。网上关于 Grok Build 的版本迭代信息比较多不同来源说法并不一致。本文不依赖某个具体版本的功能而是聚焦“AI 辅助构建 网页游戏开发”的通用工作流。只要你的 AI 编程助手支持自然语言对话和代码生成这套方法基本都可以复用。1.2 火星模拟游戏的技术选型火星模拟游戏是一个很适合用来练习 AI 辅助开发的项目因为它包含了几类典型需求场景渲染火星表面、天空、地貌、陨石坑。交互控制火星车移动、视角切换、状态操作。状态管理氧气、能量、距离、进度等动态数据。界面设计仪表盘、按钮、弹窗。在技术选型上这里不引入重量级游戏引擎而是使用最轻量的方案技术作用说明HTML5 Canvas2D 游戏渲染所有游戏元素都绘制在canvas上JavaScript游戏逻辑控制循环、事件、状态更新CSS页面布局与仪表盘负责 UI 层样式浏览器运行环境不需要安装额外依赖这样做的优势很明显代码量可控、运行环境通用、方便粘贴到任意 HTML 文件中直接打开运行。对初学者来说Canvas 2D 比 WebGL / Three.js 更容易理解对于想扩展的开发者后续也能平滑升级到 Three.js 做 3D 版本。1.3 为什么用 AI 辅助构建游戏原型传统开发流程需要先设计类、写渲染函数、调事件绑定细节非常多。而使用 Grok Build 构建原型时可以把工作重心放在“需求表达”和“代码验收”上用自然语言描述游戏规则和界面布局。让 AI 生成第一版完整代码。运行代码检查效果与预期偏差。把问题反馈给 AI迭代优化。人工审查关键逻辑补齐安全的边界处理。这种模式不是“完全交给 AI”而是“让 AI 承担初稿工作量人负责判断和收尾”。下面我们就按这个流程完整制作一个火星模拟游戏。2. 环境准备与版本说明2.1 运行环境本文示例是一个纯前端项目不需要安装 Node.js、Python 或其他后端环境。需要的工具如下一个现代浏览器Chrome、Edge、Firefox 均可。一个文本编辑器VS Code、Sublime、记事本都可以。浏览器开发者工具用于查看控制台报错和性能情况。如果你的电脑上已经安装了 VS Code那就更好了可以配合 Live Server 插件打开页面体验会更好。没有安装也无所谓直接用浏览器打开 HTML 文件即可运行。2.2 版本说明因为这是一个不依赖第三方库的网页游戏所以不需要锁定特定依赖版本。HTML5 Canvas 和 ES6 JavaScript 是现代浏览器的标准能力。唯一需要注意的是代码中使用的是 ES6 语法包括const、let、箭头函数、class等。如果你需要兼容 IE 等老旧浏览器需要额外做转译但本文不做兼容处理。版本需要根据你的项目实际情况调整本文示例以现代浏览器常见环境为例重点演示配置思路。2.3 AI 工具准备如果你要在自己的电脑上复现“Grok Build 工作流”需要准备好 AI 编程助手的访问方式。具体包括一个可用的 Grok Build 账号或类似 AI 编程助手入口。Grok Build的对话窗口或命令行终端。准备好描述需求的表达能力。在本文示例中我们会模拟多轮“人机对话”展示如何向 Grok Build 描述需求、接收代码、反馈问题。你完全可以用类似的提示词在自己所用的 AI 工具上生成代码。3. 火星模拟游戏功能设计3.1 需求分析在向 Grok Build 提问之前先把需求想清楚。一个完整的火星模拟游戏至少需要以下模块模块功能说明场景渲染绘制火星地表、天空、太阳、星星、陨石坑火星车可移动的探测车支持方向键或 WASD 控制仪表盘显示氧气、能量、行驶距离、当前坐标任务目标到达指定目标点触发任务完成提示状态反馈能量耗尽或氧气归零时游戏结束有了这个模块列表就可以把它“翻译”成 AI 能理解的指令。3.2 技术方案设计游戏采用单页面结构核心代码放在 HTML 文件的script标签中。为了便于理解我们将逻辑拆成几个对象gameState保存游戏全局状态。rover火星车对象包含位置、角度、速度。target目标点位置。update()每一帧更新逻辑。render()每一帧绘制画面。keydown/keyup键盘事件监听。这样拆分的好处是逻辑清晰即使 AI 生成的初始版本结构比较混乱我们也可以手动整理成统一风格。3.3 给 Grok Build 的提示词示例下面是一个非常关键的环节如何向 AI 描述需求。一个高质量的提示词应该包含项目类型和语言。核心功能列表。界面布局说明。运行限制不要外部依赖等。例如请帮我写一个纯 HTML CSS JavaScript 的火星模拟游戏。 要求 1. 使用 Canvas 2D 渲染火星表面画面要有星星背景、红色地面、陨石坑。 2. 用 WASD 控制一辆火星车移动火星车用简单的几何图形绘制。 3. 页面右侧有仪表盘显示氧气、能量、行驶距离、当前坐标。 4. 场景中有一个目标点到达后弹出提示“任务完成”。 5. 氧气或能量降为 0 时游戏结束。 6. 不要使用任何第三方库所有代码放在一个 index.html 中。把这段提示词发给 Grok Build它会返回一份初始代码。当然第一版代码通常不完美需要继续追问。我们会在下一节展示完整的迭代过程。4. 完整实战用 Grok Build 构建火星模拟游戏为了让流程可复现这里我把“AI 对话 人工整理”后的最终版本完整写出来。你可以直接复制下面的代码到mars-game.html文件中用浏览器打开运行。4.1 创建项目结构先创建一个文件夹例如mars-game/ └── index.html本项目只有一个文件便于演示和分发。如果你后续想扩展也可以拆分成index.html、style.css、main.js三个文件但本文统一放在一个文件中。4.2 编写 HTML 和 CSS 布局在index.html中先搭建页面骨架。左侧是游戏画布右侧是仪表盘面板。!-- 文件路径mars-game/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleGrok Build 火星模拟游戏/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0e1a; font-family: Microsoft YaHei, Arial, sans-serif; color: #eee; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .game-wrap { display: flex; gap: 16px; padding: 20px; flex-wrap: wrap; } canvas { border: 2px solid #c1440e; border-radius: 8px; background: #1a0e05; cursor: crosshair; } .dashboard { width: 260px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 18px; } .dashboard h2 { font-size: 20px; color: #ffb347; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .stat-item { display: flex; justify-content: space-between; align-items: center; font-size: 15px; } .stat-label { color: #aaa; } .stat-value { font-weight: bold; color: #ffb347; } .bar-wrap { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 4px; } .bar-fill { height: 100%; border-radius: 4px; transition: width 0.2s; } .bar-oxygen { background: linear-gradient(90deg, #23a6d5, #23d5ab); } .bar-energy { background: linear-gradient(90deg, #f7971e, #ffd200); } .tips { background: rgba(0, 0, 0, 0.3); padding: 12px; border-radius: 8px; font-size: 13px; line-height: 1.8; } .btn { padding: 10px; border: none; border-radius: 8px; background: #c1440e; color: #fff; font-size: 15px; cursor: pointer; transition: background 0.2s; } .btn:hover { background: #e05a17; } /style /head body div classgame-wrap canvas idgameCanvas width900 height600/canvas div classdashboard h2 火星探测车/h2 div classstat-item span classstat-label氧气/span span classstat-value idoxygenValue100%/span /div div classbar-wrap div classbar-fill bar-oxygen idoxygenBar stylewidth: 100%/div /div div classstat-item span classstat-label能量/span span classstat-value idenergyValue100%/span /div div classbar-wrap div classbar-fill bar-energy idenergyBar stylewidth: 100%/div /div div classstat-item span classstat-label行驶距离/span span classstat-value iddistanceValue0 m/span /div div classstat-item span classstat-label坐标/span span classstat-value idcoordValue(450, 300)/span /div div classtips pb操作说明/b/p pW / S前进 / 后退/p pA / D左转 / 右转/p p到达黄色目标点即可完成任务/p /div button classbtn idresetBtn重置游戏/button /div /div script // 游戏逻辑代码见下方 /script /body /html这段代码先把游戏的整体外观做好。canvas是游戏渲染区域右侧面板用于展示实时数据。这里使用了少量 emoji 做视觉提示不影响代码结构。4.3 编写 Canvas 游戏逻辑下面是最核心的 JavaScript 部分。先在script标签中定义必要的变量和常量。// 文件路径mars-game/index.html 中 script 内的核心代码 const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); const W canvas.width; const H canvas.height; // 游戏状态 let gameOver false; let gameWin false; let lastTime 0; let elapsedTime 0; // 火星车属性 const rover { x: 450, y: 300, angle: 0, // 朝向角度弧度 speed: 0, // 当前速度 maxSpeed: 120, // 最大速度 px/s acceleration: 60, // 加速度 size: 16 // 绘制尺寸 }; // 目标点 const target { x: 150, y: 150, radius: 24 }; // 资源状态 const resources { oxygen: 100, energy: 100, distance: 0 };这些变量构成了游戏的核心数据。rover对象保存火星车的位置、角度、速度resources保存氧气和能量值target是目标点坐标。接下来写键盘事件监听。const keys {}; document.addEventListener(keydown, (e) { keys[e.code] true; if (e.code Space) { e.preventDefault(); } }); document.addEventListener(keyup, (e) { keys[e.code] false; });keys对象用来记录当前按下的按键状态。游戏循环中会根据keys中的值判断是否加速、减速或转向。4.4 实现游戏循环与更新逻辑游戏循环是整个模拟游戏的心脏。我们需要计算时间差然后更新状态、渲染画面。function update(dt) { if (gameOver || gameWin) { return; } // 根据按键控制火星车 if (keys[KeyW]) { rover.speed Math.min(rover.speed rover.acceleration * dt, rover.maxSpeed); } if (keys[KeyS]) { rover.speed Math.max(rover.speed - rover.acceleration * dt, -rover.maxSpeed * 0.5); } if (keys[KeyA]) { rover.angle - 2.0 * dt; } if (keys[KeyD]) { rover.angle 2.0 * dt; } // 摩擦减速 if (!keys[KeyW] !keys[KeyS]) { rover.speed * Math.pow(0.5, dt); if (Math.abs(rover.speed) 0.5) { rover.speed 0; } } // 更新位置 const prevX rover.x; const prevY rover.y; rover.x Math.cos(rover.angle) * rover.speed * dt; rover.y Math.sin(rover.angle) * rover.speed * dt; // 边界约束 rover.x Math.max(20, Math.min(W - 20, rover.x)); rover.y Math.max(20, Math.min(H - 20, rover.y)); // 计算行驶距离 const moved Math.hypot(rover.x - prevX, rover.y - prevY); resources.distance moved; // 消耗资源移动越快消耗越快 const moveFactor Math.abs(rover.speed) / rover.maxSpeed; resources.oxygen - 0.8 * dt * (0.5 moveFactor * 1.5); resources.energy - 1.2 * dt * (0.5 moveFactor * 2.0); // 资源下限 resources.oxygen Math.max(0, resources.oxygen); resources.energy Math.max(0, resources.energy); // 检查游戏结束条件 if (resources.oxygen 0 || resources.energy 0) { gameOver true; } // 检查是否到达目标点 const distToTarget Math.hypot(rover.x - target.x, rover.y - target.y); if (distToTarget target.radius rover.size) { gameWin true; } // 更新 UI 仪表盘 updateDashboard(); }这里的关键逻辑是dt是上一帧到当前帧的时间差避免不同刷新率下速度不一致。Math.cos和Math.sin把角度转换成方向向量再乘以速度得到位移。行驶距离累加使用Math.hypot也就是两点间欧几里得距离。氧气和能量消耗与速度相关速度越快消耗越快增加真实感。4.5 实现 Canvas 场景渲染渲染部分分为背景、目标点、火星车和粒子特效。先写火星表面背景。function drawBackground() { // 星空 ctx.fillStyle #0a0e1a; ctx.fillRect(0, 0, W, H); // 星星 for (let i 0; i 120; i) { // 使用固定随机种子避免每次刷新位置变化 const seed i * 137.5; const sx (seed * 7) % W; const sy (seed * 13) % H; const brightness 0.3 ((i * 29) % 70) / 100; ctx.globalAlpha brightness; ctx.fillStyle #fff; ctx.beginPath(); ctx.arc(sx, sy, 1.2, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha 1; // 天空渐变 const skyGrad ctx.createLinearGradient(0, 0, 0, H * 0.5); skyGrad.addColorStop(0, rgba(180, 80, 30, 0.35)); skyGrad.addColorStop(1, rgba(0, 0, 0, 0)); ctx.fillStyle skyGrad; ctx.fillRect(0, 0, W, H * 0.5); // 火星地面 const groundY H * 0.72; const groundGrad ctx.createLinearGradient(0, groundY, 0, H); groundGrad.addColorStop(0, #8b3a1a); groundGrad.addColorStop(0.3, #6b240c); groundGrad.addColorStop(1, #3d1205); ctx.fillStyle groundGrad; ctx.fillRect(0, groundY, W, H - groundY); // 远处山丘 ctx.fillStyle rgba(100, 40, 15, 0.6); drawHill(H * 0.62, 80, 1.2); ctx.fillStyle rgba(130, 55, 20, 0.7); drawHill(H * 0.68, 110, 0.8); // 地面细节陨石坑 drawCrater(120, H * 0.82, 22); drawCrater(380, H * 0.78, 14); drawCrater(700, H * 0.85, 30); drawCrater(820, H * 0.74, 10); } function drawHill(baseY, height, scale) { ctx.beginPath(); ctx.moveTo(0, baseY height * 0.3); for (let x 0; x W; x 20) { const y baseY Math.sin(x * 0.005 * scale) * height * 0.4 Math.sin(x * 0.01) * height * 0.2; ctx.lineTo(x, y); } ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath(); ctx.fill(); } function drawCrater(x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.2); ctx.fill(); ctx.beginPath(); ctx.arc(x - r * 0.15, y - r * 0.15, r * 0.7, 0, Math.PI * 2); ctx.fillStyle rgba(255, 180, 120, 0.15); ctx.fill(); }星空部分用了伪随机数公式确保每次刷新画面时星星位置固定同时不引入外部随机函数导致闪烁。地面用了渐变和简单曲线绘制山丘视觉效果比较接近火星环境。接着绘制目标和火星车。function drawTarget() { // 目标点光晕 const pulse 0.6 0.4 * Math.sin(elapsedTime * 3); ctx.beginPath(); ctx.arc(target.x, target.y, target.radius 6, 0, Math.PI * 2); ctx.fillStyle rgba(255, 220, 100, ${0.3 * pulse}); ctx.fill(); // 目标点核心 ctx.beginPath(); ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2); ctx.fillStyle #ffd700; ctx.fill(); ctx.strokeStyle #ff8c00; ctx.lineWidth 3; ctx.stroke(); // 旗帜 ctx.fillStyle #ff5722; ctx.fillRect(target.x 6, target.y - target.radius - 8, 18, 5); ctx.strokeStyle #ccc; ctx.lineWidth 2; ctx.beginPath(); ctx.moveTo(target.x 15, target.y - target.radius - 5); ctx.lineTo(target.x 15, target.y target.radius * 0.6); ctx.stroke(); } function drawRover() { const r rover.size; ctx.save(); ctx.translate(rover.x, rover.y); ctx.rotate(rover.angle); // 车身阴影 ctx.beginPath(); ctx.ellipse(0, 0, r * 1.6, r * 1.2, 0, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.35); ctx.fill(); // 车身 ctx.beginPath(); ctx.roundRect(-r * 1.4, -r * 0.9, r * 2.8, r * 1.8, 4); ctx.fillStyle #e8a33d; ctx.fill(); ctx.strokeStyle #8d5b1e; ctx.lineWidth 2; ctx.stroke(); // 车门线 ctx.beginPath(); ctx.moveTo(0, -r * 0.9); ctx.lineTo(0, r * 0.9); ctx.strokeStyle #8d5b1e; ctx.lineWidth 1; ctx.stroke(); // 车头灯 ctx.fillStyle #fff9c4; ctx.beginPath(); ctx.arc(r * 1.2, -r * 0.3, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(r * 1.2, r * 0.3, 4, 0, Math.PI * 2); ctx.fill(); // 车轮 ctx.fillStyle #333; ctx.beginPath(); ctx.ellipse(-r, -r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(r, -r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(-r, r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(r, r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); // 天线 ctx.strokeStyle #aaa; ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(0, -r * 0.8); ctx.lineTo(r * 0.2, -r * 1.6); ctx.stroke(); ctx.fillStyle #ff0000; ctx.beginPath(); ctx.arc(r * 0.2, -r * 1.6, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }这里用ctx.save()和ctx.restore()包裹坐标变换确保旋转操作不会影响后续绘制。ctx.roundRect是现代浏览器支持的 API如果你的浏览器版本较旧可以替换为普通矩形或手动绘制圆角矩形。接下来实现粒子特效和提示文字。let particles []; function spawnParticles(x, y, count) { for (let i 0; i count; i) { const angle Math.random() * Math.PI * 2; const speed 30 Math.random() * 80; particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 0, maxLife: 0.6 Math.random() * 0.6, size: 2 Math.random() * 3, color: Math.random() 0.5 ? #ffb347 : #ff5722 }); } } function updateParticles(dt) { for (let i particles.length - 1; i 0; i--) { const p particles[i]; p.x p.vx * dt; p.y p.vy * dt; p.life dt; if (p.life p.maxLife) { particles.splice(i, 1); } } } function drawParticles() { for (const p of particles) { const alpha 1 - p.life / p.maxLife; ctx.globalAlpha alpha; ctx.fillStyle p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * alpha, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha 1; }粒子系统用于火星车移动时扬起的尘土增加游戏沉浸感。4.6 实现仪表盘 UI 更新仪表盘中的数据需要在每帧更新同时把氧气和能量值同步到进度条和文本。function updateDashboard() { const oxygenPct Math.max(0, resources.oxygen).toFixed(1); const energyPct Math.max(0, resources.energy).toFixed(1); document.getElementById(oxygenValue).textContent oxygenPct %; document.getElementById(oxygenBar).style.width Math.max(0, resources.oxygen) %; document.getElementById(energyValue).textContent energyPct %; document.getElementById(energyBar).style.width Math.max(0, resources.energy) %; const distance Math.floor(resources.distance); document.getElementById(distanceValue).textContent distance m; document.getElementById(coordValue).textContent ( Math.floor(rover.x) , Math.floor(rover.y) ); }注意这里的氧气和能量是浮点数显示时保留一位小数即可。进度条宽度直接使用百分比数值。4.7 渲染主循环最后把主循环函数和重置逻辑补上游戏就完整了。function render() { drawBackground(); drawTarget(); drawParticles(); if (!gameOver) { drawRover(); } // 任务完成提示 if (gameWin) { ctx.fillStyle rgba(0, 0, 0, 0.55); ctx.fillRect(0, 0, W, H); ctx.font bold 44px Arial; ctx.textAlign center; ctx.fillStyle #ffd700; ctx.fillText(任务完成, W / 2, H / 2 - 20); ctx.font 18px Arial; ctx.fillStyle #fff; ctx.fillText(火星车成功抵达目标点, W / 2, H / 2 30); } // 游戏结束提示 if (gameOver !gameWin) { ctx.fillStyle rgba(0, 0, 0, 0.6); ctx.fillRect(0, 0, W, H); ctx.font bold 40px Arial; ctx.textAlign center; ctx.fillStyle #ff5252; ctx.fillText(探测任务失败, W / 2, H / 2 - 10); const reason resources.oxygen 0 ? 氧气耗尽 : 能量耗尽; ctx.font 18px Arial; ctx.fillStyle #fff; ctx.fillText(reason 请重置游戏重新尝试, W / 2, H / 2 30); } } let lastTimestamp 0; function gameLoop(timestamp) { const dt Math.min((timestamp - lastTimestamp) / 1000, 0.05); lastTimestamp timestamp; elapsedTime dt; update(dt); updateParticles(dt); render(); requestAnimationFrame(gameLoop); } function resetGame() { rover.x 450; rover.y 300; rover.angle 0; rover.speed 0; resources.oxygen 100; resources.energy 100; resources.distance 0; gameOver false; gameWin false; particles []; elapsedTime 0; updateDashboard(); } document.getElementById(resetBtn).addEventListener(click, resetGame); requestAnimationFrame(gameLoop);dt上限限制为 0.05 秒这是为了防止浏览器标签页切换导致时间差过大、游戏出现瞬间跳跃的问题。requestAnimationFrame是浏览器原生动画循环方式不需要额外库。4.8 运行与验证保存文件后用浏览器打开mars-game/index.html。你会看到红色火星地表和星空背景。一台橙色火星车位于画面中央。右上角仪表盘显示氧气 100%、能量 100%、行驶距离 0 米。左上角有一个闪烁的黄色目标点。按 W 前进、S 后退、A/D 左右旋转。当火星车到达目标点时画面会显示“任务完成”。如果氧气或能量耗尽游戏结束点击“重置游戏”按钮可重新开始。4.9 结果说明通过上面的代码我们用 Grok Build 辅助完成了一个功能完整的火星模拟游戏。虽然画面不是 3D 的但它已经包含了一个游戏的核心要素交互、状态、目标、失败条件、UI 反馈。现在你可以尝试调整以下参数观察变化// 例如调高移动速度 rover.maxSpeed 200; // 降低资源消耗 resources.oxygen - 0.4 * dt * (0.5 moveFactor * 1.0);这种修改方式非常直观适合逐步验证 AI 生成代码中每个变量的含义。5. 常见问题与排查思路在实际开发中无论是 AI 生成代码还是手动修改都可能遇到问题。下面是我在构建火星模拟游戏时遇到的典型问题以及对应的排查方案。问题现象常见原因解决思路页面打开后一片空白script代码报错导致后续不执行打开浏览器 F12 控制台查看具体报错位置火星车无法移动键盘事件没有正确绑定检查keydown监听器确认keyCode对应正确roundRect is not a function浏览器版本过旧把ctx.roundRect改为手动矩形绘制游戏运行时卡顿明显粒子数量过多或每帧创建大量对象限制粒子总数使用对象池重置后游戏状态没有恢复resetGame中漏掉某些状态变量把gameOver、gameWin、particles都重置目标点到达判定不准距离计算错误使用Math.hypot计算两点距离并考虑两者半径下面展开说明两个常见问题。5.1 键盘事件未生效很多初学者把keydown事件写成了document.addEventListener(keydown, myFunction);但没有检查myFunction内部是否使用了e.code或e.keyCode。本文使用的是e.code对应的按键是物理位置比如KeyW、KeyA。如果你希望支持方向键可以继续添加if (e.code ArrowUp) { keys[KeyW] true; }或者在update函数里同时判断if (keys[ArrowUp] || keys[KeyW]) { rover.speed rover.acceleration * dt; }无论采用哪种方案关键是要保证事件监听函数被正确注册并且keys对象在页面加载时存在。5.2 AI 生成代码存在“幻觉”API这是使用 Grok Build 时最需要警惕的问题。AI 可能会生成一个并不存在的浏览器 API或者使用了库函数但导入方式不对。遇到这种情况按以下顺序排查阅读控制台报错信息。确认错误类型是TypeError、ReferenceError还是语法错误。在浏览器兼容性网站查询该 API 是否受支持。如果需要直接修改代码采用更基础的实现。例如本文中的ctx.roundRect就是较新的 API如果浏览器不支持可以改成function drawRoundRect(x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x r, y); ctx.lineTo(x w - r, y); ctx.arcTo(x w, y, x w, y r, r); ctx.lineTo(x w, y h - r); ctx.arcTo(x w, y h, x w - r, y h, r); ctx.lineTo(x r, y h); ctx.arcTo(x, y h, x, y h - r, r); ctx.lineTo(x, y r); ctx.arcTo(x, y, x r, y, r); ctx.closePath(); }然后把ctx.roundRect(...)替换为drawRoundRect(...)。6. 最佳实践与工程建议6.1 Prompt 工程如何让 AI 生成更高质量的代码使用 Grok Build 时提问方式直接决定生成代码的质量。建议遵循以下原则需求具体化。不要只写“做一个火星游戏”而要写清楚画布尺寸、控制方式、UI 布局、失败条件。比如请用 Canvas 生成一个 900x600 的火星游戏画布火星车用 WASD 控制 右侧仪表盘显示氧气和能量使用进度条展示地图中有目标点。限制依赖和版本。如果对技术栈有明确要求必须提前说明。比如“不使用任何第三方库”“使用 ES6 语法”。迭代而非一次完成。第一版代码往往结构松散正确做法是让 AI 先生成骨架再逐步补充细节。例如第一轮生成基本场景和移动。第二轮添加资源消耗和 UI。第三轮增加粒子特效和游戏结束提示。6.2 代码审查与安全边界AI 生成的代码不能直接上生产需要人工审查以下内容事件监听是否有全局变量污染。资源消耗计算数值是否合理是否可能出现除以零或负数。性能每帧是否创建过多对象是否频繁操作 DOM。边界条件火星车是否可能移动到画布外是否已经处理。在本项目中边界处理比较简单因为地图就是画布范围。如果扩展为更大的地图还需要考虑摄像头跟随、坐标换算等问题。6.3 性能优化建议当前代码在 900x600 画布上运行非常流畅但如果要扩展功能建议关注以下性能点减少每帧调用尽量把不需要每帧更新的 UI 文本放在条件判断中例如只有数值变化超过 1 时才更新 DOM。粒子对象池不要频繁splice粒子可以复用数组尾部元素。离屏 Canvas静态背景可以提前绘制到离屏 canvas只把动态元素画到主画布减少重复计算。示例中的离屏优化思路const bgCanvas document.createElement(canvas); bgCanvas.width W; bgCanvas.height H; const bgCtx bgCanvas.getContext(2d); function drawStaticBackground() { // 在 bgCtx 上绘制星空、地面、山丘 } // 每帧只把 bgCanvas 绘制到主画布 ctx.drawImage(bgCanvas, 0, 0);这样能显著降低每帧绘制压力。6.4 版本管理与项目扩展虽然这个项目只有一个 HTML 文件但后续扩展建议拆分文件mars-game/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── game.js │ ├── rover.js │ ├── render.js │ └── resources.js拆分后的好处是每个文件职责单一后续添加新功能时不需要在几千行代码里寻找函数。同时也可以引入模块化语法// rover.js export const rover { x: 450, y: 300, angle: 0 };// game.js import { rover } from ./rover.js;需要注意的是浏览器原生 ES Module 需要在本地服务器中运行直接双击index.html可能因跨域限制无法加载模块。这时可以使用 VS Code 的 Live Server 插件。6.5 AI 辅助开发的正确学习路径想真正提升 AI 辅助开发的效率不能只依赖 AI还需要具备足够的基础知识。建议按以下顺序学习掌握 HTML、CSS、JavaScript 基础语法。理解 Canvas 2D 的坐标系和基本绘图 API。熟悉requestAnimationFrame动画循环机制。学会使用浏览器开发者工具排查问题。用 AI 工具生成代码并人工审查、修改、验证。这样即使 AI 生成了一段不完美甚至错误的代码你也能快速定位并修复。反过来AI 又能帮你把重复劳动降到最低让你有更多时间关注设计和逻辑。7. 总结与下一步学习方向这套“Grok Build 打造火星模拟游戏”的完整流程核心收获可以总结为以下几点用 AI 辅助构建原型通过结构化提示词让 AI 在几分钟内生成可运行的游戏初稿。理解游戏核心循环update负责逻辑render负责绘制requestAnimationFrame负责循环这是所有实时游戏/交互应用的基础。掌握 Canvas 基本渲染坐标变换、几何图形绘制、粒子系统都能在火星模拟游戏里得到充分练习。重视代码审查与边界处理AI 能提速但最终质量取决于开发者的判断和测试。下一步如果你想让这个项目继续进化可以从几个方向入手把 2D 场景升级为 3D使用 Three.js 渲染火星地形。接入真实火星地图纹理让地面更接近“毅力号”探测器拍摄的画面。增加任务系统不只是单一目标点而是多个站点和采集任务。加入声音效果例如引擎声、警报声。把游戏状态存储到localStorage支持存档和继续游戏。每个方向都适合继续用 Grok Build 辅助编码建议你直接打开 AI 工具把当前 HTML 文件和需求描述发给它开始你的迭代版本。动手实践永远比看教程提升得快。
Grok Build打造火星模拟游戏：AI辅助开发实战教程
最近在折腾 AI 辅助开发工作流时尝试用 Grok Build 来快速搭建一个火星模拟游戏的网页原型。整个过程比预想中流畅但也有一些值得注意的坑生成代码的幻觉、Canvas 渲染性能、模块拆分方式等。这里把完整流程整理成一份可直接复现的实战教程既包含 AI 辅助构建的思路也包含一个真正能运行的火星模拟游戏代码新手可以照着做有经验的开发者也能直接参考代码结构和排错方案。1. 背景与核心概念1.1 什么是 Grok BuildGrok Build 是当前 AI 编程辅助工具生态中的一个新方向它强调“通过自然语言描述需求让 AI 帮助生成、修改和调试完整项目代码”。相比传统的人工手写全部代码Grok Build 的核心价值在于快速生成原型把模糊的产品想法转换成可运行的代码骨架。辅助调试把报错信息直接交给 AI让它分析可能原因并给出修复建议。代码补全与重构在已有代码基础上做功能扩展、性能优化和结构重构。不过需要注意AI 生成代码并不等于“无需验证”。Grok Build 生成的代码仍然可能存在逻辑错误、版本不匹配、安全边界缺失等问题。所以本文的实践思路是用 Grok Build 做效率放大器但最终由开发者负责审查、测试和收口。这种工作流在当前落地性最强也最值得借鉴。网上关于 Grok Build 的版本迭代信息比较多不同来源说法并不一致。本文不依赖某个具体版本的功能而是聚焦“AI 辅助构建 网页游戏开发”的通用工作流。只要你的 AI 编程助手支持自然语言对话和代码生成这套方法基本都可以复用。1.2 火星模拟游戏的技术选型火星模拟游戏是一个很适合用来练习 AI 辅助开发的项目因为它包含了几类典型需求场景渲染火星表面、天空、地貌、陨石坑。交互控制火星车移动、视角切换、状态操作。状态管理氧气、能量、距离、进度等动态数据。界面设计仪表盘、按钮、弹窗。在技术选型上这里不引入重量级游戏引擎而是使用最轻量的方案技术作用说明HTML5 Canvas2D 游戏渲染所有游戏元素都绘制在canvas上JavaScript游戏逻辑控制循环、事件、状态更新CSS页面布局与仪表盘负责 UI 层样式浏览器运行环境不需要安装额外依赖这样做的优势很明显代码量可控、运行环境通用、方便粘贴到任意 HTML 文件中直接打开运行。对初学者来说Canvas 2D 比 WebGL / Three.js 更容易理解对于想扩展的开发者后续也能平滑升级到 Three.js 做 3D 版本。1.3 为什么用 AI 辅助构建游戏原型传统开发流程需要先设计类、写渲染函数、调事件绑定细节非常多。而使用 Grok Build 构建原型时可以把工作重心放在“需求表达”和“代码验收”上用自然语言描述游戏规则和界面布局。让 AI 生成第一版完整代码。运行代码检查效果与预期偏差。把问题反馈给 AI迭代优化。人工审查关键逻辑补齐安全的边界处理。这种模式不是“完全交给 AI”而是“让 AI 承担初稿工作量人负责判断和收尾”。下面我们就按这个流程完整制作一个火星模拟游戏。2. 环境准备与版本说明2.1 运行环境本文示例是一个纯前端项目不需要安装 Node.js、Python 或其他后端环境。需要的工具如下一个现代浏览器Chrome、Edge、Firefox 均可。一个文本编辑器VS Code、Sublime、记事本都可以。浏览器开发者工具用于查看控制台报错和性能情况。如果你的电脑上已经安装了 VS Code那就更好了可以配合 Live Server 插件打开页面体验会更好。没有安装也无所谓直接用浏览器打开 HTML 文件即可运行。2.2 版本说明因为这是一个不依赖第三方库的网页游戏所以不需要锁定特定依赖版本。HTML5 Canvas 和 ES6 JavaScript 是现代浏览器的标准能力。唯一需要注意的是代码中使用的是 ES6 语法包括const、let、箭头函数、class等。如果你需要兼容 IE 等老旧浏览器需要额外做转译但本文不做兼容处理。版本需要根据你的项目实际情况调整本文示例以现代浏览器常见环境为例重点演示配置思路。2.3 AI 工具准备如果你要在自己的电脑上复现“Grok Build 工作流”需要准备好 AI 编程助手的访问方式。具体包括一个可用的 Grok Build 账号或类似 AI 编程助手入口。Grok Build的对话窗口或命令行终端。准备好描述需求的表达能力。在本文示例中我们会模拟多轮“人机对话”展示如何向 Grok Build 描述需求、接收代码、反馈问题。你完全可以用类似的提示词在自己所用的 AI 工具上生成代码。3. 火星模拟游戏功能设计3.1 需求分析在向 Grok Build 提问之前先把需求想清楚。一个完整的火星模拟游戏至少需要以下模块模块功能说明场景渲染绘制火星地表、天空、太阳、星星、陨石坑火星车可移动的探测车支持方向键或 WASD 控制仪表盘显示氧气、能量、行驶距离、当前坐标任务目标到达指定目标点触发任务完成提示状态反馈能量耗尽或氧气归零时游戏结束有了这个模块列表就可以把它“翻译”成 AI 能理解的指令。3.2 技术方案设计游戏采用单页面结构核心代码放在 HTML 文件的script标签中。为了便于理解我们将逻辑拆成几个对象gameState保存游戏全局状态。rover火星车对象包含位置、角度、速度。target目标点位置。update()每一帧更新逻辑。render()每一帧绘制画面。keydown/keyup键盘事件监听。这样拆分的好处是逻辑清晰即使 AI 生成的初始版本结构比较混乱我们也可以手动整理成统一风格。3.3 给 Grok Build 的提示词示例下面是一个非常关键的环节如何向 AI 描述需求。一个高质量的提示词应该包含项目类型和语言。核心功能列表。界面布局说明。运行限制不要外部依赖等。例如请帮我写一个纯 HTML CSS JavaScript 的火星模拟游戏。 要求 1. 使用 Canvas 2D 渲染火星表面画面要有星星背景、红色地面、陨石坑。 2. 用 WASD 控制一辆火星车移动火星车用简单的几何图形绘制。 3. 页面右侧有仪表盘显示氧气、能量、行驶距离、当前坐标。 4. 场景中有一个目标点到达后弹出提示“任务完成”。 5. 氧气或能量降为 0 时游戏结束。 6. 不要使用任何第三方库所有代码放在一个 index.html 中。把这段提示词发给 Grok Build它会返回一份初始代码。当然第一版代码通常不完美需要继续追问。我们会在下一节展示完整的迭代过程。4. 完整实战用 Grok Build 构建火星模拟游戏为了让流程可复现这里我把“AI 对话 人工整理”后的最终版本完整写出来。你可以直接复制下面的代码到mars-game.html文件中用浏览器打开运行。4.1 创建项目结构先创建一个文件夹例如mars-game/ └── index.html本项目只有一个文件便于演示和分发。如果你后续想扩展也可以拆分成index.html、style.css、main.js三个文件但本文统一放在一个文件中。4.2 编写 HTML 和 CSS 布局在index.html中先搭建页面骨架。左侧是游戏画布右侧是仪表盘面板。!-- 文件路径mars-game/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleGrok Build 火星模拟游戏/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0e1a; font-family: Microsoft YaHei, Arial, sans-serif; color: #eee; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .game-wrap { display: flex; gap: 16px; padding: 20px; flex-wrap: wrap; } canvas { border: 2px solid #c1440e; border-radius: 8px; background: #1a0e05; cursor: crosshair; } .dashboard { width: 260px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 18px; } .dashboard h2 { font-size: 20px; color: #ffb347; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .stat-item { display: flex; justify-content: space-between; align-items: center; font-size: 15px; } .stat-label { color: #aaa; } .stat-value { font-weight: bold; color: #ffb347; } .bar-wrap { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 4px; } .bar-fill { height: 100%; border-radius: 4px; transition: width 0.2s; } .bar-oxygen { background: linear-gradient(90deg, #23a6d5, #23d5ab); } .bar-energy { background: linear-gradient(90deg, #f7971e, #ffd200); } .tips { background: rgba(0, 0, 0, 0.3); padding: 12px; border-radius: 8px; font-size: 13px; line-height: 1.8; } .btn { padding: 10px; border: none; border-radius: 8px; background: #c1440e; color: #fff; font-size: 15px; cursor: pointer; transition: background 0.2s; } .btn:hover { background: #e05a17; } /style /head body div classgame-wrap canvas idgameCanvas width900 height600/canvas div classdashboard h2 火星探测车/h2 div classstat-item span classstat-label氧气/span span classstat-value idoxygenValue100%/span /div div classbar-wrap div classbar-fill bar-oxygen idoxygenBar stylewidth: 100%/div /div div classstat-item span classstat-label能量/span span classstat-value idenergyValue100%/span /div div classbar-wrap div classbar-fill bar-energy idenergyBar stylewidth: 100%/div /div div classstat-item span classstat-label行驶距离/span span classstat-value iddistanceValue0 m/span /div div classstat-item span classstat-label坐标/span span classstat-value idcoordValue(450, 300)/span /div div classtips pb操作说明/b/p pW / S前进 / 后退/p pA / D左转 / 右转/p p到达黄色目标点即可完成任务/p /div button classbtn idresetBtn重置游戏/button /div /div script // 游戏逻辑代码见下方 /script /body /html这段代码先把游戏的整体外观做好。canvas是游戏渲染区域右侧面板用于展示实时数据。这里使用了少量 emoji 做视觉提示不影响代码结构。4.3 编写 Canvas 游戏逻辑下面是最核心的 JavaScript 部分。先在script标签中定义必要的变量和常量。// 文件路径mars-game/index.html 中 script 内的核心代码 const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); const W canvas.width; const H canvas.height; // 游戏状态 let gameOver false; let gameWin false; let lastTime 0; let elapsedTime 0; // 火星车属性 const rover { x: 450, y: 300, angle: 0, // 朝向角度弧度 speed: 0, // 当前速度 maxSpeed: 120, // 最大速度 px/s acceleration: 60, // 加速度 size: 16 // 绘制尺寸 }; // 目标点 const target { x: 150, y: 150, radius: 24 }; // 资源状态 const resources { oxygen: 100, energy: 100, distance: 0 };这些变量构成了游戏的核心数据。rover对象保存火星车的位置、角度、速度resources保存氧气和能量值target是目标点坐标。接下来写键盘事件监听。const keys {}; document.addEventListener(keydown, (e) { keys[e.code] true; if (e.code Space) { e.preventDefault(); } }); document.addEventListener(keyup, (e) { keys[e.code] false; });keys对象用来记录当前按下的按键状态。游戏循环中会根据keys中的值判断是否加速、减速或转向。4.4 实现游戏循环与更新逻辑游戏循环是整个模拟游戏的心脏。我们需要计算时间差然后更新状态、渲染画面。function update(dt) { if (gameOver || gameWin) { return; } // 根据按键控制火星车 if (keys[KeyW]) { rover.speed Math.min(rover.speed rover.acceleration * dt, rover.maxSpeed); } if (keys[KeyS]) { rover.speed Math.max(rover.speed - rover.acceleration * dt, -rover.maxSpeed * 0.5); } if (keys[KeyA]) { rover.angle - 2.0 * dt; } if (keys[KeyD]) { rover.angle 2.0 * dt; } // 摩擦减速 if (!keys[KeyW] !keys[KeyS]) { rover.speed * Math.pow(0.5, dt); if (Math.abs(rover.speed) 0.5) { rover.speed 0; } } // 更新位置 const prevX rover.x; const prevY rover.y; rover.x Math.cos(rover.angle) * rover.speed * dt; rover.y Math.sin(rover.angle) * rover.speed * dt; // 边界约束 rover.x Math.max(20, Math.min(W - 20, rover.x)); rover.y Math.max(20, Math.min(H - 20, rover.y)); // 计算行驶距离 const moved Math.hypot(rover.x - prevX, rover.y - prevY); resources.distance moved; // 消耗资源移动越快消耗越快 const moveFactor Math.abs(rover.speed) / rover.maxSpeed; resources.oxygen - 0.8 * dt * (0.5 moveFactor * 1.5); resources.energy - 1.2 * dt * (0.5 moveFactor * 2.0); // 资源下限 resources.oxygen Math.max(0, resources.oxygen); resources.energy Math.max(0, resources.energy); // 检查游戏结束条件 if (resources.oxygen 0 || resources.energy 0) { gameOver true; } // 检查是否到达目标点 const distToTarget Math.hypot(rover.x - target.x, rover.y - target.y); if (distToTarget target.radius rover.size) { gameWin true; } // 更新 UI 仪表盘 updateDashboard(); }这里的关键逻辑是dt是上一帧到当前帧的时间差避免不同刷新率下速度不一致。Math.cos和Math.sin把角度转换成方向向量再乘以速度得到位移。行驶距离累加使用Math.hypot也就是两点间欧几里得距离。氧气和能量消耗与速度相关速度越快消耗越快增加真实感。4.5 实现 Canvas 场景渲染渲染部分分为背景、目标点、火星车和粒子特效。先写火星表面背景。function drawBackground() { // 星空 ctx.fillStyle #0a0e1a; ctx.fillRect(0, 0, W, H); // 星星 for (let i 0; i 120; i) { // 使用固定随机种子避免每次刷新位置变化 const seed i * 137.5; const sx (seed * 7) % W; const sy (seed * 13) % H; const brightness 0.3 ((i * 29) % 70) / 100; ctx.globalAlpha brightness; ctx.fillStyle #fff; ctx.beginPath(); ctx.arc(sx, sy, 1.2, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha 1; // 天空渐变 const skyGrad ctx.createLinearGradient(0, 0, 0, H * 0.5); skyGrad.addColorStop(0, rgba(180, 80, 30, 0.35)); skyGrad.addColorStop(1, rgba(0, 0, 0, 0)); ctx.fillStyle skyGrad; ctx.fillRect(0, 0, W, H * 0.5); // 火星地面 const groundY H * 0.72; const groundGrad ctx.createLinearGradient(0, groundY, 0, H); groundGrad.addColorStop(0, #8b3a1a); groundGrad.addColorStop(0.3, #6b240c); groundGrad.addColorStop(1, #3d1205); ctx.fillStyle groundGrad; ctx.fillRect(0, groundY, W, H - groundY); // 远处山丘 ctx.fillStyle rgba(100, 40, 15, 0.6); drawHill(H * 0.62, 80, 1.2); ctx.fillStyle rgba(130, 55, 20, 0.7); drawHill(H * 0.68, 110, 0.8); // 地面细节陨石坑 drawCrater(120, H * 0.82, 22); drawCrater(380, H * 0.78, 14); drawCrater(700, H * 0.85, 30); drawCrater(820, H * 0.74, 10); } function drawHill(baseY, height, scale) { ctx.beginPath(); ctx.moveTo(0, baseY height * 0.3); for (let x 0; x W; x 20) { const y baseY Math.sin(x * 0.005 * scale) * height * 0.4 Math.sin(x * 0.01) * height * 0.2; ctx.lineTo(x, y); } ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath(); ctx.fill(); } function drawCrater(x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.2); ctx.fill(); ctx.beginPath(); ctx.arc(x - r * 0.15, y - r * 0.15, r * 0.7, 0, Math.PI * 2); ctx.fillStyle rgba(255, 180, 120, 0.15); ctx.fill(); }星空部分用了伪随机数公式确保每次刷新画面时星星位置固定同时不引入外部随机函数导致闪烁。地面用了渐变和简单曲线绘制山丘视觉效果比较接近火星环境。接着绘制目标和火星车。function drawTarget() { // 目标点光晕 const pulse 0.6 0.4 * Math.sin(elapsedTime * 3); ctx.beginPath(); ctx.arc(target.x, target.y, target.radius 6, 0, Math.PI * 2); ctx.fillStyle rgba(255, 220, 100, ${0.3 * pulse}); ctx.fill(); // 目标点核心 ctx.beginPath(); ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2); ctx.fillStyle #ffd700; ctx.fill(); ctx.strokeStyle #ff8c00; ctx.lineWidth 3; ctx.stroke(); // 旗帜 ctx.fillStyle #ff5722; ctx.fillRect(target.x 6, target.y - target.radius - 8, 18, 5); ctx.strokeStyle #ccc; ctx.lineWidth 2; ctx.beginPath(); ctx.moveTo(target.x 15, target.y - target.radius - 5); ctx.lineTo(target.x 15, target.y target.radius * 0.6); ctx.stroke(); } function drawRover() { const r rover.size; ctx.save(); ctx.translate(rover.x, rover.y); ctx.rotate(rover.angle); // 车身阴影 ctx.beginPath(); ctx.ellipse(0, 0, r * 1.6, r * 1.2, 0, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.35); ctx.fill(); // 车身 ctx.beginPath(); ctx.roundRect(-r * 1.4, -r * 0.9, r * 2.8, r * 1.8, 4); ctx.fillStyle #e8a33d; ctx.fill(); ctx.strokeStyle #8d5b1e; ctx.lineWidth 2; ctx.stroke(); // 车门线 ctx.beginPath(); ctx.moveTo(0, -r * 0.9); ctx.lineTo(0, r * 0.9); ctx.strokeStyle #8d5b1e; ctx.lineWidth 1; ctx.stroke(); // 车头灯 ctx.fillStyle #fff9c4; ctx.beginPath(); ctx.arc(r * 1.2, -r * 0.3, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(r * 1.2, r * 0.3, 4, 0, Math.PI * 2); ctx.fill(); // 车轮 ctx.fillStyle #333; ctx.beginPath(); ctx.ellipse(-r, -r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(r, -r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(-r, r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(r, r * 0.9, 6, 4, 0, 0, Math.PI * 2); ctx.fill(); // 天线 ctx.strokeStyle #aaa; ctx.lineWidth 1; ctx.beginPath(); ctx.moveTo(0, -r * 0.8); ctx.lineTo(r * 0.2, -r * 1.6); ctx.stroke(); ctx.fillStyle #ff0000; ctx.beginPath(); ctx.arc(r * 0.2, -r * 1.6, 2.5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }这里用ctx.save()和ctx.restore()包裹坐标变换确保旋转操作不会影响后续绘制。ctx.roundRect是现代浏览器支持的 API如果你的浏览器版本较旧可以替换为普通矩形或手动绘制圆角矩形。接下来实现粒子特效和提示文字。let particles []; function spawnParticles(x, y, count) { for (let i 0; i count; i) { const angle Math.random() * Math.PI * 2; const speed 30 Math.random() * 80; particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 0, maxLife: 0.6 Math.random() * 0.6, size: 2 Math.random() * 3, color: Math.random() 0.5 ? #ffb347 : #ff5722 }); } } function updateParticles(dt) { for (let i particles.length - 1; i 0; i--) { const p particles[i]; p.x p.vx * dt; p.y p.vy * dt; p.life dt; if (p.life p.maxLife) { particles.splice(i, 1); } } } function drawParticles() { for (const p of particles) { const alpha 1 - p.life / p.maxLife; ctx.globalAlpha alpha; ctx.fillStyle p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * alpha, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha 1; }粒子系统用于火星车移动时扬起的尘土增加游戏沉浸感。4.6 实现仪表盘 UI 更新仪表盘中的数据需要在每帧更新同时把氧气和能量值同步到进度条和文本。function updateDashboard() { const oxygenPct Math.max(0, resources.oxygen).toFixed(1); const energyPct Math.max(0, resources.energy).toFixed(1); document.getElementById(oxygenValue).textContent oxygenPct %; document.getElementById(oxygenBar).style.width Math.max(0, resources.oxygen) %; document.getElementById(energyValue).textContent energyPct %; document.getElementById(energyBar).style.width Math.max(0, resources.energy) %; const distance Math.floor(resources.distance); document.getElementById(distanceValue).textContent distance m; document.getElementById(coordValue).textContent ( Math.floor(rover.x) , Math.floor(rover.y) ); }注意这里的氧气和能量是浮点数显示时保留一位小数即可。进度条宽度直接使用百分比数值。4.7 渲染主循环最后把主循环函数和重置逻辑补上游戏就完整了。function render() { drawBackground(); drawTarget(); drawParticles(); if (!gameOver) { drawRover(); } // 任务完成提示 if (gameWin) { ctx.fillStyle rgba(0, 0, 0, 0.55); ctx.fillRect(0, 0, W, H); ctx.font bold 44px Arial; ctx.textAlign center; ctx.fillStyle #ffd700; ctx.fillText(任务完成, W / 2, H / 2 - 20); ctx.font 18px Arial; ctx.fillStyle #fff; ctx.fillText(火星车成功抵达目标点, W / 2, H / 2 30); } // 游戏结束提示 if (gameOver !gameWin) { ctx.fillStyle rgba(0, 0, 0, 0.6); ctx.fillRect(0, 0, W, H); ctx.font bold 40px Arial; ctx.textAlign center; ctx.fillStyle #ff5252; ctx.fillText(探测任务失败, W / 2, H / 2 - 10); const reason resources.oxygen 0 ? 氧气耗尽 : 能量耗尽; ctx.font 18px Arial; ctx.fillStyle #fff; ctx.fillText(reason 请重置游戏重新尝试, W / 2, H / 2 30); } } let lastTimestamp 0; function gameLoop(timestamp) { const dt Math.min((timestamp - lastTimestamp) / 1000, 0.05); lastTimestamp timestamp; elapsedTime dt; update(dt); updateParticles(dt); render(); requestAnimationFrame(gameLoop); } function resetGame() { rover.x 450; rover.y 300; rover.angle 0; rover.speed 0; resources.oxygen 100; resources.energy 100; resources.distance 0; gameOver false; gameWin false; particles []; elapsedTime 0; updateDashboard(); } document.getElementById(resetBtn).addEventListener(click, resetGame); requestAnimationFrame(gameLoop);dt上限限制为 0.05 秒这是为了防止浏览器标签页切换导致时间差过大、游戏出现瞬间跳跃的问题。requestAnimationFrame是浏览器原生动画循环方式不需要额外库。4.8 运行与验证保存文件后用浏览器打开mars-game/index.html。你会看到红色火星地表和星空背景。一台橙色火星车位于画面中央。右上角仪表盘显示氧气 100%、能量 100%、行驶距离 0 米。左上角有一个闪烁的黄色目标点。按 W 前进、S 后退、A/D 左右旋转。当火星车到达目标点时画面会显示“任务完成”。如果氧气或能量耗尽游戏结束点击“重置游戏”按钮可重新开始。4.9 结果说明通过上面的代码我们用 Grok Build 辅助完成了一个功能完整的火星模拟游戏。虽然画面不是 3D 的但它已经包含了一个游戏的核心要素交互、状态、目标、失败条件、UI 反馈。现在你可以尝试调整以下参数观察变化// 例如调高移动速度 rover.maxSpeed 200; // 降低资源消耗 resources.oxygen - 0.4 * dt * (0.5 moveFactor * 1.0);这种修改方式非常直观适合逐步验证 AI 生成代码中每个变量的含义。5. 常见问题与排查思路在实际开发中无论是 AI 生成代码还是手动修改都可能遇到问题。下面是我在构建火星模拟游戏时遇到的典型问题以及对应的排查方案。问题现象常见原因解决思路页面打开后一片空白script代码报错导致后续不执行打开浏览器 F12 控制台查看具体报错位置火星车无法移动键盘事件没有正确绑定检查keydown监听器确认keyCode对应正确roundRect is not a function浏览器版本过旧把ctx.roundRect改为手动矩形绘制游戏运行时卡顿明显粒子数量过多或每帧创建大量对象限制粒子总数使用对象池重置后游戏状态没有恢复resetGame中漏掉某些状态变量把gameOver、gameWin、particles都重置目标点到达判定不准距离计算错误使用Math.hypot计算两点距离并考虑两者半径下面展开说明两个常见问题。5.1 键盘事件未生效很多初学者把keydown事件写成了document.addEventListener(keydown, myFunction);但没有检查myFunction内部是否使用了e.code或e.keyCode。本文使用的是e.code对应的按键是物理位置比如KeyW、KeyA。如果你希望支持方向键可以继续添加if (e.code ArrowUp) { keys[KeyW] true; }或者在update函数里同时判断if (keys[ArrowUp] || keys[KeyW]) { rover.speed rover.acceleration * dt; }无论采用哪种方案关键是要保证事件监听函数被正确注册并且keys对象在页面加载时存在。5.2 AI 生成代码存在“幻觉”API这是使用 Grok Build 时最需要警惕的问题。AI 可能会生成一个并不存在的浏览器 API或者使用了库函数但导入方式不对。遇到这种情况按以下顺序排查阅读控制台报错信息。确认错误类型是TypeError、ReferenceError还是语法错误。在浏览器兼容性网站查询该 API 是否受支持。如果需要直接修改代码采用更基础的实现。例如本文中的ctx.roundRect就是较新的 API如果浏览器不支持可以改成function drawRoundRect(x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x r, y); ctx.lineTo(x w - r, y); ctx.arcTo(x w, y, x w, y r, r); ctx.lineTo(x w, y h - r); ctx.arcTo(x w, y h, x w - r, y h, r); ctx.lineTo(x r, y h); ctx.arcTo(x, y h, x, y h - r, r); ctx.lineTo(x, y r); ctx.arcTo(x, y, x r, y, r); ctx.closePath(); }然后把ctx.roundRect(...)替换为drawRoundRect(...)。6. 最佳实践与工程建议6.1 Prompt 工程如何让 AI 生成更高质量的代码使用 Grok Build 时提问方式直接决定生成代码的质量。建议遵循以下原则需求具体化。不要只写“做一个火星游戏”而要写清楚画布尺寸、控制方式、UI 布局、失败条件。比如请用 Canvas 生成一个 900x600 的火星游戏画布火星车用 WASD 控制 右侧仪表盘显示氧气和能量使用进度条展示地图中有目标点。限制依赖和版本。如果对技术栈有明确要求必须提前说明。比如“不使用任何第三方库”“使用 ES6 语法”。迭代而非一次完成。第一版代码往往结构松散正确做法是让 AI 先生成骨架再逐步补充细节。例如第一轮生成基本场景和移动。第二轮添加资源消耗和 UI。第三轮增加粒子特效和游戏结束提示。6.2 代码审查与安全边界AI 生成的代码不能直接上生产需要人工审查以下内容事件监听是否有全局变量污染。资源消耗计算数值是否合理是否可能出现除以零或负数。性能每帧是否创建过多对象是否频繁操作 DOM。边界条件火星车是否可能移动到画布外是否已经处理。在本项目中边界处理比较简单因为地图就是画布范围。如果扩展为更大的地图还需要考虑摄像头跟随、坐标换算等问题。6.3 性能优化建议当前代码在 900x600 画布上运行非常流畅但如果要扩展功能建议关注以下性能点减少每帧调用尽量把不需要每帧更新的 UI 文本放在条件判断中例如只有数值变化超过 1 时才更新 DOM。粒子对象池不要频繁splice粒子可以复用数组尾部元素。离屏 Canvas静态背景可以提前绘制到离屏 canvas只把动态元素画到主画布减少重复计算。示例中的离屏优化思路const bgCanvas document.createElement(canvas); bgCanvas.width W; bgCanvas.height H; const bgCtx bgCanvas.getContext(2d); function drawStaticBackground() { // 在 bgCtx 上绘制星空、地面、山丘 } // 每帧只把 bgCanvas 绘制到主画布 ctx.drawImage(bgCanvas, 0, 0);这样能显著降低每帧绘制压力。6.4 版本管理与项目扩展虽然这个项目只有一个 HTML 文件但后续扩展建议拆分文件mars-game/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── game.js │ ├── rover.js │ ├── render.js │ └── resources.js拆分后的好处是每个文件职责单一后续添加新功能时不需要在几千行代码里寻找函数。同时也可以引入模块化语法// rover.js export const rover { x: 450, y: 300, angle: 0 };// game.js import { rover } from ./rover.js;需要注意的是浏览器原生 ES Module 需要在本地服务器中运行直接双击index.html可能因跨域限制无法加载模块。这时可以使用 VS Code 的 Live Server 插件。6.5 AI 辅助开发的正确学习路径想真正提升 AI 辅助开发的效率不能只依赖 AI还需要具备足够的基础知识。建议按以下顺序学习掌握 HTML、CSS、JavaScript 基础语法。理解 Canvas 2D 的坐标系和基本绘图 API。熟悉requestAnimationFrame动画循环机制。学会使用浏览器开发者工具排查问题。用 AI 工具生成代码并人工审查、修改、验证。这样即使 AI 生成了一段不完美甚至错误的代码你也能快速定位并修复。反过来AI 又能帮你把重复劳动降到最低让你有更多时间关注设计和逻辑。7. 总结与下一步学习方向这套“Grok Build 打造火星模拟游戏”的完整流程核心收获可以总结为以下几点用 AI 辅助构建原型通过结构化提示词让 AI 在几分钟内生成可运行的游戏初稿。理解游戏核心循环update负责逻辑render负责绘制requestAnimationFrame负责循环这是所有实时游戏/交互应用的基础。掌握 Canvas 基本渲染坐标变换、几何图形绘制、粒子系统都能在火星模拟游戏里得到充分练习。重视代码审查与边界处理AI 能提速但最终质量取决于开发者的判断和测试。下一步如果你想让这个项目继续进化可以从几个方向入手把 2D 场景升级为 3D使用 Three.js 渲染火星地形。接入真实火星地图纹理让地面更接近“毅力号”探测器拍摄的画面。增加任务系统不只是单一目标点而是多个站点和采集任务。加入声音效果例如引擎声、警报声。把游戏状态存储到localStorage支持存档和继续游戏。每个方向都适合继续用 Grok Build 辅助编码建议你直接打开 AI 工具把当前 HTML 文件和需求描述发给它开始你的迭代版本。动手实践永远比看教程提升得快。
