我如何在一个周末使用 AI 作为我的工程伙伴构建 3D 无限跑酷游戏

I’m happy to help translate the article, but I’ll need the full text you’d like translated. Could you please provide the content (excluding the source line you already shared) so I can translate it into Simplified Chinese while preserving the formatting?

想法：先制定产品愿景

• 三车道移动（左 / 中 / 右）
• 跳跃 + 滑行动作
• 渐进式难度曲线
• 全球排行榜，激发竞争
• 移动优先控制（拇指友好）

我没有深厚的游戏工程经验——于是我借助了 AI。

构建过程：把 AI 当作初级工程师来对待

明确需求胜过巧妙提示

基于冲刺的迭代（而非一次性大构建）

用户反馈 → 产品洞察 → 代码更改。这里 PM 的思考最为关键。

反馈

• “The wire obstacle looks like I can jump over it.”
  这不是 bug —— 是用户体验不匹配。修复的是视觉暗示，而不是逻辑。

Tech Stack (Simple by Design)

• Frontend: Vanilla JavaScript + Three.js (WebGL)
• Backend: Node.js HTTP server
• Database: PostgreSQL (leaderboard persistence)
• Hosting: Replit (dev + prod)

No React. No bundlers. No over‑engineering. Simplicity shipped faster.

对我作为产品经理的 AI 影响

AI 不是魔法——它是队友

AI 对以下内容作出响应：

• 明确的需求
• 定义的成功标准
• 结构化的反馈

听起来熟悉吗？这就是产品工作。

领域知识仍然重要

• 什么让难度感觉公平
• 为什么移动控制需要重新定位
• 障碍物应如何在视觉上传达风险

AI 执行。PM 决策。

速度才是真正的突破

原本需要数月学习的工作在一个周末完成。不是因为 AI 替代了工程师，而是因为我可以专注于 构建什么，而 AI 负责 如何构建。

结果（截至目前）

• Build time: ~20 hours
• Codebase: ~2,000 lines
• Leaderboard players: 50+ in week one
• Iterations: 5 major versions driven by feedback
• Outcome: a shipped product

亲自尝试

🎮 玩游戏: your link here

如果你是一位脑中充满想法的产品经理——这就是你的信号。产品愿景与可运行软件之间的差距从未如此之小。

附录：面向工程师的技术深度解析

3D 渲染架构（Three.js）

游戏使用固定的玩家角色，世界向相机移动，以营造无尽跑酷的幻觉。

// Object pooling for obstacles
function updateObstacles(delta) {
  if (obstacle.position.z > 10) {
    obstacle.position.z = -SPAWN_DISTANCE;
    obstacle.position.x = lanes[Math.floor(Math.random() * 3)];
  }
}

这保持了物理计算的简洁，并避免不必要的变换。

碰撞检测（性能优先）

使用包围盒而非网格碰撞：

function getPlayerBoundingBox() {
  if (isSliding) {
    return slidingBox; // dynamically shrinks the hitbox
  }
  return standingBox;
}

简单且高效。

速度递进曲线（错误 → 领悟 → 修复）

// New (consistent) linear scaling with a cap
const speed = Math.min(BASE_SPEED + level * SPEED_INCREMENT, MAX_SPEED);

可预测的挑战。

移动端触控控制（以用户体验为导向）

button {
  position: fixed;
  /* thumb‑reachable, no accidental scrolls, no delay */
}

button.addEventListener('touchstart', e => {
  // handle jump or slide
});

排行榜持久化（Postgres）

IF NOT EXISTS (SELECT 1 FROM leaderboard WHERE user_id = $1)
   INSERT INTO leaderboard (user_id, score) VALUES ($1, $2);
ELSE IF $2 > (SELECT score FROM leaderboard WHERE user_id = $1)
   UPDATE leaderboard SET score = $2 WHERE user_id = $1;

仅更新个人最佳——避免排行榜刷分。

每周重置（竞技赛季）

TRUNCATE leaderboard;

性能优化

• 几何实例化用于重复资产
• 视锥体剔除（Three.js 默认）
• 纹理图集
• requestAnimationFrame 驱动的循环

function animate() {
  if (!isPaused) {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
}

文件结构

无需构建步骤。无需打包工具。直接可运行的代码。

最终思考

AI 并没有取代工程。它缩短了想法与执行之间的距离——尤其是那些已经懂得系统思考、权衡取舍和结果的人。如果你是产品经理、设计师或构建者，一直在等待“有一天去构建”——那一天就是现在。