当前位置：首页 > news >正文

11.8 脚本网页打砖块max

news 2025/11/9 7:39:13

<!DOCTYPE html>

<head>

<title>超级打砖块 - Ultimate Breakout</title>

<style>

/* 1. 全局样式和变量定义 */

:root {

--primary-color: #00ffcc;

--secondary-color: #ff00ff;

--bg-gradient-start: #0a0e27;

--bg-gradient-end: #1a1f3a;

--text-color: #ffffff;

--panel-bg: rgba(20, 25, 45, 0.9);

}

/* 2. 页面布局样式 */

body {

margin: 0;

padding: 0;

font-family: 'Arial', sans-serif;

background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

overflow-x: hidden;

touch-action: none;

}

/* 3. 游戏头部信息栏 */

.game-header {

width: 100%;

max-width: 600px;

padding: 20px;

display: flex;

justify-content: space-between;

align-items: center;

background: var(--panel-bg);

backdrop-filter: blur(10px);

border-radius: 0 0 20px 20px;

box-shadow: 0 4px 20px rgba(0, 255, 204, 0.2);

margin-bottom: 20px;

}

.info-item {

display: flex;

flex-direction: column;

align-items: center;

color: var(--text-color);

}

.info-label {

font-size: 12px;

opacity: 0.7;

margin-bottom: 5px;

}

.info-value {

font-size: 24px;

font-weight: bold;

color: var(--primary-color);

text-shadow: 0 0 10px currentColor;

}

/* 4. 游戏容器样式 */

.game-container {

position: relative;

border-radius: 20px;

overflow: hidden;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),

0 0 60px rgba(0, 255, 204, 0.3);

animation: float 3s ease-in-out infinite;

}

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-10px); }

}

/* 5. Canvas画布样式 */

#gameCanvas {

display: block;

background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%);

border: 3px solid var(--primary-color);

border-radius: 20px;

max-width: 100%;

height: auto;

}

/* 6. 游戏控制面板 */

.controls {

margin-top: 20px;

display: flex;

gap: 15px;

flex-wrap: wrap;

justify-content: center;

}

.btn {

padding: 12px 24px;

background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

border: none;

border-radius: 25px;

color: white;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(0, 255, 204, 0.3);

}

.btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 255, 204, 0.5);

}

.btn:active {

transform: translateY(0);

}

/* 7. 游戏结束和关卡完成弹窗 */

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.8);

display: none;

justify-content: center;

align-items: center;

z-index: 1000;

backdrop-filter: blur(5px);

}

.modal-content {

background: linear-gradient(135deg, #1a1f3a, #2a3050);

padding: 40px;

border-radius: 20px;

text-align: center;

color: white;

box-shadow: 0 10px 40px rgba(0, 255, 204, 0.4);

border: 2px solid var(--primary-color);

animation: slideIn 0.3s ease;

}

@keyframes slideIn {

from {

transform: translateY(-50px);

opacity: 0;

}

to {

transform: translateY(0);

opacity: 1;

}

.modal h2 {

font-size: 32px;

margin-bottom: 20px;

background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.modal p {

font-size: 18px;

margin: 10px 0;

}

/* 8. 道具显示区域 */

.power-ups {

position: absolute;

top: 10px;

right: 10px;

display: flex;

gap: 10px;

}

.power-up-indicator {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.2);

border: 2px solid var(--primary-color);

display: flex;

align-items: center;

justify-content: center;

font-size: 20px;

opacity: 0;

transition: opacity 0.3s;

}

.power-up-indicator.active {

opacity: 1;

animation: pulse 1s infinite;

}

@keyframes pulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.1); }

}

/* 9. 连击显示 */

.combo-display {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 48px;

font-weight: bold;

color: #ffff00;

text-shadow: 0 0 20px currentColor;

opacity: 0;

pointer-events: none;

}

.combo-display.show {

animation: comboAnimation 1s ease;

}

@keyframes comboAnimation {

0% {

opacity: 0;

transform: translate(-50%, -50%) scale(0.5);

}

50% {

opacity: 1;

transform: translate(-50%, -50%) scale(1.5);

}

100% {

opacity: 0;

transform: translate(-50%, -50%) scale(1);

}

/* 10. 响应式设计 */

@media (max-width: 600px) {

.game-header {

padding: 15px;

border-radius: 0 0 15px 15px;

}

.info-value {

font-size: 20px;

}

.btn {

padding: 10px 20px;

font-size: 14px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>准备进入第 <span id="nextLevel">2</span> 关</p>

</div>

// ========== 游戏配置变量 ==========

const CONFIG = {

// 画布配置

CANVAS_WIDTH: 600,

CANVAS_HEIGHT: 700,

// 球配置

BALL_RADIUS: 8,

BALL_SPEED: 5,

BALL_MAX_SPEED: 12,

// 挡板配置

PADDLE_WIDTH: 100,

PADDLE_HEIGHT: 15,

PADDLE_SPEED: 8,

PADDLE_EXTENDED_WIDTH: 150,

// 砖块配置

BRICK_ROWS: 6,

BRICK_COLS: 10,

BRICK_WIDTH: 50,

BRICK_HEIGHT: 25,

BRICK_PADDING: 5,

BRICK_OFFSET_TOP: 80,

BRICK_OFFSET_LEFT: 25,

// 游戏配置

INITIAL_LIVES: 3,

POINTS_PER_BRICK: 10,

COMBO_MULTIPLIER: 1.5,

POWER_UP_DURATION: 5000,

// 颜色配置

BACKGROUND_COLORS: [

['#0a0e27', '#1a1f3a'],

['#1a0e2a', '#2a1f3a'],

['#0e1a27', '#1f2a3a'],

['#1a0e0e', '#3a1f1f'],

['#0e1a0e', '#1f3a1f']

// 粒子配置

PARTICLE_COUNT: 10,

PARTICLE_LIFETIME: 30

};

// ========== 游戏状态变量 ==========

let canvas, ctx;

let gameState = {

score: 0,

level: 1,

lives: CONFIG.INITIAL_LIVES,

combo: 0,

maxCombo: 0,

isPaused: false,

isGameOver: false,

soundEnabled: true,

bricksDestroyed: 0,

backgroundIndex: 0

};

// ========== 游戏对象 ==========

let ball = {

x: CONFIG.CANVAS_WIDTH / 2,

y: CONFIG.CANVAS_HEIGHT - 100,

dx: CONFIG.BALL_SPEED,

dy: -CONFIG.BALL_SPEED,

radius: CONFIG.BALL_RADIUS,

trail: []

};

let paddle = {

x: CONFIG.CANVAS_WIDTH / 2 - CONFIG.PADDLE_WIDTH / 2,

y: CONFIG.CANVAS_HEIGHT - 40,

width: CONFIG.PADDLE_WIDTH,

height: CONFIG.PADDLE_HEIGHT,

isExtended: false

};

let bricks = [];

let particles = [];

let powerUps = [];

let activePowerUps = {

speed: false,

extended: false,

multi: false

};

// ========== 初始化游戏 ==========

function initGame() {

canvas = document.getElementById('gameCanvas');

ctx = canvas.getContext('2d');

// 设置画布大小

canvas.width = CONFIG.CANVAS_WIDTH;

canvas.height = CONFIG.CANVAS_HEIGHT;

// 初始化砖块

createBricks();

// 绑定事件

bindEvents();

// 开始游戏循环

gameLoop();

}

// ========== 创建砖块 ==========

function createBricks() {

bricks = [];

const specialBrickChance = 0.1 + (gameState.level * 0.02);

for (let c = 0; c < CONFIG.BRICK_COLS; c++) {

bricks[c] = [];

for (let r = 0; r < CONFIG.BRICK_ROWS; r++) {

const isSpecial = Math.random() < specialBrickChance;

const hue = (r * 60 + c * 20) % 360;

bricks[c][r] = {

x: 0,

y: 0,

status: isSpecial ? 2 : 1,

color: `hsl(${hue}, 70%, 50%)`,

isSpecial: isSpecial,

powerUp: isSpecial ? getRandomPowerUp() : null

};

}

// ========== 获取随机道具 ==========

function getRandomPowerUp() {

const powerUpTypes = ['speed', 'extended', 'multi'];

return powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];

}

// ========== 绑定事件 ==========

function bindEvents() {

// 触摸事件

let touchX = null;

canvas.addEventListener('touchstart', (e) => {

e.preventDefault();

const rect = canvas.getBoundingClientRect();

touchX = e.touches[0].clientX - rect.left;

});

canvas.addEventListener('touchmove', (e) => {

e.preventDefault();

if (touchX !== null && !gameState.isPaused) {

const rect = canvas.getBoundingClientRect();

const currentX = e.touches[0].clientX - rect.left;

const deltaX = currentX - touchX;

paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, paddle.x + deltaX));

touchX = currentX;

}

});

canvas.addEventListener('touchend', (e) => {

e.preventDefault();

touchX = null;

});

// 鼠标事件

canvas.addEventListener('mousemove', (e) => {

if (!gameState.isPaused) {

const rect = canvas.getBoundingClientRect();

const mouseX = e.clientX - rect.left;

paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, mouseX - paddle.width / 2));

}

});

// 键盘事件

document.addEventListener('keydown', (e) => {

if (e.key === 'ArrowLeft' && !gameState.isPaused) {

paddle.x = Math.max(0, paddle.x - CONFIG.PADDLE_SPEED);

} else if (e.key === 'ArrowRight' && !gameState.isPaused) {

paddle.x = Math.min(canvas.width - paddle.width, paddle.x + CONFIG.PADDLE_SPEED);

} else if (e.key === ' ') {

togglePause();

}

});

}

// ========== 游戏主循环 ==========

function gameLoop() {

if (!gameState.isPaused && !gameState.isGameOver) {

update();

render();

}

requestAnimationFrame(gameLoop);

}

// ========== 更新游戏状态 ==========

function update() {

// 更新球的位置

updateBall();

// 更新粒子效果

updateParticles();

// 更新道具

updatePowerUps();

// 检测碰撞

checkCollisions();

// 检查游戏状态

checkGameStatus();

}

// ========== 更新球 ==========

function updateBall() {

// 添加轨迹

ball.trail.push({ x: ball.x, y: ball.y, alpha: 1 });

if (ball.trail.length > 10) {

ball.trail.shift();

}

// 更新轨迹透明度

ball.trail.forEach(point => {

point.alpha *= 0.9;

});

// 移动球

ball.x += ball.dx;

ball.y += ball.dy;

// 墙壁碰撞

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {

ball.dx = -ball.dx;

createImpactParticles(ball.x, ball.y);

}

if (ball.y - ball.radius < 0) {

ball.dy = -ball.dy;

createImpactParticles(ball.x, ball.y);

}

// 底部检测

if (ball.y - ball.radius > canvas.height) {

loseLife();

}

// ========== 更新粒子 ==========

function updateParticles() {

particles = particles.filter(particle => {

particle.x += particle.dx;

particle.y += particle.dy;

particle.dy += 0.2; // 重力

particle.life--;

particle.alpha = particle.life / CONFIG.PARTICLE_LIFETIME;

return particle.life > 0;

});

}

// ========== 更新道具 ==========

function updatePowerUps() {

powerUps = powerUps.filter(powerUp => {

powerUp.y += 2;

// 检测与挡板碰撞

if (powerUp.y + 10 > paddle.y &&

powerUp.x > paddle.x &&

powerUp.x < paddle.x + paddle.width) {

activatePowerUp(powerUp.type);

return false;

}

return powerUp.y < canvas.height;

});

}

// ========== 激活道具 ==========

function activatePowerUp(type) {

activePowerUps[type] = true;

// 显示道具指示器

const indicator = document.getElementById(`powerUp${type === 'speed' ? '1' : type === 'extended' ? '2' : '3'}`);

indicator.classList.add('active');

// 应用道具效果

switch(type) {

case 'speed':

const speedMultiplier = 1.5;

ball.dx *= speedMultiplier;

ball.dy *= speedMultiplier;

break;

case 'extended':

paddle.width = CONFIG.PADDLE_EXTENDED_WIDTH;

paddle.isExtended = true;

break;

case 'multi':

// 多重球效果（简化版）

createImpactParticles(ball.x, ball.y, 20);

break;

}

// 设置道具持续时间

setTimeout(() => {

deactivatePowerUp(type);

}, CONFIG.POWER_UP_DURATION);

}

// ========== 取消道具 ==========

function deactivatePowerUp(type) {

activePowerUps[type] = false;

// 隐藏道具指示器

const indicator = document.getElementById(`powerUp${type === 'speed' ? '1' : type === 'extended' ? '2' : '3'}`);

indicator.classList.remove('active');

// 恢复原始状态

switch(type) {

case 'speed':

const speedMultiplier = 1 / 1.5;

ball.dx *= speedMultiplier;

ball.dy *= speedMultiplier;

break;

case 'extended':

paddle.width = CONFIG.PADDLE_WIDTH;

paddle.isExtended = false;

break;

}

// ========== 碰撞检测 ==========

function checkCollisions() {

// 挡板碰撞

if (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 = -Math.abs(ball.dy);

// 根据碰撞位置调整角度

const hitPos = (ball.x - paddle.x) / paddle.width;

ball.dx = 8 * (hitPos - 0.5);

createImpactParticles(ball.x, paddle.y);

}

// 砖块碰撞

for (let c = 0; c < CONFIG.BRICK_COLS; c++) {

for (let r = 0; r < CONFIG.BRICK_ROWS; r++) {

const brick = bricks[c][r];

if (brick.status > 0) {

const brickX = c * (CONFIG.BRICK_WIDTH + CONFIG.BRICK_PADDING) + CONFIG.BRICK_OFFSET_LEFT;

const brickY = r * (CONFIG.BRICK_HEIGHT + CONFIG.BRICK_PADDING) + CONFIG.BRICK_OFFSET_TOP;

if (ball.x > brickX &&

ball.x < brickX + CONFIG.BRICK_WIDTH &&

ball.y > brickY &&

ball.y < brickY + CONFIG.BRICK_HEIGHT) {

ball.dy = -ball.dy;

brick.status--;

if (brick.status === 0) {

// 砖块被摧毁

onBrickDestroyed(brickX, brickY, brick);

} else {

// 特殊砖块受损

createImpactParticles(brickX + CONFIG.BRICK_WIDTH/2, brickY + CONFIG.BRICK_HEIGHT/2);

}

// ========== 砖块被摧毁 ==========

function onBrickDestroyed(x, y, brick) {

// 增加分数

const points = CONFIG.POINTS_PER_BRICK * (1 + gameState.combo * 0.1);

gameState.score += Math.floor(points);

gameState.combo++;

gameState.bricksDestroyed++;

// 更新UI

updateUI();

// 创建粒子效果

createBrickParticles(x + CONFIG.BRICK_WIDTH/2, y + CONFIG.BRICK_HEIGHT/2, brick.color);

// 掉落道具

if (brick.powerUp) {

powerUps.push({

x: x + CONFIG.BRICK_WIDTH/2,

y: y + CONFIG.BRICK_HEIGHT/2,

type: brick.powerUp,

color: brick.color

});

}

// 显示连击

if (gameState.combo > 2) {

showCombo();

}

// 每5个砖块改变背景

if (gameState.bricksDestroyed % 5 === 0) {

changeBackgroundColor();

}

// 检查关卡完成

if (checkLevelComplete()) {

onLevelComplete();

}

// ========== 创建粒子效果 ==========

function createBrickParticles(x, y, color) {

for (let i = 0; i < CONFIG.PARTICLE_COUNT; i++) {

particles.push({

x: x,

y: y,

dx: (Math.random() - 0.5) * 8,

dy: (Math.random() - 0.5) * 8,

color: color,

size: Math.random() * 4 + 2,

life: CONFIG.PARTICLE_LIFETIME,

alpha: 1

});

}

// ========== 创建撞击粒子 ==========

function createImpactParticles(x, y, count = 5) {

for (let i = 0; i < count; i++) {

particles.push({

x: x,

y: y,

dx: (Math.random() - 0.5) * 4,

dy: (Math.random() - 0.5) * 4,

color: '#ffffff',

size: Math.random() * 3 + 1,

life: 15,

alpha: 1

});

}

// ========== 改变背景颜色 ==========

function changeBackgroundColor() {

gameState.backgroundIndex = (gameState.backgroundIndex + 1) % CONFIG.BACKGROUND_COLORS.length;

const colors = CONFIG.BACKGROUND_COLORS[gameState.backgroundIndex];

document.body.style.background = `linear-gradient(135deg, ${colors[0]}, ${colors[1]})`;

}

// ========== 显示连击 ==========

function showCombo() {

const comboDisplay = document.getElementById('comboDisplay');

comboDisplay.textContent = `${gameState.combo}x 连击!`;

comboDisplay.classList.remove('show');

void comboDisplay.offsetWidth; // 触发重排

comboDisplay.classList.add('show');

}

// ========== 更新UI ==========

function updateUI() {

document.getElementById('score').textContent = gameState.score;

document.getElementById('level').textContent = gameState.level;

document.getElementById('lives').textContent = gameState.lives;

document.getElementById('combo').textContent = gameState.combo;

}

// ========== 检查关卡完成 ==========

function checkLevelComplete() {

for (let c = 0; c < CONFIG.BRICK_COLS; c++) {

for (let r = 0; r < CONFIG.BRICK_ROWS; r++) {

if (bricks[c][r].status > 0) {

return false;

}

return true;

}

// ========== 关卡完成 ==========

function onLevelComplete() {

gameState.isPaused = true;

document.getElementById('currentScore').textContent = gameState.score;

document.getElementById('nextLevel').textContent = gameState.level + 1;

document.getElementById('levelCompleteModal').style.display = 'flex';

}

// ========== 下一关 ==========

function nextLevel() {

gameState.level++;

gameState.isPaused = false;

gameState.bricksDestroyed = 0;

// 重置球和挡板

resetBallAndPaddle();

// 创建新砖块

createBricks();

// 增加球速

const speedIncrease = 1.1;

ball.dx *= speedIncrease;

ball.dy *= speedIncrease;

// 改变背景

changeBackgroundColor();

// 隐藏弹窗

document.getElementById('levelCompleteModal').style.display = 'none';

updateUI();

}

// ========== 失去生命 ==========

function loseLife() {

gameState.lives--;

gameState.combo = 0;

if (gameState.lives <= 0) {

gameOver();

} else {

resetBallAndPaddle();

updateUI();

}

// ========== 重置球和挡板 ==========

function resetBallAndPaddle() {

ball.x = canvas.width / 2;

ball.y = canvas.height - 100;

ball.dx = CONFIG.BALL_SPEED * (Math.random() > 0.5 ? 1 : -1);

ball.dy = -CONFIG.BALL_SPEED;

ball.trail = [];

paddle.x = canvas.width / 2 - paddle.width / 2;

}

// ========== 游戏结束 ==========

function gameOver() {

gameState.isGameOver = true;

gameState.maxCombo = Math.max(gameState.maxCombo, gameState.combo);

document.getElementById('finalScore').textContent = gameState.score;

document.getElementById('finalLevel').textContent = gameState.level;

document.getElementById('maxCombo').textContent = gameState.maxCombo;

document.getElementById('gameOverModal').style.display = 'flex';

}

// ========== 检查游戏状态 ==========

function checkGameStatus() {

// 这里可以添加额外的游戏状态检查

}

// ========== 渲染游戏 ==========

function render() {

// 清空画布

ctx.fillStyle = 'rgba(10, 14, 39, 0.1)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制网格背景

drawGrid();

// 绘制砖块

drawBricks();

// 绘制粒子

drawParticles();

// 绘制道具

drawPowerUps();

// 绘制球轨迹

drawBallTrail();

// 绘制球

drawBall();

// 绘制挡板

drawPaddle();

}

// ========== 绘制网格背景 ==========

function drawGrid() {

ctx.strokeStyle = 'rgba(0, 255, 204, 0.05)';

ctx.lineWidth = 1;

for (let i = 0; i < canvas.width; i += 50) {

ctx.beginPath();

ctx.moveTo(i, 0);

ctx.lineTo(i, canvas.height);

ctx.stroke();

}

for (let i = 0; i < canvas.height; i += 50) {

ctx.beginPath();

ctx.moveTo(0, i);

ctx.lineTo(canvas.width, i);

ctx.stroke();

}

// ========== 绘制砖块 ==========

function drawBricks() {

for (let c = 0; c < CONFIG.BRICK_COLS; c++) {

for (let r = 0; r < CONFIG.BRICK_ROWS; r++) {

const brick = bricks[c][r];

if (brick.status > 0) {

const brickX = c * (CONFIG.BRICK_WIDTH + CONFIG.BRICK_PADDING) + CONFIG.BRICK_OFFSET_LEFT;

const brickY = r * (CONFIG.BRICK_HEIGHT + CONFIG.BRICK_PADDING) + CONFIG.BRICK_OFFSET_TOP;

// 绘制砖块阴影

ctx.shadowColor = brick.color;

ctx.shadowBlur = 10;

// 绘制砖块

ctx.fillStyle = brick.status === 2 ? brick.color : `${brick.color}88`;

ctx.fillRect(brickX, brickY, CONFIG.BRICK_WIDTH, CONFIG.BRICK_HEIGHT);

// 绘制砖块边框

ctx.strokeStyle = brick.color;

ctx.lineWidth = 2;

ctx.strokeRect(brickX, brickY, CONFIG.BRICK_WIDTH, CONFIG.BRICK_HEIGHT);

// 特殊砖块标记

if (brick.isSpecial) {

ctx.fillStyle = '#ffffff';

ctx.font = '16px Arial';

ctx.textAlign = 'center';

ctx.fillText('★', brickX + CONFIG.BRICK_WIDTH/2, brickY + CONFIG.BRICK_HEIGHT/2 + 5);

}

ctx.shadowBlur = 0;

}

// ========== 绘制粒子 ==========

function drawParticles() {

particles.forEach(particle => {

ctx.globalAlpha = particle.alpha;

ctx.fillStyle = particle.color;

ctx.fillRect(particle.x - particle.size/2, particle.y - particle.size/2, particle.size, particle.size);

});

ctx.globalAlpha = 1;

}

// ========== 绘制道具 ==========

function drawPowerUps() {

powerUps.forEach(powerUp => {

// 绘制道具光晕

const gradient = ctx.createRadialGradient(powerUp.x, powerUp.y, 0, powerUp.x, powerUp.y, 20);

gradient.addColorStop(0, powerUp.color);

gradient.addColorStop(1, 'transparent');

ctx.fillStyle = gradient;

ctx.fillRect(powerUp.x - 20, powerUp.y - 20, 40, 40);

// 绘制道具图标

ctx.fillStyle = '#ffffff';

ctx.font = '20px Arial';

ctx.textAlign = 'center';

const icon = powerUp.type === 'speed' ? '⚡' : powerUp.type === 'extended' ? '🔷' : '🎱';

ctx.fillText(icon, powerUp.x, powerUp.y + 5);

});

}

// ========== 绘制球轨迹 ==========

function drawBallTrail() {

ball.trail.forEach((point, index) => {

ctx.globalAlpha = point.alpha * 0.5;

ctx.fillStyle = '#00ffcc';

ctx.beginPath();

ctx.arc(point.x, point.y, ball.radius * (index / ball.trail.length), 0, Math.PI * 2);

ctx.fill();

});

ctx.globalAlpha = 1;

}

// ========== 绘制球 ==========

function drawBall() {

// 绘制球光晕

const gradient = ctx.createRadialGradient(ball.x, ball.y, 0, ball.x, ball.y, ball.radius * 2);

gradient.addColorStop(0, '#ffffff');

gradient.addColorStop(0.5, '#00ffcc');

gradient.addColorStop(1, 'transparent');

ctx.fillStyle = gradient;

ctx.beginPath();

ctx.arc(ball.x, ball.y, ball.radius * 2, 0, Math.PI * 2);

ctx.fill();

// 绘制球体

ctx.fillStyle = '#ffffff';

ctx.beginPath();

ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);

ctx.fill();

}

// ========== 绘制挡板 ==========

function drawPaddle() {

// 绘制挡板光晕

ctx.shadowColor = '#0095DD';

ctx.shadowBlur = 20;

// 绘制挡板主体

const gradient = ctx.createLinearGradient(paddle.x, paddle.y, paddle.x, paddle.y + paddle.height);

gradient.addColorStop(0, '#00ffcc');

gradient.addColorStop(1, '#0095DD');

ctx.fillStyle = gradient;

ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

// 绘制挡板边框

ctx.strokeStyle = '#ffffff';

ctx.lineWidth = 2;

ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height);

ctx.shadowBlur = 0;

}

// ========== 游戏控制函数 ==========

function togglePause() {

gameState.isPaused = !gameState.isPaused;

}

function resetGame() {

// 重置游戏状态

gameState = {

score: 0,

level: 1,

lives: CONFIG.INITIAL_LIVES,

combo: 0,

maxCombo: 0,

isPaused: false,

isGameOver: false,

soundEnabled: gameState.soundEnabled,

bricksDestroyed: 0,

backgroundIndex: 0

};

// 重置游戏对象

resetBallAndPaddle();

createBricks();

particles = [];

powerUps = [];

// 重置背景

document.body.style.background = `linear-gradient(135deg, ${CONFIG.BACKGROUND_COLORS[0][0]}, ${CONFIG.BACKGROUND_COLORS[0][1]})`;

// 隐藏弹窗

document.getElementById('gameOverModal').style.display = 'none';

document.getElementById('levelCompleteModal').style.display = 'none';

// 更新UI

updateUI();

}

function toggleSound() {

gameState.soundEnabled = !gameState.soundEnabled;

event.target.textContent = `音效: ${gameState.soundEnabled ? '开' : '关'}`;

}

// ========== 启动游戏 ==========

window.onload = initGame;

</script>

</body>

</html>

查看全文

http://www.dtcms.com/a/585360.html

终极笔记应用程序Alexandrie

「嵌」入未来，「式」界无限 · 第5篇：能源电力的智能化跃迁

自动化实践（7.25）：把 PsTools 接入 PowerShell / 批处理 / Ansible

太原在线网站建设深圳网站关键词优化

AWS Lambda的安全之道：S3静态加密与运行时完整性检查的双重保障

时序数据库选型指南从大数据视角看IoTDB的核心优势

长沙网站建站模板创免费网站

dede 门户网站长春建站网站建设

Android Hilt 入门教程_传统写法和Hilt写法的比较

【开题答辩全过程】以个性化宿舍分配管理系统为例，包含答辩的问题和答案

wordpress站点制作武威网站制作公司哪个好

【ZeroRange WebRTC】WebRTC 媒体安全：实现原理与应用（深入指南）

python3GUI--短视频社交软件 By:Django+PyQt5（前后端分离项目）

Rust 练习册：Raindrops与FizzBuzz变体

Home Assistant Z-Pi 800全新硬件打造远距离智能家居体验

易货电商新模式：小本钱撬动大市场，破解实体店“三大愁”

做网站需要多少人网站建设价格很好乐云seo

Java 大视界 -- 基于 Java 的大数据可视化在城市空气质量监测与污染溯源中的应用

《玩转Docker》[应用篇16]：Docker安装部署HomeBox-家庭库存管理

网站用什么布局wordpress怎么使用七牛云储存

Cursor接入Figma并使用的图文教程

Java基础——集合进阶4

CUDA C++编程指南(3.2.7)——内存同步域

超市进销存源码

100G相机接口

Linux第一个小程序之【进度条】

网站建设的目的及功能定位网站建设落地页

CentOS 7 上安装 MySQL 8.0

LLM 训练基础概念与流程简介

HTML 音频(Audio)详解

相关文章：