'use client'; import React, { useRef, useEffect, useState, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const TILE_SIZE = 40; const COLS = VIEW_WIDTH / TILE_SIZE; const ROWS = VIEW_HEIGHT / TILE_SIZE; // 游戏常量 const GAME_SPEED = 2.5; // 玩家速度 const BULLET_SPEED = 6; const ENEMY_SPEED = 1.5; const ENEMY_SPAWN_RATE = 2000; // ms const MAX_ENEMIES = 4; // 方向枚举 const DIR = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3 }; const DX = [0, 1, 0, -1]; const DY = [-1, 0, 1, 0]; // 地图元素 const TILE = { EMPTY: 0, BRICK: 1, STEEL: 2, WATER: 3, BASE: 9 }; export default function TankBattle() { const canvasRef = useRef(null); const [gameState, setGameState] = useState('MENU'); // MENU, PLAYING, GAMEOVER, VICTORY const [score, setScore] = useState(0); // 游戏核心数据 Ref (避免 React 渲染循环) const gameRef = useRef({ lastTime: 0, keys: { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false }, map: [], player: null, enemies: [], bullets: [], particles: [], powerups: [], basePos: { x: 10, y: 14 }, // Grid coords shake: 0, enemySpawnTimer: 0, level: 1, gameOverReason: '' }); // 初始化地图 const initMap = () => { const map = []; for (let y = 0; y < ROWS; y++) { const row = []; for (let x = 0; x < COLS; x++) { // 边界围墙 if (x === 0 || x === COLS - 1 || y === 0 || y === ROWS - 1) { row.push(TILE.STEEL); } else if ((x === 9 || x === 10 || x === 11) && (y === 13 || y === 12)) { // 基地保护墙 row.push(TILE.BRICK); } else if (x === 10 && y === 13) { // 基地位置预留 (实际基地作为 Entity 绘制，这里放空防止重叠) row.push(TILE.EMPTY); } else { // 随机生成地形 const rand = Math.random(); if (rand < 0.1) row.push(TILE.BRICK); else if (rand < 0.15) row.push(TILE.STEEL); else if (rand < 0.17) row.push(TILE.WATER); else row.push(TILE.EMPTY); } } map.push(row); } // 清空玩家出生点和基地位置 map[ROWS - 2][Math.floor(COLS / 2)] = TILE.EMPTY; map[ROWS - 2][Math.floor(COLS / 2) - 1] = TILE.EMPTY; map[ROWS - 2][Math.floor(COLS / 2) + 1] = TILE.EMPTY; // 确保基地位置是空的 (基地单独绘制) map[ROWS - 2][Math.floor(COLS / 2)] = TILE.EMPTY; return map; }; // 初始化游戏 const startGame = () => { const cx = Math.floor(COLS / 2) * TILE_SIZE + TILE_SIZE / 2; const cy = (ROWS - 2) * TILE_SIZE + TILE_SIZE / 2; gameRef.current = { ...gameRef.current, map: initMap(), player: { x: cx, y: cy, dir: DIR.UP, w: 30, h: 30, cooldown: 0, bulletType: 0, // 0: Normal, 1: Fast, 2: Heavy dead: false, invincible: 120 // 初始无敌帧 }, enemies: [], bullets: [], particles: [], powerups: [], basePos: { x: Math.floor(COLS / 2), y: ROWS - 2, hp: 1 }, shake: 0, enemySpawnTimer: 0, score: 0, }; setScore(0); setGameState('PLAYING'); }; // 键盘事件监听 useEffect(() => { const handleKeyDown = (e) => { if (gameRef.current.keys.hasOwnProperty(e.code)) { gameRef.current.keys[e.code] = true; } // 重新开始快捷键 if (e.code === 'Enter' && gameState !== 'PLAYING') { startGame(); } }; const handleKeyUp = (e) => { if (gameRef.current.keys.hasOwnProperty(e.code)) { gameRef.current.keys[e.code] = false; } }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, [gameState]); // 核心游戏循环 useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animationFrameId; const render = (time) => { if (gameState !== 'PLAYING' && gameState !== 'MENU') { // 如果游戏结束，仍然绘制一帧以显示最后状态，但不更新逻辑 draw(ctx, time); animationFrameId = requestAnimationFrame(render); return; } if (gameState === 'MENU') { drawMenu(ctx, time); animationFrameId = requestAnimationFrame(render); return; } const dt = time - gameRef.current.lastTime; gameRef.current.lastTime = time; update(dt, time); draw(ctx, time); animationFrameId = requestAnimationFrame(render); }; animationFrameId = requestAnimationFrame(render); return () => cancelAnimationFrame(animationFrameId); }, [gameState]); // --- 逻辑更新 --- const update = (dt, time) => { const state = gameRef.current; if (state.shake > 0) state.shake -= 1; // 1. 玩家移动 if (!state.player.dead) { let moved = false; const oldX = state.player.x; const oldY = state.player.y; if (state.keys.ArrowUp) { state.player.dir = DIR.UP; state.player.y -= GAME_SPEED; moved = true; } else if (state.keys.ArrowDown) { state.player.dir = DIR.DOWN; state.player.y += GAME_SPEED; moved = true; } else if (state.keys.ArrowLeft) { state.player.dir = DIR.LEFT; state.player.x -= GAME_SPEED; moved = true; } else if (state.keys.ArrowRight) { state.player.dir = DIR.RIGHT; state.player.x += GAME_SPEED; moved = true; } // 碰撞检测（墙壁） if (moved && checkCollision(state.player, state.map)) { state.player.x = oldX; state.player.y = oldY; } // 自动射击 if (state.player.cooldown > 0) state.player.cooldown--; else { spawnBullet(state.player, 'player'); state.player.cooldown = state.player.bulletType === 1 ? 15 : 30; // 装备加成 } // 无敌时间递减 if (state.player.invincible > 0) state.player.invincible--; } // 2. 敌人生成与AI if (state.enemies.length < MAX_ENEMIES && time - state.enemySpawnTimer > ENEMY_SPAWN_RATE) { spawnEnemy(); state.enemySpawnTimer = time; } state.enemies.forEach(enemy => { // 简单AI: 随机转向或直行 if (Math.random() < 0.02) enemy.dir = Math.floor(Math.random() * 4); const oldX = enemy.x; const oldY = enemy.y; enemy.x += DX[enemy.dir] * ENEMY_SPEED; enemy.y += DY[enemy.dir] * ENEMY_SPEED; if (checkCollision(enemy, state.map)) { enemy.x = oldX; enemy.y = oldY; enemy.dir = Math.floor(Math.random() * 4); // 撞墙转向 } // 敌人射击 if (enemy.cooldown > 0) enemy.cooldown--; else { spawnBullet(enemy, 'enemy'); enemy.cooldown = 100 + Math.random() * 100; } }); // 3. 子弹移动与逻辑 for (let i = state.bullets.length - 1; i >= 0; i--) { const b = state.bullets[i]; b.x += b.dx; b.y += b.dy; // 子弹越界 if (b.x < 0 || b.x > VIEW_WIDTH || b.y < 0 || b.y > VIEW_HEIGHT) { state.bullets.splice(i, 1); continue; } // 子弹打墙 const hitWall = checkBulletMapCollision(b, state.map, b.owner === 'player' && state.player.bulletType === 2); if (hitWall) { createExplosion(b.x, b.y, 'small'); state.bullets.splice(i, 1); continue; } // 子弹打基地 const baseRect = { x: state.basePos.x * TILE_SIZE, y: state.basePos.y * TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE }; if (rectIntersect({x: b.x - 4, y: b.y - 4, w: 8, h: 8}, baseRect)) { state.basePos.hp = 0; createExplosion(b.x, b.y, 'huge'); state.bullets.splice(i, 1); setGameState('GAMEOVER'); state.gameOverReason = '堡垒被攻破'; continue; } // 子弹打人 if (b.owner === 'player') { // 玩家打敌人 let hit = false; for (let j = state.enemies.length - 1; j >= 0; j--) { const e = state.enemies[j]; if (dist(b.x, b.y, e.x, e.y) < 20) { createExplosion(e.x, e.y, 'big'); state.shake = 10; // 掉落装备 if (Math.random() < 0.3) spawnPowerup(e.x, e.y); state.enemies.splice(j, 1); state.bullets.splice(i, 1); setScore(s => s + 100); hit = true; break; } } if (hit) continue; } else { // 敌人打玩家 if (!state.player.dead && state.player.invincible <= 0 && dist(b.x, b.y, state.player.x, state.player.y) < 20) { createExplosion(state.player.x, state.player.y, 'big'); state.player.dead = true; state.bullets.splice(i, 1); setGameState('GAMEOVER'); state.gameOverReason = '坦克被摧毁'; continue; } } } // 4. 装备拾取 for (let i = state.powerups.length - 1; i >= 0; i--) { const p = state.powerups[i]; if (!state.player.dead && dist(p.x, p.y, state.player.x, state.player.y) < 30) { // 拾取效果 if (p.type === 0) state.player.bulletType = 1; // 射速 if (p.type === 1) state.player.bulletType = 2; // 威力(破钢) state.score += 500; state.powerups.splice(i, 1); } } // 5. 粒子更新 for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.life--; p.x += p.vx; p.y += p.vy; if (p.life <= 0) state.particles.splice(i, 1); } }; // --- 辅助函数 --- const spawnEnemy = () => { const spawns = [{x: 1, y: 1}, {x: COLS/2, y: 1}, {x: COLS-2, y: 1}]; const pos = spawns[Math.floor(Math.random() * spawns.length)]; gameRef.current.enemies.push({ x: pos.x * TILE_SIZE + TILE_SIZE/2, y: pos.y * TILE_SIZE + TILE_SIZE/2, dir: DIR.DOWN, w: 30, h: 30, cooldown: 100 }); }; const spawnBullet = (owner, typeStr) => { const vx = DX[owner.dir] * BULLET_SPEED; const vy = DY[owner.dir] * BULLET_SPEED; // 偏移一点，从炮管出来 const bx = owner.x + DX[owner.dir] * 20; const by = owner.y + DY[owner.dir] * 20; gameRef.current.bullets.push({ x: bx, y: by, dx: vx, dy: vy, owner: typeStr }); }; const spawnPowerup = (x, y) => { // 在地图随机空地生成，或者原地生成。需求说随机位置，这里做一个简单的随机位置尝试 let tx, ty; let attempts = 0; do { tx = Math.floor(Math.random() * (COLS - 2)) + 1; ty = Math.floor(Math.random() * (ROWS - 2)) + 1; attempts++; } while (gameRef.current.map[ty][tx] !== TILE.EMPTY && attempts < 10); gameRef.current.powerups.push({ x: tx * TILE_SIZE + TILE_SIZE/2, y: ty * TILE_SIZE + TILE_SIZE/2, type: Math.random() > 0.5 ? 0 : 1, // 0: Fast, 1: Heavy life: 600 }); }; const createExplosion = (x, y, type) => { const count = type === 'huge' ? 50 : (type === 'big' ? 20 : 5); const color = type === 'huge' ? '#ef4444' : '#f59e0b'; for (let i = 0; i < count; i++) { gameRef.current.particles.push({ x, y, vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4, life: 20 + Math.random() * 20, color: Math.random() > 0.5 ? '#fff' : color, size: Math.random() * 4 + 1 }); } }; const checkCollision = (obj, map) => { // 简单的矩形与瓦片碰撞 const left = Math.floor((obj.x - obj.w/2) / TILE_SIZE); const right = Math.floor((obj.x + obj.w/2 - 0.1) / TILE_SIZE); const top = Math.floor((obj.y - obj.h/2) / TILE_SIZE); const bottom = Math.floor((obj.y + obj.h/2 - 0.1) / TILE_SIZE); if (left < 0 || right >= COLS || top < 0 || bottom >= ROWS) return true; for (let y = top; y <= bottom; y++) { for (let x = left; x <= right; x++) { const t = map[y][x]; if (t === TILE.BRICK || t === TILE.STEEL || t === TILE.WATER) return true; } } return false; }; const checkBulletMapCollision = (b, map, canBreakSteel) => { const c = Math.floor(b.x / TILE_SIZE); const r = Math.floor(b.y / TILE_SIZE); if (c < 0 || c >= COLS || r < 0 || r >= ROWS) return true; // 边界 const t = map[r][c]; if (t === TILE.BRICK) { map[r][c] = TILE.EMPTY; // 破坏砖块 return true; } if (t === TILE.STEEL) { if (canBreakSteel) { map[r][c] = TILE.EMPTY; return true; } return true; } return false; }; const rectIntersect = (r1, r2) => { return !(r2.x > r1.x + r1.w || r2.x + r2.w < r1.x || r2.y > r1.y + r1.h || r2.y + r2.h < r1.y); }; const dist = (x1, y1, x2, y2) => Math.sqrt((x1-x2)**2 + (y1-y2)**2); // --- 渲染 --- const draw = (ctx, time) => { const state = gameRef.current; // 清屏与震动 ctx.save(); ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT); if (state.shake > 0) { const dx = (Math.random() - 0.5) * state.shake; const dy = (Math.random() - 0.5) * state.shake; ctx.translate(dx, dy); } // 绘制网格背景 (科技感) ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 1; ctx.beginPath(); for(let x=0; x<=VIEW_WIDTH; x+=TILE_SIZE) { ctx.moveTo(x,0); ctx.lineTo(x, VIEW_HEIGHT); } for(let y=0; y<=VIEW_HEIGHT; y+=TILE_SIZE) { ctx.moveTo(0,y); ctx.lineTo(VIEW_WIDTH, y); } ctx.stroke(); // 绘制地图 for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { const t = state.map[y][x]; const px = x * TILE_SIZE; const py = y * TILE_SIZE; if (t === TILE.BRICK) { ctx.fillStyle = '#b45309'; ctx.fillRect(px+1, py+1, TILE_SIZE-2, TILE_SIZE-2); ctx.fillStyle = '#92400e'; // 砖纹 ctx.fillRect(px+4, py+4, TILE_SIZE/2-4, TILE_SIZE/2-4); ctx.fillRect(px+TILE_SIZE/2+4, py+TILE_SIZE/2+4, TILE_SIZE/2-4, TILE_SIZE/2-4); } else if (t === TILE.STEEL) { ctx.fillStyle = '#94a3b8'; ctx.fillRect(px, py, TILE_SIZE, TILE_SIZE); ctx.fillStyle = '#cbd5e1'; ctx.fillRect(px+4, py+4, TILE_SIZE-8, TILE_SIZE-8); } else if (t === TILE.WATER) { ctx.fillStyle = '#3b82f6'; ctx.globalAlpha = 0.5 + Math.sin(time / 200) * 0.1; ctx.fillRect(px, py, TILE_SIZE, TILE_SIZE); ctx.globalAlpha = 1.0; } } } // 绘制基地 const baseX = state.basePos.x * TILE_SIZE; const baseY = state.basePos.y * TILE_SIZE; if (state.basePos.hp > 0) { ctx.fillStyle = '#f59e0b'; // 金色老鹰 // 简单的老鹰图标 ctx.beginPath(); ctx.moveTo(baseX + TILE_SIZE/2, baseY + 4); ctx.lineTo(baseX + 4, baseY + TILE_SIZE - 4); ctx.lineTo(baseX + TILE_SIZE - 4, baseY + TILE_SIZE - 4); ctx.fill(); // 核心 ctx.fillStyle = '#ef4444'; ctx.beginPath(); ctx.arc(baseX + TILE_SIZE/2, baseY + TILE_SIZE/2 + 4, 6, 0, Math.PI * 2); ctx.fill(); } else { // 废墟 ctx.fillStyle = '#475569'; ctx.fillRect(baseX, baseY, TILE_SIZE, TILE_SIZE); ctx.strokeStyle = '#000'; ctx.beginPath(); ctx.moveTo(baseX, baseY); ctx.lineTo(baseX+TILE_SIZE, baseY+TILE_SIZE); ctx.moveTo(baseX+TILE_SIZE, baseY); ctx.lineTo(baseX, baseY+TILE_SIZE); ctx.stroke(); } // 绘制装备 state.powerups.forEach(p => { const glow = Math.abs(Math.sin(time / 150)) * 10; ctx.shadowBlur = glow; ctx.shadowColor = '#fff'; ctx.fillStyle = p.type === 0 ? '#10b981' : '#ec4899'; // 绿:射速, 粉:威力 ctx.fillRect(p.x - 12, p.y - 12, 24, 24); ctx.fillStyle = '#fff'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowBlur = 0; ctx.fillText(p.type === 0 ? '速' : '炮', p.x, p.y); }); // 绘制玩家 if (!state.player.dead) { drawTank(ctx, state.player.x, state.player.y, state.player.dir, '#22c55e', state.player.invincible > 0); // 玩家ID标记 ctx.fillStyle = '#fff'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('P1', state.player.x, state.player.y - 20); } // 绘制敌人 state.enemies.forEach(e => { drawTank(ctx, e.x, e.y, e.dir, '#ef4444', false); }); // 绘制子弹 ctx.fillStyle = '#fbbf24'; state.bullets.forEach(b => { ctx.beginPath(); ctx.arc(b.x, b.y, 4, 0, Math.PI * 2); ctx.fill(); }); // 绘制粒子 state.particles.forEach(p => { ctx.globalAlpha = p.life / 20; ctx.fillStyle = p.color; ctx.fillRect(p.x - p.size/2, p.y - p.size/2, p.size, p.size); }); ctx.globalAlpha = 1.0; // 绘制UI (Game Over) if (gameState === 'GAMEOVER') { ctx.fillStyle = 'rgba(0,0,0,0.7)'; ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT); ctx.fillStyle = '#ef4444'; ctx.font = 'bold 48px monospace'; ctx.textAlign = 'center'; ctx.fillText('GAME OVER', VIEW_WIDTH/2, VIEW_HEIGHT/2 - 20); ctx.fillStyle = '#fff'; ctx.font = '24px monospace'; ctx.fillText(state.gameOverReason, VIEW_WIDTH/2, VIEW_HEIGHT/2 + 30); ctx.fillStyle = '#94a3b8'; ctx.font = '16px monospace'; ctx.fillText('按 ENTER 重新开始', VIEW_WIDTH/2, VIEW_HEIGHT/2 + 80); } ctx.restore(); }; const drawMenu = (ctx, time) => { ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT); // 标题动画 const scale = 1 + Math.sin(time / 400) * 0.05; ctx.save(); ctx.translate(VIEW_WIDTH/2, 150); ctx.scale(scale, scale); ctx.shadowColor = '#dc2626'; ctx.shadowBlur = 20; ctx.fillStyle = '#ef4444'; ctx.font = 'bold 60px monospace'; ctx.textAlign = 'center'; ctx.fillText('TANK 1990', 0, 0); ctx.shadowBlur = 0; ctx.fillStyle = '#fff'; ctx.font = '24px monospace'; ctx.fillText('坦克大战', 0, 40); ctx.restore(); ctx.fillStyle = '#fbbf24'; ctx.font = '20px monospace'; ctx.textAlign = 'center'; ctx.fillText('按 ENTER 开始游戏', VIEW_WIDTH/2, 350); ctx.fillStyle = '#94a3b8'; ctx.font = '14px monospace'; ctx.fillText('方向键移动 · 自动射击', VIEW_WIDTH/2, 400); }; const drawTank = (ctx, x, y, dir, color, isInvincible) => { ctx.save(); ctx.translate(x, y); ctx.rotate(dir * Math.PI / 2); if (isInvincible) { ctx.globalAlpha = 0.5 + Math.sin(Date.now() / 50) * 0.4; } // 履带 ctx.fillStyle = '#334155'; ctx.fillRect(-15, -15, 8, 30); // 左 ctx.fillRect(7, -15, 8, 30); // 右 // 履带纹理 ctx.fillStyle = '#000'; for(let i=-15; i<15; i+=4) { ctx.fillRect(-15, i, 8, 1); ctx.fillRect(7, i, 8, 1); } // 车身 ctx.fillStyle = color; ctx.fillRect(-10, -12, 20, 24); // 炮塔 ctx.fillStyle = isInvincible ? '#fff' : '#1e293b'; // 稍微深一点 ctx.fillRect(-6, -6, 12, 12); // 炮管 ctx.fillStyle = '#94a3b8'; ctx.fillRect(-2, -18, 4, 14); ctx.fillStyle = color; // 炮口装饰 ctx.fillRect(-3, -18, 6, 2); ctx.restore(); }; return (

坦克大战 CANVAS版

得分: {score} 状态: {gameState === 'PLAYING' ? '战斗中' : (gameState === 'MENU' ? '待机' : '结束')}

{/* CRT Scanline Effect Overlay */}

控制: 方向键 (↑ ↓ ← →) 移动 | 自动开火

机制: 击毁红色坦克获取装备 (速: 射速提升 / 炮: 击穿钢铁)

); }