钢琴块：手速与音感极限挑战，一玩就停不下来

一段需求，码道自动写出 608 行、约 17 KB 的单文件钢琴块——4 列轨道上黑块依次下落，底部一条蓝色判定线，点到即亮、漏掉即挂；点击变亮发光、+1 浮动得分、粒子爆裂、连击放大，把节奏感直接拉满。双击 index.html 就能开玩，鼠标触屏键盘都能操作。

分类: ai-development
标签: CodeArts, AI编程, 钢琴块, 节奏游戏, Canvas, 网页游戏
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开篇钩子

钢琴块可能是手机上最上头的节奏游戏：黑块从屏幕顶部依次下落，你要赶在它滑出判定线之前点中它，点得越快连击越高，速度也随之飙升，稍一走神就「漏块」结束。在码道 TUI 里贴了一段需求：「做一个钢琴块网页小游戏，黑块下落、点中计分、漏掉结束、难度递增……」排队等了一会儿，约 3 分半后码道自动生成了一个 608 行、约 17 KB 的完整游戏：深色渐变背景上 4 列轨道铺开，黑块带着节奏下落，点中瞬间方块变亮发光、+1 分数飘起、粒子爆裂四溅，连击数字居中放大；误点空列、点得太早、漏掉方块都会立刻结束，本局得分与最高纪录一起展示，点「重新开始」满血再战。双击 index.html 就能在浏览器里玩，全程不用装任何依赖。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：一句「钢琴块网页小游戏」被理解成完整方案——4 列轨道、黑块下落、判定线点击、计分连击、漏判误判、难度递增、最高分持久化
• 手感细节到位：点太早带容错判定、点空列立即判负、漏块判负、点击变亮发光、粒子爆裂、列闪光、连击居中放大，反馈干净利落
• 难度曲线合理：下落速度与生成间隔随分数动态调整（speed = 3.2 + min(8, score*0.025)），越玩越快、停不下来
• 自检与收尾：生成后主动汇报实现清单与核心机制（判定线、连击、难度递增、持久化、多端操作），再交付文件

---

4. 任务描述

我想要一个「钢琴块（Piano Tiles）」网页小游戏，具体要求：

• 用单个 HTML 文件实现（CSS 和 JavaScript 内嵌），浏览器直接打开即可玩
• 黑色方块从屏幕顶部依次下落，玩家需在方块到达底部判定线前点击方块
• 点击成功方块变亮并计分；点错或漏掉方块则游戏结束
• 界面美观：深色渐变背景、方块圆角与阴影、连击特效，显示分数和最高分（localStorage 保存）
• 难度随游戏进行逐渐加快，下落速度递增；提供开始和重新开始按钮

---

5. 开发过程及真实截图

我在码道 TUI 中贴入需求，码道先进入模型排队，随后开始拆解需求：

码道先规划 4 列轨道、下落判定与计分连击逻辑，再逐段生成代码：

约 3 分半后，码道汇报完成：已生成单文件钢琴块（608 行），并列出核心实现——4 列轨道黑块下落、点击变亮发光、+1 浮动得分、粒子爆裂、连击放大、漏掉或误点立即结束、难度递增、最高分持久化：

双击生成的 index.html 在浏览器中运行，深色渐变背景上显示「钢琴块 Piano Tiles」标题与「开始游戏」按钮，下方是玩法说明：

---

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

方块生成：随机列生成下落方块，并刻意降低与上一块同列的概率，避免连续同列「送分」：

function spawnTile() {
  // 避免与上一个同列概率过高
  let col;
  const last = tiles.length ? tiles[tiles.length - 1].col : -1;
  do { col = Math.floor(Math.random() * COLS); } while (col === last && Math.random() < 0.5);
  tiles.push({ col, y: -TILE_H, hit: false, hitTime: 0, bright: 0 });
}

点击判定：取该列最底部未点击的方块，点空列或点得太早（未到判定线容错范围）都判负；命中则计分、连击、粒子与浮动得分一起触发：

function handleHit(col) {
  if (!running) return;
  let target = null;
  for (const t of tiles) {
    if (t.col === col && !t.hit) {
      if (!target || t.y > target.y) target = t;
    }
  }
  if (!target) { endGame('miss'); return; }
  const bottomY = target.y + TILE_H;
  if (bottomY < judgeY() - EARLY_TOLERANCE) { endGame('early'); return; }
  target.hit = true;
  target.hitTime = performance.now();
  score++; combo++;
  scoreEl.textContent = score;
  spawnParticles(col);
  showFloatScore(col);
  colFlash.push({ col, time: performance.now() });
  showCombo();
}

主循环与漏判：方块按当前速度下落，每列最底部未点击方块越过判定线即漏块判负；难度曲线随分数同步提升：

function update(dt) {
  const move = speed * (dt / 16.6667); // 标准化到60fps
  for (const t of tiles) {
    t.y += move;
    if (t.hit && t.bright < 1) t.bright = Math.min(1, t.bright + dt / 180);
  }
  if (tiles.length && tiles[0].y > H + 60) tiles.shift();
  for (let c = 0; c < COLS; c++) {
    let bottom = null;
    for (const t of tiles) {
      if (t.col === c && !t.hit) {
        if (!bottom || t.y > bottom.y) bottom = t;
      }
    }
    if (bottom && bottom.y > judgeY()) { endGame('miss'); return; }
  }
  lastSpawn += dt;
  if (lastSpawn >= spawnInterval) { lastSpawn = 0; spawnTile(); }
  // 难度递增
  speed = 3.2 + Math.min(8, score * 0.025);
  spawnInterval = Math.max(260, 620 - score * 1.6);
}

结算与持久化：游戏结束刷新最高分并写入 localStorage，结束面板展示本局得分与历史最佳：

function endGame(reason) {
  if (!running) return;
  running = false;
  cancelAnimationFrame(rafId);
  if (score > best) {
    best = score;
    try { localStorage.setItem('pianoTilesBest', String(best)); } catch (e) {}
    bestEl.textContent = best;
  }
  let html = '';
  html += '<div class="result">本局得分 <span class="num">' + score + '</span></div>';
  html += '<div class="result best">最高纪录 <span class="num">' + best + '</span></div>';
  overlayResult.innerHTML = html;
  startBtn.textContent = '重 新 开 始';
  overlay.classList.remove('hidden');
}

---

7. 真实运行效果

打开 index.html，深色渐变背景上显示「钢琴块 Piano Tiles」标题，点「开始游戏」进入对局：4 列轨道铺满屏幕，黑块从顶部依次下落，底部一条蓝色判定线。点中黑块瞬间方块变亮发光、+1 分数飘起、粒子爆裂四溅，连击数字在屏幕中央放大跳动；点空列、点得太早或漏掉方块，立刻弹出结束面板，本局得分与最高纪录并排展示，点「重新开始」满血重开。随着分数上涨，下落速度明显加快、方块生成间隔缩短，手速跟不上的时候就是结束的时候，一局接一局根本停不下来。游戏同时支持鼠标/触屏点击和键盘 1-4 或 D F J K 操作，最高分存在浏览器本地，刷新不丢。

---

8. 能力总结

• 单文件交付：608 行 HTML/CSS/JS 全部在一个 index.html 里，双击即玩，零依赖
• 节奏手感在线：判定线容错、误点/漏判立即结束、连击放大与粒子爆裂，反馈密集不拖沓
• 难度曲线自然：速度与生成间隔随分数动态调整，前期热身、后期上头
• 多端适配：鼠标、触屏、键盘三种操作方式全覆盖，localStorage 持久化最高分

9. 总结

从一句自然语言到可玩的节奏游戏，码道只用了约 3 分半。钢琴块这类「规则简单、手感为王」的小游戏，正好检验 AI 编程助手对判定逻辑、动画反馈与难度曲线这类细节的把控。想亲手试试，把上面的需求复制进码道 TUI，你也能收获一个属于自己的节奏游戏。