ball-block-breaker/src/main.js

/**
 * 小球消除方块游戏 - 入口文件
 * 初始化模式选择、创建 Game 实例、启动游戏循环
 */
import { Game } from './Game.js';
import { ModeSelector } from './ui/ModeSelector.js';

document.addEventListener('DOMContentLoaded', () => {
  // DOM elements
  const canvas = document.getElementById('can');
  const modeSelectorEl = document.getElementById('mode-selector');
  const gameOverOverlay = document.getElementById('game-over');
  const finalScoreEl = document.getElementById('final-score');
  const restartBtn = document.getElementById('restart-btn');
  const levelDisplay = document.getElementById('level');
  const ballCountDisplay = document.getElementById('ball-count');

  // Canvas sizing
  const header = document.getElementById('header');
  const footer = document.getElementById('footer');
  const contain = document.getElementById('contain');
  const dpr = window.devicePixelRatio || 1;
  const logicalWidth = Math.min(window.innerWidth, 500);
  const logicalHeight = window.innerHeight - header.offsetHeight - footer.offsetHeight;

  canvas.style.width = logicalWidth + 'px';
  canvas.style.height = logicalHeight + 'px';
  canvas.width = logicalWidth * dpr;
  canvas.height = logicalHeight * dpr;

  // Mode selector
  const modeSelector = new ModeSelector(modeSelectorEl);

  let game = null;
  let animFrameId = null;
  let lastTime = 0;

  function gameLoop(timestamp) {
    const deltaTime = lastTime ? Math.min(timestamp - lastTime, 50) : 16;
    lastTime = timestamp;

    game.update(deltaTime);
    game.render();

    // Update level display
    levelDisplay.textContent = game.round;
    ballCountDisplay.textContent = '×' + game.ballCount;

    animFrameId = requestAnimationFrame(gameLoop);
  }

  function startGame(mode) {
    modeSelector.hide();

    // Cancel any existing loop
    if (animFrameId) {
      cancelAnimationFrame(animFrameId);
      animFrameId = null;
    }

    game = new Game(canvas, mode);
    game.setGameOverUI(gameOverOverlay, finalScoreEl, restartBtn);
    game.start();

    lastTime = 0;
    animFrameId = requestAnimationFrame(gameLoop);
  }

  modeSelector.onSelect(startGame);
  modeSelector.show();
});