/** * 小球消除方块游戏 - 入口文件 * 初始化模式选择、创建 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(); });