!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno title弹球打砖块/title style /* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 全局样式 */ :root { --primary: #667eea; --secondary: #764ba2; --accent: #f093fb; --success: #4ade80; --danger: #f87171; --dark: #1e1e2e; --light: #f8fafc; --glass: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.2); } body { font-family: Segoe UI, system-ui, -apple-system, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); background-attachment: fixed; overflow: hidden; padding: 20px; } /* 主容器 */ .game-container { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; } /* 标题 */ .game-title { font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; color: white; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); letter-spacing: 2px; animation: titleFloat 3s ease-in-out infinite; } keyframes titleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* 信息栏 */ .info-bar { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; } .info-item { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 12px 24px; color: white; font-size: 1rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .info-item:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); } .info-item .icon { font-size: 1.3rem; } .info-item .value { font-weight: 700; font-size: 1.2rem; min-width: 40px; text-align: center; } .info-item.score .value { color: #ffd700; } .info-item.time .value { color: #4ade80; } .info-item.lives .value { color: #f87171; } /* 游戏画布容器 */ .canvas-wrapper { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 16px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .canvas-wrapper:hover { box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4); } #gameCanvas { display: block; border-radius: 12px; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); touch-action: none; } /* 控制按钮 */ .controls { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .btn { padding: 14px 36px; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; } .btn::before { content: ; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn-start { background: linear-gradient(135deg, #4ade80, #22c55e); color: white; box-shadow: 0 8px 30px rgba(74, 222, 128, 0.4); } .btn-start:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(74, 222, 128, 0.5); } .btn-start:active { transform: translateY(0) scale(0.98); } .btn-reset { background: linear-gradient(135deg, #f87171, #ef4444); color: white; box-shadow: 0 8px 30px rgba(248, 113, 113, 0.4); } .btn-reset:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(248, 113, 113, 0.5); } .btn-reset:active { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } /* 弹窗遮罩 */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } /* 弹窗内容 */ .modal { background: linear-gradient(145deg, #2a2a4a, #1e1e3a); border-radius: 24px; padding: 40px; text-align: center; color: white; max-width: 90%; width: 380px; transform: scale(0.8) translateY(20px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .modal-overlay.active .modal { transform: scale(1) translateY(0); } .modal-icon { font-size: 4rem; margin-bottom: 20px; animation: iconBounce 0.6s ease; } keyframes iconBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .modal-title { font-size: 2rem; font-weight: 700; margin-bottom: 10px; background: linear-gradient(135deg, #ffd700, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-message { font-size: 1.1rem; color: #a0a0c0; margin-bottom: 24px; line-height: 1.6; } .modal-score { font-size: 3rem; font-weight: 700; color: #ffd700; margin-bottom: 30px; text-shadow: 0 0 30px rgba(255, 215, 0, 0.5); } .modal .btn { min-width: 160px; } /* 粒子效果 */ .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: -1; } .particle { position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; animation: particleFloat 15s infinite; } keyframes particleFloat { 0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } } /* 响应式设计 */ media (max-width: 600px) { body { padding: 10px; } .game-container { gap: 15px; } .info-bar { gap: 15px; } .info-item { padding: 10px 16px; font-size: 0.9rem; } .info-item .value { font-size: 1rem; } .canvas-wrapper { padding: 10px; } .btn { padding: 12px 28px; font-size: 1rem; } .modal { padding: 30px 20px; } .modal-title { font-size: 1.6rem; } .modal-score { font-size: 2.5rem; } } /* 点击涟漪效果 */ .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: rippleEffect 0.6s linear; pointer-events: none; } keyframes rippleEffect { to { transform: scale(4); opacity: 0; } } /* 开始提示 */ .start-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.8); font-size: 1.2rem; text-align: center; pointer-events: none; animation: hintPulse 2s ease-in-out infinite; } keyframes hintPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /style /head body !-- 背景粒子 -- div classparticles idparticles/div !-- 主游戏容器 -- div classgame-container h1 classgame-title弹球打砖块/h1 !-- 信息栏 -- div classinfo-bar div classinfo-item score span classicon/span span得分/span span classvalue idscoreDisplay0/span /div div classinfo-item time span classicon⏱️/span span倒计时/span span classvalue idtimeDisplay60/span /div div classinfo-item lives span classicon❤️/span span生命/span span classvalue idlivesDisplay3/span /div /div !-- 游戏画布 -- div classcanvas-wrapper canvas idgameCanvas/canvas /div !-- 控制按钮 -- div classcontrols button classbtn btn-start idstartBtn开始游戏/button button classbtn btn-reset idresetBtn重新开始/button /div /div !-- 游戏结束弹窗 -- div classmodal-overlay idmodalOverlay div classmodal div classmodal-icon idmodalIcon/div h2 classmodal-title idmodalTitle游戏结束/h2 p classmodal-message idmodalMessage恭喜你完成了挑战/p div classmodal-score idmodalScore0/div button classbtn btn-start idmodalBtn再来一局/button /div /div script // 游戏配置 const CONFIG { // 画布尺寸 CANVAS_WIDTH: 480, CANVAS_HEIGHT: 600, // 挡板 PADDLE_WIDTH: 100, PADDLE_HEIGHT: 14, PADDLE_SPEED: 12, // 球 BALL_RADIUS: 10, BALL_SPEED: 5, BALL_SPEED_INCREMENT: 0.3, MAX_BALL_SPEED: 10, // 砖块 BRICK_ROWS: 6, BRICK_COLS: 8, BRICK_WIDTH: 52, BRICK_HEIGHT: 22, BRICK_PADDING: 6, BRICK_TOP_OFFSET: 60, // 游戏设置 GAME_TIME: 60, INITIAL_LIVES: 3, // 砖块颜色渐变 BRICK_COLORS: [ #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #00d2d3, #1dd1a1 ], POINTS_PER_BRICK: 10 }; // 游戏状态 const gameState { isRunning: false, score: 0, lives: CONFIG.INITIAL_LIVES, timeLeft: CONFIG.GAME_TIME, timerId: null, animationId: null, ballSpeed: CONFIG.BALL_SPEED, // 挡板 paddle: { x: 0, y: 0, dx: 0 }, // 球 ball: { x: 0, y: 0, dx: 0, dy: 0 }, // 砖块数组 bricks: [], // 特效 effects: [] }; // DOM 元素 const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); const scoreDisplay document.getElementById(scoreDisplay); const timeDisplay document.getElementById(timeDisplay); const livesDisplay document.getElementById(livesDisplay); const startBtn document.getElementById(startBtn); const resetBtn document.getElementById(resetBtn); const modalOverlay document.getElementById(modalOverlay); const modalIcon document.getElementById(modalIcon); const modalTitle document.getElementById(modalTitle); const modalMessage document.getElementById(modalMessage); const modalScore document.getElementById(modalScore); const modalBtn document.getElementById(modalBtn); // 初始化 function init() { // 响应式画布尺寸 resizeCanvas(); window.addEventListener(resize, resizeCanvas); // 初始化背景粒子 createParticles(); // 初始化游戏 resetGame(); // 绑定事件 bindEvents(); // 初始渲染 render(); } // 响应式调整画布 function resizeCanvas() { const maxWidth Math.min(window.innerWidth - 52, CONFIG.CANVAS_WIDTH); const scale maxWidth / CONFIG.CANVAS_WIDTH; canvas.width CONFIG.CANVAS_WIDTH; canvas.height CONFIG.CANVAS_HEIGHT; canvas.style.width ${CONFIG.CANVAS_WIDTH * scale}px; canvas.style.height ${CONFIG.CANVAS_HEIGHT * scale}px; // 重新初始化位置 if (!gameState.isRunning) { initPositions(); } } // 初始化位置 function initPositions() { // 挡板位置 gameState.paddle { x: (canvas.width - CONFIG.PADDLE_WIDTH) / 2, y: canvas.height - 40, dx: 0, width: CONFIG.PADDLE_WIDTH, height: CONFIG.PADDLE_HEIGHT }; // 球位置 resetBall(); // 初始化砖块 initBricks(); } // 初始化砖块 function initBricks() { gameState.bricks []; const totalBrickWidth CONFIG.BRICK_COLS * (CONFIG.BRICK_WIDTH CONFIG.BRICK_PADDING) - CONFIG.BRICK_PADDING; const offsetX (canvas.width - totalBrickWidth) / 2; for (let row 0; row CONFIG.BRICK_ROWS; row) { for (let col 0; col CONFIG.BRICK_COLS; col) { const x offsetX col * (CONFIG.BRICK_WIDTH CONFIG.BRICK_PADDING); const y CONFIG.BRICK_TOP_OFFSET row * (CONFIG.BRICK_HEIGHT CONFIG.BRICK_PADDING); const color CONFIG.BRICK_COLORS[row % CONFIG.BRICK_COLORS.length]; const hitCount row 2 ? 2 : 1; // 前两行需要击打两次 gameState.bricks.push({ x, y, width: CONFIG.BRICK_WIDTH, height: CONFIG.BRICK_HEIGHT, color, hitCount, maxHits: hitCount, active: true }); } } } // 重置球位置 function resetBall() { gameState.ball { x: canvas.width / 2, y: canvas.height - 60, radius: CONFIG.BALL_RADIUS, dx: gameState.ballSpeed * (Math.random() 0.5 ? 1 : -1), dy: -gameState.ballSpeed }; } // 事件绑定 function bindEvents() { // 键盘控制 document.addEventListener(keydown, handleKeyDown); document.addEventListener(keyup, handleKeyUp); // 鼠标/触摸控制 canvas.addEventListener(mousemove, handleMouseMove); canvas.addEventListener(touchmove, handleTouchMove, { passive: false }); // 按钮点击涟漪效果 addRippleEffect(startBtn); addRippleEffect(resetBtn); addRippleEffect(modalBtn); // 按钮事件 startBtn.addEventListener(click, startGame); resetBtn.addEventListener(click, resetGame); modalBtn.addEventListener(click, () { hideModal(); resetGame(); startGame(); }); } // 键盘事件处理 function handleKeyDown(e) { if (!gameState.isRunning) return; switch(e.key) { case ArrowLeft: case a: case A: gameState.paddle.dx -CONFIG.PADDLE_SPEED; break; case ArrowRight: case d: case D: gameState.paddle.dx CONFIG.PADDLE_SPEED; break; } } function handleKeyUp(e) { if (e.key ArrowLeft || e.key a || e.key A || e.key ArrowRight || e.key d || e.key D) { gameState.paddle.dx 0; } } // 鼠标移动处理 function handleMouseMove(e) { if (!gameState.isRunning) return; const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width; const mouseX (e.clientX - rect.left) * scaleX; gameState.paddle.x clamp( mouseX - CONFIG.PADDLE_WIDTH / 2, 0, canvas.width - CONFIG.PADDLE_WIDTH ); } // 触摸移动处理 function handleTouchMove(e) { e.preventDefault(); if (!gameState.isRunning) return; const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width; const touchX (e.touches[0].clientX - rect.left) * scaleX; gameState.paddle.x clamp( touchX - CONFIG.PADDLE_WIDTH / 2, 0, canvas.width - CONFIG.PADDLE_WIDTH ); } // 按钮涟漪效果 function addRippleEffect(btn) { btn.addEventListener(click, function(e) { const ripple document.createElement(span); ripple.className ripple; const rect btn.getBoundingClientRect(); ripple.style.left ${e.clientX - rect.left}px; ripple.style.top ${e.clientY - rect.top}px; ripple.style.width ripple.style.height ${Math.max(rect.width, rect.height)}px; btn.appendChild(ripple); setTimeout(() ripple.remove(), 600); }); } // 游戏逻辑 function startGame() { if (gameState.isRunning) return; gameState.isRunning true; startBtn.disabled true; initPositions(); // 启动倒计时 gameState.timerId setInterval(updateTimer, 1000); // 启动游戏循环 gameLoop(); } function resetGame() { // 停止游戏 gameState.isRunning false; if (gameState.timerId) clearInterval(gameState.timerId); if (gameState.animationId) cancelAnimationFrame(gameState.animationId); // 重置状态 gameState.score 0; gameState.lives CONFIG.INITIAL_LIVES; gameState.timeLeft CONFIG.GAME_TIME; gameState.ballSpeed CONFIG.BALL_SPEED; gameState.effects []; // 更新显示 updateDisplay(); // 初始化位置 initPositions(); // 启用开始按钮 startBtn.disabled false; // 渲染 render(); } function updateTimer() { gameState.timeLeft--; timeDisplay.textContent gameState.timeLeft; if (gameState.timeLeft 0) { endGame(true); } } // 游戏主循环 function gameLoop() { if (!gameState.isRunning) return; update(); render(); gameState.animationId requestAnimationFrame(gameLoop); } // 更新游戏状态 function update() { // 更新挡板位置 gameState.paddle.x gameState.paddle.dx; gameState.paddle.x clamp( gameState.paddle.x, 0, canvas.width - CONFIG.PADDLE_WIDTH ); // 更新球位置 const ball gameState.ball; ball.x ball.dx; ball.y ball.dy; // 墙壁碰撞检测 // 左右墙壁 if (ball.x - ball.radius 0 || ball.x ball.radius canvas.width) { ball.dx -ball.dx; ball.x clamp(ball.x, ball.radius, canvas.width - ball.radius); addEffect(ball.x, ball.y, wall); } // 顶部墙壁 if (ball.y - ball.radius 0) { ball.dy -ball.dy; ball.y ball.radius; addEffect(ball.x, ball.y, wall); } // 底部 - 失去生命 if (ball.y ball.radius canvas.height) { gameState.lives--; livesDisplay.textContent gameState.lives; if (gameState.lives 0) { endGame(false); } else { resetBall(); addEffect(ball.x, canvas.height, lose); } } // 挡板碰撞检测 if (checkPaddleCollision()) { ball.dy -Math.abs(ball.dy); ball.y gameState.paddle.y - ball.radius; // 根据碰撞位置调整反弹角度 const hitPos (ball.x - gameState.paddle.x) / CONFIG.PADDLE_WIDTH; ball.dx gameState.ballSpeed * (hitPos - 0.5) * 2; // 限制速度 const speed Math.sqrt(ball.dx * ball.dx ball.dy * ball.dy); if (speed gameState.ballSpeed * 1.5) { ball.dx * (gameState.ballSpeed * 1.5) / speed; ball.dy * (gameState.ballSpeed * 1.5) / speed; } addEffect(ball.x, ball.y, paddle); } // 砖块碰撞检测 checkBrickCollisions(); // 更新特效 updateEffects(); // 检查是否全部通关 if (gameState.bricks.every(b !b.active)) { // 增加速度和行数重新生成砖块 gameState.ballSpeed Math.min(gameState.ballSpeed CONFIG.BALL_SPEED_INCREMENT, CONFIG.MAX_BALL_SPEED); initBricks(); resetBall(); addEffect(canvas.width / 2, canvas.height / 2, levelup); } } // 挡板碰撞检测 function checkPaddleCollision() { const ball gameState.ball; const paddle gameState.paddle; return ball.y ball.radius paddle.y ball.y - ball.radius paddle.y paddle.height ball.x paddle.x ball.x paddle.x paddle.width ball.dy 0; } // 砖块碰撞检测 function checkBrickCollisions() { const ball gameState.ball; for (const brick of gameState.bricks) { if (!brick.active) continue; // 检测碰撞 if (ball.x ball.radius brick.x ball.x - ball.radius brick.x brick.width ball.y ball.radius brick.y ball.y - ball.radius brick.y brick.height) { // 确定碰撞方向 const overlapLeft ball.x ball.radius - brick.x; const overlapRight brick.x brick.width - (ball.x - ball.radius); const overlapTop ball.y ball.radius - brick.y; const overlapBottom brick.y brick.height - (ball.y - ball.radius); const minOverlapX Math.min(overlapLeft, overlapRight); const minOverlapY Math.min(overlapTop, overlapBottom); if (minOverlapX minOverlapY) { ball.dx -ball.dx; } else { ball.dy -ball.dy; } // 砖块受损 brick.hitCount--; if (brick.hitCount 0) { brick.active false; gameState.score CONFIG.POINTS_PER_BRICK * brick.maxHits; scoreDisplay.textContent gameState.score; // 加速球 gameState.ballSpeed Math.min( gameState.ballSpeed CONFIG.BALL_SPEED_INCREMENT * 0.5, CONFIG.MAX_BALL_SPEED ); } // 添加特效 addEffect(brick.x brick.width / 2, brick.y brick.height / 2, brick, brick.color); break; // 每帧只处理一次碰撞 } } } // 特效系统 function addEffect(x, y, type, color #fff) { const effect { x, y, type, color, life: 1, size: type brick ? 20 : 10 }; if (type brick) { effect.particles []; for (let i 0; i 8; i) { effect.particles.push({ dx: (Math.random() - 0.5) * 8, dy: (Math.random() - 0.5) * 8, size: Math.random() * 6 3 }); } } gameState.effects.push(effect); } function updateEffects() { for (let i gameState.effects.length - 1; i 0; i--) { const effect gameState.effects[i]; effect.life - 0.03; if (effect.particles) { for (const p of effect.particles) { p.dy 0.3; // 重力 } } if (effect.life 0) { gameState.effects.splice(i, 1); } } } // 渲染 function render() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制背景网格 drawBackground(); // 绘制砖块 drawBricks(); // 绘制挡板 drawPaddle(); // 绘制球 drawBall(); // 绘制特效 drawEffects(); // 如果游戏未开始显示提示 if (!gameState.isRunning gameState.score 0) { drawStartHint(); } } function drawBackground() { // 网格线 ctx.strokeStyle rgba(255, 255, 255, 0.03); ctx.lineWidth 1; const gridSize 40; for (let x 0; x canvas.width; x gridSize) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for (let y 0; y canvas.height; y gridSize) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } } function drawBricks() { for (const brick of gameState.bricks) { if (!brick.active) continue; // 砖块渐变 const gradient ctx.createLinearGradient( brick.x, brick.y, brick.x, brick.y brick.height ); const baseColor brick.color; const darkColor adjustColor(baseColor, -30); gradient.addColorStop(0, baseColor); gradient.addColorStop(1, darkColor); // 绘制砖块主体 ctx.fillStyle gradient; ctx.beginPath(); ctx.roundRect(brick.x, brick.y, brick.width, brick.height, 4); ctx.fill(); // 砖块高光 ctx.fillStyle rgba(255, 255, 255, 0.3); ctx.beginPath(); ctx.roundRect(brick.x 2, brick.y 2, brick.width - 4, brick.height / 3, 2); ctx.fill(); // 如果需要多次击打显示剩余次数 if (brick.maxHits 1 brick.hitCount 1) { ctx.fillStyle rgba(255, 255, 255, 0.9); ctx.font bold 12px Arial; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(brick.hitCount.toString(), brick.x brick.width / 2, brick.y brick.height / 2); } } } function drawPaddle() { const paddle gameState.paddle; // 挡板渐变 const gradient ctx.createLinearGradient( paddle.x, paddle.y, paddle.x, paddle.y paddle.height ); gradient.addColorStop(0, #667eea); gradient.addColorStop(1, #764ba2); // 绘制挡板 ctx.fillStyle gradient; ctx.beginPath(); ctx.roundRect(paddle.x, paddle.y, paddle.width, paddle.height, 7); ctx.fill(); // 挡板高光 ctx.fillStyle rgba(255, 255, 255, 0.4); ctx.beginPath(); ctx.roundRect(paddle.x 4, paddle.y 2, paddle.width - 8, 4, 2); ctx.fill(); } function drawBall() { const ball gameState.ball; // 球渐变 const gradient ctx.createRadialGradient( ball.x - ball.radius * 0.3, ball.y - ball.radius * 0.3, 0, ball.x, ball.y, ball.radius ); gradient.addColorStop(0, #ffffff); gradient.addColorStop(0.3, #f0f0f0); gradient.addColorStop(1, #cccccc); // 绘制球 ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle gradient; ctx.fill(); // 球发光效果 ctx.shadowColor #667eea; ctx.shadowBlur 15; ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle rgba(102, 126, 234, 0.3); ctx.fill(); ctx.shadowBlur 0; } function drawEffects() { for (const effect of gameState.effects) { if (effect.type brick effect.particles) { ctx.globalAlpha effect.life; for (const p of effect.particles) { ctx.fillStyle effect.color; ctx.beginPath(); ctx.arc(effect.x p.dx, effect.y p.dy, p.size * effect.life, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha 1; } else if (effect.type levelup) { // 关卡提升特效 ctx.globalAlpha effect.life * 0.5; ctx.fillStyle #4ade80; ctx.font bold 24px Arial; ctx.textAlign center; ctx.fillText( 关卡提升!, canvas.width / 2, canvas.height / 2); ctx.globalAlpha 1; } else { // 简单圆形特效 ctx.globalAlpha effect.life; ctx.fillStyle effect.color; ctx.beginPath(); ctx.arc(effect.x, effect.y, effect.size * (1 - effect.life * 0.5), 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha 1; } } } function drawStartHint() { ctx.fillStyle rgba(255, 255, 255, 0.8); ctx.font 18px Arial; ctx.textAlign center; ctx.fillText(点击 开始游戏 开始挑战, canvas.width / 2, canvas.height / 2); ctx.font 14px Arial; ctx.fillText(使用鼠标/触摸或方向键移动挡板, canvas.width / 2, canvas.height / 2 30); } // 游戏结束 function endGame(timeUp) { gameState.isRunning false; if (gameState.timerId) clearInterval(gameState.timerId); if (gameState.animationId) cancelAnimationFrame(gameState.animationId); // 显示弹窗 if (timeUp) { modalIcon.textContent ; modalTitle.textContent 挑战成功!; modalMessage.textContent 你成功在 ${CONFIG.GAME_TIME} 秒内获得了 ${gameState.score} 分; } else { modalIcon.textContent ; modalTitle.textContent 游戏结束; modalMessage.textContent 生命耗尽了继续努力; } modalScore.textContent gameState.score; showModal(); startBtn.disabled false; } function showModal() { modalOverlay.classList.add(active); } function hideModal() { modalOverlay.classList.remove(active); } // 工具函数 function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } function adjustColor(color, amount) { const hex color.replace(#, ); const r Math.max(0, Math.min(255, parseInt(hex.substr(0, 2), 16) amount)); const g Math.max(0, Math.min(255, parseInt(hex.substr(2, 2), 16) amount)); const b Math.max(0, Math.min(255, parseInt(hex.substr(4, 2), 16) amount)); return #${r.toString(16).padStart(2, 0)}${g.toString(16).padStart(2, 0)}${b.toString(16).padStart(2, 0)}; } // 创建背景粒子 function createParticles() { const container document.getElementById(particles); for (let i 0; i 20; i) { const particle document.createElement(div); particle.className particle; particle.style.left ${Math.random() * 100}%; particle.style.animationDelay ${Math.random() * 15}s; particle.style.animationDuration ${15 Math.random() * 10}s; particle.style.width particle.style.height ${5 Math.random() * 10}px; container.appendChild(particle); } } function updateDisplay() { scoreDisplay.textContent gameState.score; timeDisplay.textContent gameState.timeLeft; livesDisplay.textContent gameState.lives; } // 启动游戏 // 等待 DOM 加载完成 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, init); } else { init(); } /script /body /html