在实际 Web 前端开发中将经典游戏与现代技术栈结合既能巩固编程基础又能探索 3D 交互和 AI 辅助编程的边界。Mastermind猜颜色游戏就是一个很好的练手项目规则简单但实现时涉及状态管理、3D 渲染、用户交互和逻辑判断。结合 Three.js 构建 3D 界面并借助 AI Coding 工具加速开发可以显著提升原型构建效率。本文将带您从零开始使用 Three.js 和 AI 辅助编程复刻一个可交互的 3D 版 Mastermind 游戏。重点不止于代码实现更会解释 Three.js 的 3D 场景搭建、游戏状态机设计、AI 提示词工程以及如何将 AI 生成的代码段集成到真实项目中。最终您将获得一个可在浏览器中运行、支持鼠标交互的完整游戏并掌握类似 3D 小游戏的开发模式。1. 理解 Mastermind 游戏规则与 Three.js 基础Mastermind 是一款两人玩的密码破解游戏一方担任“密码制定者”另一方担任“密码破解者”。在单人电子版中计算机会随机生成一组颜色密码玩家需在有限次数内猜出正确顺序。1.1 游戏核心规则密码由 4 个颜色槽组成每个槽从 6 种颜色中选取可重复。玩家每轮提交一个颜色序列作为猜测。系统反馈两个指标黑钉颜色和位置都正确的个数。白钉颜色正确但位置错误的个数。玩家根据反馈调整下一轮猜测直到猜中或用完尝试次数。1.2 Three.js 的 3D 渲染基础Three.js 是一个基于 WebGL 的 3D 图形库通过封装底层 API让开发者能用更声明式的方式创建 3D 场景。核心概念包括场景Scene所有 3D 对象的容器。相机Camera决定视角和投影方式常用透视相机PerspectiveCamera。渲染器Renderer将场景和相机结合输出到 Canvas 元素。网格Mesh由几何体Geometry和材质Material组成代表一个具体物体。光源Light影响物体明暗和阴影如环境光AmbientLight和点光源PointLight。在 Mastermind 游戏中每个颜色槽可以用一个圆柱体或球体表示排列成 4×N 的网格N 为最大尝试次数通过材质颜色区分不同状态。2. 项目环境准备与依赖配置2.1 初始化项目结构使用 npm 初始化一个前端项目并安装 Three.js 库mkdir mastermind-3d cd mastermind-3d npm init -y npm install three项目目录结构如下mastermind-3d/ ├── index.html # 主页面 ├── src/ │ ├── main.js # 入口文件 │ ├── game.js # 游戏逻辑 │ └── renderer.js # Three.js 渲染封装 ├── package.json └── style.css # 基础样式2.2 基础 HTML 和 CSSindex.html中创建一个全屏 Canvas 容器!DOCTYPE html html langzh-CN head meta charsetUTF-8 title3D Mastermind 游戏/title link relstylesheet hrefstyle.css /head body div idgameContainer canvas idgameCanvas/canvas /div script typemodule srcsrc/main.js/script /body /htmlstyle.css确保 Canvas 占满视口body { margin: 0; overflow: hidden; font-family: sans-serif; } #gameContainer { width: 100vw; height: 100vh; } #gameCanvas { display: block; width: 100%; height: 100%; }3. 搭建 Three.js 3D 场景与游戏元素3.1 初始化 Three.js 场景在src/renderer.js中封装场景初始化逻辑import * as THREE from three; export class GameRenderer { constructor(containerId) { this.container document.getElementById(containerId); this.scene new THREE.Scene(); this.camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.renderer new THREE.WebGLRenderer({ canvas: document.getElementById(gameCanvas) }); this.setupRenderer(); this.setupCamera(); this.setupLights(); this.setupEventListeners(); } setupRenderer() { this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0xf0f0f0); // 浅灰色背景 this.renderer.shadowMap.enabled true; // 启用阴影 } setupCamera() { this.camera.position.set(0, 5, 10); // 相机位于场景上方略靠后 this.camera.lookAt(0, 0, 0); // 看向场景中心 } setupLights() { const ambientLight new THREE.AmbientLight(0xffffff, 0.6); this.scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7); directionalLight.castShadow true; this.scene.add(directionalLight); } setupEventListeners() { window.addEventListener(resize, () this.onWindowResize()); } onWindowResize() { this.camera.aspect window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } render() { this.renderer.render(this.scene, this.camera); } }3.2 创建颜色槽和反馈钉的 3D 模型每个颜色槽用一个圆柱体表示反馈钉用小球体表示。在src/game.js中定义颜色常量并创建网格import * as THREE from three; export const COLORS { RED: 0xff0000, GREEN: 0x00ff00, BLUE: 0x0000ff, YELLOW: 0xffff00, PURPLE: 0xff00ff, CYAN: 0x00ffff }; export class GameElements { constructor(scene) { this.scene scene; this.slotGeometry new THREE.CylinderGeometry(0.4, 0.4, 0.2, 16); this.pegGeometry new THREE.SphereGeometry(0.15, 8, 8); } createSlot(color, x, y) { const material new THREE.MeshPhongMaterial({ color }); const slot new THREE.Mesh(this.slotGeometry, material); slot.position.set(x, y, 0); slot.userData { originalColor: color, currentColor: color }; // 保存原始颜色用于重置 this.scene.add(slot); return slot; } createPeg(color, x, y) { const material new THREE.MeshPhongMaterial({ color }); const peg new THREE.Mesh(this.pegGeometry, material); peg.position.set(x, y, 0.2); // 略微浮在槽上方 this.scene.add(peg); return peg; } createBoard(rows, cols, slotSpacing 1.2) { const board []; for (let row 0; row rows; row) { const rowSlots []; for (let col 0; col cols; col) { const x (col - (cols - 1) / 2) * slotSpacing; const y (rows - 1 - row) * slotSpacing; // 从上到下排列 const slot this.createSlot(0xaaaaaa, x, y); // 初始灰色 rowSlots.push(slot); } board.push(rowSlots); } return board; } }4. 实现 Mastermind 游戏逻辑与状态管理4.1 游戏状态机设计游戏状态包括等待输入、验证猜测、显示反馈、游戏结束。在src/game.js中定义主游戏类export class MastermindGame { constructor(rows 10, cols 4) { this.rows rows; this.cols cols; this.maxAttempts rows; this.currentAttempt 0; this.secretCode this.generateSecretCode(); this.board Array(rows).fill().map(() Array(cols).fill(null)); this.feedback Array(rows).fill().map(() Array(cols).fill(null)); this.gameState waiting; // waiting, checking, win, lose console.log(Secret code (for debug):, this.secretCode.map(c Object.keys(COLORS).find(k COLORS[k] c))); } generateSecretCode() { const colorValues Object.values(COLORS); return Array(this.cols).fill().map(() colorValues[Math.floor(Math.random() * colorValues.length)]); } submitGuess(guessColors) { if (this.gameState ! waiting || this.currentAttempt this.maxAttempts) return; this.board[this.currentAttempt] guessColors; const feedback this.checkGuess(guessColors); this.feedback[this.currentAttempt] feedback; if (feedback.blackPegs this.cols) { this.gameState win; } else if (this.currentAttempt this.maxAttempts - 1) { this.gameState lose; } else { this.currentAttempt; } return feedback; } checkGuess(guess) { let blackPegs 0; let whitePegs 0; const secret [...this.secretCode]; const guessCopy [...guess]; // 先检查位置和颜色都正确的黑钉 for (let i 0; i secret.length; i) { if (guessCopy[i] secret[i]) { blackPegs; secret[i] null; // 标记已匹配 guessCopy[i] undefined; } } // 再检查颜色正确但位置错误的白钉 for (let i 0; i guessCopy.length; i) { if (guessCopy[i] undefined) continue; const foundIndex secret.indexOf(guessCopy[i]); if (foundIndex ! -1) { whitePegs; secret[foundIndex] null; } } return { blackPegs, whitePegs }; } }4.2 集成 3D 渲染与游戏逻辑在src/main.js中连接渲染器、游戏元素和游戏逻辑import { GameRenderer } from ./renderer.js; import { GameElements, COLORS } from ./game.js; import { MastermindGame } from ./game.js; class GameApp { constructor() { this.renderer new GameRenderer(gameCanvas); this.elements new GameElements(this.renderer.scene); this.game new MastermindGame(10, 4); this.setupBoard(); this.setupInteraction(); this.animate(); } setupBoard() { this.slots this.elements.createBoard(this.game.rows, this.game.cols); this.feedbackPegs Array(this.game.rows).fill().map(() []); } setupInteraction() { this.selectedColor COLORS.RED; // 默认选中红色 this.setupColorPicker(); this.setupSlotClick(); } setupColorPicker() { // 在场景底部创建颜色选择器 const colorValues Object.values(COLORS); colorValues.forEach((color, index) { const x (index - (colorValues.length - 1) / 2) * 1.2; const y -this.game.rows * 1.2; // 放在棋盘下方 const pickerSlot this.elements.createSlot(color, x, y); pickerSlot.userData.isPicker true; }); } setupSlotClick() { const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); this.renderer.renderer.domElement.addEventListener(click, (event) { // 将鼠标位置归一化为 Three.js 坐标 const rect this.renderer.renderer.domElement.getBoundingClientRect(); mouse.x ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y -((event.clientY - rect.top) / rect.height) * 2 1; raycaster.setFromCamera(mouse, this.renderer.camera); const intersects raycaster.intersectObjects(this.renderer.scene.children); if (intersects.length 0) { const object intersects[0].object; this.handleObjectClick(object); } }); } handleObjectClick(object) { if (object.userData.isPicker) { this.selectedColor object.userData.originalColor; return; } // 找到被点击的槽所在的行和列 for (let row 0; row this.slots.length; row) { for (let col 0; col this.slots[row].length; col) { if (this.slots[row][col] object) { this.onSlotClick(row, col); return; } } } } onSlotClick(row, col) { // 只能修改当前尝试行的槽 if (row ! this.game.currentAttempt || this.game.gameState ! waiting) return; const slot this.slots[row][col]; slot.material.color.setHex(this.selectedColor); slot.userData.currentColor this.selectedColor; // 检查是否整行都已填色是则自动提交 const currentRow this.slots[row]; if (currentRow.every(slot slot.userData.currentColor ! 0xaaaaaa)) { this.submitCurrentGuess(); } } submitCurrentGuess() { const currentRow this.slots[this.game.currentAttempt]; const guess currentRow.map(slot slot.userData.currentColor); const feedback this.game.submitGuess(guess); this.showFeedback(feedback); this.checkGameEnd(); } showFeedback(feedback) { const row this.game.currentAttempt; const baseX (this.game.cols - 1) / 2 * 1.2 1; // 主棋盘右侧 let pegIndex 0; // 先放置黑钉正确位置 for (let i 0; i feedback.blackPegs; i) { const x baseX (pegIndex % 2) * 0.6; const y (this.game.rows - 1 - row) * 1.2 - Math.floor(pegIndex / 2) * 0.6; this.elements.createPeg(0x000000, x, y); pegIndex; } // 再放置白钉正确颜色错误位置 for (let i 0; i feedback.whitePegs; i) { const x baseX (pegIndex % 2) * 0.6; const y (this.game.rows - 1 - row) * 1.2 - Math.floor(pegIndex / 2) * 0.6; this.elements.createPeg(0xffffff, x, y); pegIndex; } } checkGameEnd() { if (this.game.gameState win) { setTimeout(() alert(恭喜你猜对了密码), 300); } else if (this.game.gameState lose) { setTimeout(() alert(游戏结束正确答案是${this.game.secretCode.map(c Object.keys(COLORS).find(k COLORS[k] c)).join(, )}), 300); } } animate() { requestAnimationFrame(() this.animate()); this.renderer.render(); } } new GameApp();5. 使用 AI Coding 辅助开发与调试5.1 AI 提示词工程实践在开发过程中AI 工具可以帮助生成重复性代码、提供算法实现建议或调试错误。针对 Three.js 和游戏逻辑有效的提示词应包含明确的技术栈用 Three.js 实现一个可点击的 3D 圆柱体要求...具体的输入输出写一个函数输入颜色数组输出 Mastermind 规则的黑白钉数量错误信息上下文在 Three.js 中遇到 TypeError: Cannot read properties of undefined 错误可能的原因是什么示例让 AI 生成颜色选择器交互逻辑提示词 我在用 Three.js 开发 Mastermind 游戏需要实现颜色选择功能。现有颜色常量 COLORS 包含六种颜色值场景中已有6个圆柱体作为颜色选择器。请写一个函数当用户点击选择器时将选中的颜色保存到 this.selectedColor 变量中并在控制台输出选中的颜色名称。AI 可能返回的代码片段setupColorPickerInteraction() { const colorNames Object.keys(COLORS); const colorValues Object.values(COLORS); this.renderer.renderer.domElement.addEventListener(click, (event) { // 射线检测代码... const intersects raycaster.intersectObjects(this.pickerSlots); if (intersects.length 0) { const clickedColor intersects[0].object.userData.originalColor; this.selectedColor clickedColor; const colorName colorNames[colorValues.indexOf(clickedColor)]; console.log(选中颜色: ${colorName}); } }); }5.2 AI 生成代码的集成与验证将 AI 生成的代码集成到项目时需要注意变量名一致性AI 可能使用不同的命名约定需要调整为项目现有风格。依赖检查确保 AI 代码中引用的变量和函数在项目中确实存在。错误处理AI 代码可能缺乏边界情况处理需要手动补充。性能考量特别是 Three.js 相关代码要避免每帧创建新对象或重复计算。集成后务必验证功能颜色选择器点击后是否正确更新选中颜色。选色后点击游戏槽是否应用正确颜色。提交猜测后反馈钉是否正确显示。游戏结束条件是否正常触发。6. 常见问题排查与性能优化6.1 Three.js 常见问题排查问题现象可能原因检查方式解决方案场景全黑看不到物体相机位置不当或光源问题检查 camera.position 和 light.intensity调整相机位置增加光源强度物体点击无反应射线检测坐标计算错误打印 mouse.x、mouse.y 值确认坐标归一化计算正确物体渲染异常破碎几何体顶点数据问题检查 Geometry 参数简化几何体分段数或使用标准几何体页面滚动时场景抖动未防抖 resize 事件检查 resize 事件处理添加 requestAnimationFrame 节流6.2 游戏逻辑调试技巧秘密代码泄露开发阶段可在控制台输出this.game.secretCode便于测试。颜色值验证确保提交猜测时颜色值是数字而非字符串。反馈算法验证用已知输入输出测试checkGuess函数如// 测试用例秘密代码 [RED, RED, BLUE, GREEN] console.log(checkGuess([RED, BLUE, GREEN, YELLOW])); // 应返回 { blackPegs: 0, whitePegs: 3 }6.3 性能优化建议对象复用颜色槽和反馈钉的几何体、材质应复用避免重复创建。渲染优化只在场景变化时调用 renderer.render()而非每帧强制渲染。事件防抖resize 和鼠标移动事件应适当节流。内存管理游戏结束后清理不再需要的 3D 对象。// 优化后的渲染循环 animate() { if (this.needsRender) { this.renderer.render(); this.needsRender false; } requestAnimationFrame(() this.animate()); } // 在修改场景后标记需要渲染 onSceneChange() { this.needsRender true; }7. 扩展功能与生产环境考量7.1 游戏功能扩展方向难度选择增加颜色数量6色→8色或密码长度4位→5位。动画效果添加颜色填充动画、反馈钉出现动画。音效反馈点击、正确、错误时添加音效。历史记录保存玩家最佳成绩和平均尝试次数。AI 对手实现计算机破解模式展示算法求解过程。7.2 生产环境部署准备代码压缩使用 Webpack 或 Vite 打包优化减少资源体积。跨浏览器测试确保在 Chrome、Firefox、Safari 中正常渲染。移动端适配添加触摸事件支持调整 3D 相机参数适应小屏幕。错误监控集成 Sentry 或类似工具捕获运行时错误。加载优化添加加载进度提示特别是 Three.js 资源较多时。7.3 AI Coding 在团队项目中的最佳实践代码审查AI 生成的代码必须经过人工审查才能合并。提示词标准化团队内统一 AI 工具使用规范和提示词模板。版本控制明确标记 AI 生成的代码段便于后续维护。知识传承AI 辅助开发不能替代团队成员对基础技术的理解。这个 3D Mastermind 项目展示了如何将经典游戏逻辑与现代 Web 3D 技术结合同时利用 AI 工具提升开发效率。重点不在于完全依赖 AI 生成代码而是将其作为增强工具帮助快速原型验证和解决具体技术问题。实际项目中这种技术组合特别适合创意互动展示、教育游戏和概念验证演示等场景。