第一个AI生成的游戏

说一句话，AI帮你变出一个能玩的游戏

📖知识引入

🗣️需求要一次说清

像点餐一样完整：「做一个接金币的小游戏，方向键控制篮子左右移动，金币从天上掉，接到加1分，60秒倒计时，风格可爱」。要素越全，一次越准。

🤖AI变身游戏工厂

AI听完需求，几十秒写出一份网页游戏代码：画面、控制、计分、倒计时全都有。你还没来得及喝口水，游戏已经「出厂」了。

💾保存运行三步走

AI给的代码存成 game.html 文件，双击用浏览器打开，立刻开玩！不用装软件、不用联网，你的电脑就是游戏机。

🔁不满意就迭代

「金币掉太慢」「加个背景音乐」「接到金币闪一下光」——像捏橡皮泥一样，一句一句让AI改，游戏一步步变成你想要的样子。

🌟你刚才经历了什么

想法 -> 告诉AI -> 玩到成品 -> 提意见 -> 更好。这个循环，就是2026年做游戏的核心工作方式，专业团队也在用！

💡

对AI提需求像点套餐：做什么+怎么玩+长什么样，一次说全！

🔍我的第一个AI游戏

<!DOCTYPE html>
<html>
<head><title>接金币</title></head>
<body>
<canvas id="game" width="400" height="500"></canvas>
<script>
  let x = 180;        // 篮子的横坐标
  let coinX = 200;    // 金币的横坐标
  let coinY = 0;      // 金币的纵坐标
  let score = 0;      // 分数

  // 每次按键，移动篮子
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') x -= 30;
    if (e.key === 'ArrowRight') x += 30;
  });

  // 游戏循环：金币不断下落
  setInterval(() => {
    coinY += 5;
    if (coinY > 470) { coinY = 0; coinX = Math.random() * 380; }
    draw();
  }, 30);

  function draw() {
    let c = document.getElementById('game');
    let g = c.getContext('2d');
    g.clearRect(0, 0, 400, 500);
    g.fillText('分数: ' + score, 10, 20); // 记分板
    g.beginPath(); g.arc(coinX, coinY, 10, 0, 7); g.fill(); // 金币
    g.fillRect(x, 470, 40, 20);                          // 篮子
  }
</script>
</body>
</html>

五步变出你的第一个游戏：

第1步：打开AI对话（Claude/ChatGPT/豆包等）💬

第2步：输入需求（照抄也行）：
「请帮我写一个接金币小游戏：
方向键控制篮子左右移动，
金币从天上掉下来，接到+1分，
掉到地上扣1条命，共3条命，
用网页实现，风格可爱。」

第3步：复制AI给的代码 📋

第4步：存为 game.html，双击打开 💾

第5步：开玩！然后开始迭代 🎮 ·「金币掉落速度快一点」 ·「接到金币时闪一下金光」 ·「加一句开始游戏的提示」

⚠️ 新手常见翻车：把代码存成 game.txt 或 game.docx 浏览器就不认识了——必须是 .html！

看，你已经是「游戏开发者」了，就发生在今天！

🎯小测验

第1题：AI生成的网页游戏代码应该保存成什么文件？

第2题：游戏做完发现金币掉得太快，正确的做法是？

第3题：想让AI一次就写出接近你想要的游戏，关键是？

📝本课知识点

✓需求=做什么+怎么玩+长什么样
✓AI几十秒写出完整网页游戏
✓保存为.html，双击就能玩
✓迭代修改比推倒重来聪明
✓想法-AI-试玩-改进是核心循环

第4课完成！继续探索下一课吧 🚀

🎮

上一课

第3课

下一课

第5课

🎮