接接乐 Code Explanation

游戏循环一句话理解

每一帧，游戏都会测量时间、移动食物、检查碰撞、更新界面，然后请求浏览器继续下一帧。

Game loop in one sentence

The game repeats a small set of steps every frame: measure time, move foods, check collisions, update the UI, then ask the browser for the next frame.

食物到达玩家时会发生什么？

每个食物对象都有 x 和 y 坐标。下落物进入接取区域后，如果玩家在水平距离 上足够接近，就会被判定为接住。

What happens when food reaches the player?

Each food item has an x and y position. If a falling item enters the catch zone and the player is close enough horizontally, the item is considered caught.

为什么这里使用 Web Audio？

游戏没有携带音频文件，而是在浏览器里直接生成振荡器。这样可以让项目更轻量，也能展示“代码生成音乐” 的工作方式。

Why use Web Audio here?

The game does not ship with an audio file. Instead, it creates oscillators in the browser. That keeps the project lightweight and shows how music can be synthesized with code.

音乐控制器做了什么

• 只在需要时创建 AudioContext。
• 通过低通滤波器让音色更柔和。
• 安排循环旋律和低音线。
• 在关卡结束或关闭音乐时安全停止。

What the music controller does

• Creates an AudioContext only when needed.
• Uses a low-pass filter so the tones sound softer.
• Schedules a repeating melody and bass line.
• Stops cleanly when the round ends or the player turns music off.

控制方式

音乐有两个独立控制：一个开关控制“播不播放”，一个滑条控制“多大声”。这是一种很好的程序设计方式， 因为“是否播放”和“音量多大”是两种不同的数据。

• musicEnabled 保存开关状态。
• musicVolume 保存 0 到 1 的音量值。
• 滑条直接更新 master gain 节点。

How the controls work

The music has two independent controls: one switch turns sound on or off, and one slider changes loudness. That is a useful pattern in programming because it separates the idea of whether audio plays from how loud it plays.

• musicEnabled stores the on/off state.
• musicVolume stores the number from 0 to 1.
• The slider updates the master gain node directly.

标注版 startGame()

// 在新一局开始前重置所有状态。
function startGame(difficulty){
  currentDifficulty = difficulty;
  hearts = MAX_HEARTS;
  goodCount = 0;
  badCount = 0;
  foods.forEach(f => f.el && f.el.remove());
  foods = [];

  // 切换到游戏页面并把角色放到中间。
  showPage('game');
  updateStageRect();
  charX = stageRect.width / 2;
  applyCharTransform();

  // 音乐只在玩家点击之后开始。
  music.start();
  gameActive = true;
  rafId = requestAnimationFrame(gameLoop);
}

Annotated startGame()

// Reset the round before it begins.
function startGame(difficulty){
  currentDifficulty = difficulty;
  hearts = MAX_HEARTS;
  goodCount = 0;
  badCount = 0;
  foods.forEach(f => f.el && f.el.remove());
  foods = [];

  // Show the game page and move the character to the center.
  showPage('game');
  updateStageRect();
  charX = stageRect.width / 2;
  applyCharTransform();

  // Music starts only after the player's click.
  music.start();
  gameActive = true;
  rafId = requestAnimationFrame(gameLoop);
}

标注版 spawnFood()

// 决定这次掉落的是好东西还是坏东西。
function spawnFood(){
  const cfg = DIFF_CONFIG[currentDifficulty];
  const isBad = Math.random() < cfg.badProb;
  const emoji = isBad ? BAD_FOODS[...] : GOOD_FOODS[...];
  const speed = cfg.minSpeed + Math.random() * (cfg.maxSpeed - cfg.minSpeed);
  const x = 24 + Math.random() * (stageRect.width - 48);

  // 创建真实的 DOM 节点，让浏览器负责动画。
  const el = document.createElement('div');
  el.className = 'food';
  el.textContent = emoji;
  stageEl.appendChild(el);

  foods.push({ x, y:-40, speed, type:isBad ? 'bad' : 'good', el });
}

Annotated spawnFood()

// Decide whether the falling object is good or bad.
function spawnFood(){
  const cfg = DIFF_CONFIG[currentDifficulty];
  const isBad = Math.random() < cfg.badProb;
  const emoji = isBad ? BAD_FOODS[...] : GOOD_FOODS[...];
  const speed = cfg.minSpeed + Math.random() * (cfg.maxSpeed - cfg.minSpeed);
  const x = 24 + Math.random() * (stageRect.width - 48);

  // Create a real DOM node so the browser can animate it.
  const el = document.createElement('div');
  el.className = 'food';
  el.textContent = emoji;
  stageEl.appendChild(el);

  foods.push({ x, y:-40, speed, type:isBad ? 'bad' : 'good', el });
}

练习建议

找到 startGame()、spawnFood()、updateFoods() 和 createMusicController()，分别解释它们负责什么：初始化、生成、移动还是声音。

如果想做更深入的实验，可以修改音乐控制器里的节奏数值，看看背景音乐的感觉会怎样变化。

Try this in the code

Search for the functions startGame(), spawnFood(), updateFoods(), and createMusicController(). Then explain to yourself what each one owns: setup, spawning, movement, or sound.

If you want a stronger exercise, change the tempo number in the music controller and observe how the background loop feels.