VibeGame

AI Mini Web App Lab

可运行

创作需求

Phase 1

Preview

打地鼠小游戏

打地鼠小游戏

点击随机出现的地鼠，在倒计时结束前获得尽可能高的分数。

你做出了一个打地鼠小游戏，用变量记录状态，用定时器推动游戏进行。

你学到了
  • 变量保存分数
  • setInterval 控制倒计时
  • Math.random 随机选择洞口
  • click 事件处理点击
下一步挑战
  • 点击空洞扣 1 分
  • 加入连击奖励
  • 缩短地鼠出现时间做困难模式

代码查看

<main id="app" class="game-shell">
  <style>
    body { margin: 0; font-family: Arial, sans-serif; background: #f8f1df; color: #2a2118; }
    .game-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
    .panel { width: min(620px, 100%); background: #fffaf0; border: 3px solid #2a2118; border-radius: 14px; padding: 22px; box-shadow: 8px 8px 0 #2a2118; }
    h1 { margin: 0 0 8px; font-size: 30px; }
    .stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; font-weight: bold; }
    .stats span { background: #d7f2df; border: 2px solid #2a2118; border-radius: 999px; padding: 8px 12px; }
    .holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
    .hole { aspect-ratio: 1; border: 3px solid #2a2118; border-radius: 50%; background: #6f4d34; cursor: pointer; font-size: 42px; display: grid; place-items: center; }
    .hole.active { background: #f6c85f; transform: translateY(-4px); }
    button { border: 2px solid #2a2118; border-radius: 10px; background: #ec6645; color: white; padding: 10px 14px; font-weight: bold; cursor: pointer; }
    .hint { color: #6b5b48; }
  </style>
  <section class="panel">
    <h1>打地鼠小游戏</h1>
    <p class="hint">点击冒出来的地鼠。30 秒结束后看看你能得多少分。</p>
    <div class="stats">
      <span id="score">分数：0</span>
      <span id="time">时间：30</span>
      <span id="state">准备开始</span>
    </div>
    <div id="holes" class="holes"></div>
    <button id="start">开始 / 重新开始</button>
  </section>
</main>