最近在折騰 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 文件和需求描述發給它開始你的迭代版本。動手實踐永遠比看教程提升得快。