import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Constants & Config --- const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const TILE_SIZE = 40; const GRID_W = VIEW_WIDTH / TILE_SIZE; const GRID_H = VIEW_HEIGHT / TILE_SIZE; const FPS = 60; // Directions: 0: Up, 1: Right, 2: Down, 3: Left const DIRS = [ { x: 0, y: -1 }, { x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, ]; // Game Entities Types type EntityType = 'player' | 'enemy' | 'bullet' | 'base' | 'brick' | 'steel' | 'powerup'; interface GameObject { id: number; x: number; y: number; w: number; h: number; type: EntityType; dir?: number; speed?: number; color?: string; markedForDeletion?: boolean; } interface Bullet extends GameObject { owner: 'player' | 'enemy'; power: number; } interface Tank extends GameObject { cooldown: number; bulletLevel: number; moving: boolean; } interface Particle { id: number; x: number; y: number; life: number; maxLife: number; color: string; size: number; } // Initial Map Layout (0: Empty, 1: Brick, 2: Steel, 9: Base) // Simple symmetric map generation const INITIAL_MAP_LAYOUT = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0], [0,1,1,0,0,1,1,0,0,2,2,0,0,1,1,0,0,1,1,0], [0,1,1,0,0,1,1,0,0,2,2,0,0,1,1,0,0,1,1,0], [0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0], [0,0,0,0,0,0,0,2,2,0,0,2,2,0,0,0,0,0,0,0], [0,1,1,0,0,1,1,2,2,0,0,2,2,1,1,0,0,1,1,0], [0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,1,1,0,0,1,1,0,0,2,2,0,0,1,1,0,0,1,1,0], [0,0,0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0], [0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0], [0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0], [0,0,1,1,0,0,0,0,1,9,9,1,0,0,0,0,1,1,0,0], // Base area [0,0,1,1,0,0,0,0,1,9,9,1,0,0,0,0,1,1,0,0], ]; export default function BattleCityReact() { // --- Refs for Game State (Mutable, High Frequency) --- const gameState = useRef({ player: { id: 0, x: 9 * TILE_SIZE, y: 12 * TILE_SIZE, w: 32, h: 32, type: 'player', dir: 0, speed: 3, cooldown: 0, bulletLevel: 1, moving: false, markedForDeletion: false } as Tank, enemies: [] as Tank[], bullets: [] as Bullet[], mapBlocks: [] as GameObject[], particles: [] as Particle[], powerups: [] as GameObject[], keys: {} as Record, baseIntegrity: 100, score: 0, gameOver: false, victory: false, frameCount: 0, enemySpawnTimer: 0, lastTime: 0, }); // --- React State for Rendering (Syncs with Ref) --- const [renderTrigger, setRenderTrigger] = useState(0); const [gameStatus, setGameStatus] = useState<'playing' | 'gameover' | 'victory'>('playing'); // --- Initialization --- const initGame = () => { const blocks: GameObject[] = []; let idCounter = 100; // Parse Map INITIAL_MAP_LAYOUT.forEach((row, r) => { row.forEach((cell, c) => { if (cell === 1) blocks.push({ id: idCounter++, x: c * TILE_SIZE, y: r * TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE, type: 'brick' }); if (cell === 2) blocks.push({ id: idCounter++, x: c * TILE_SIZE, y: r * TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE, type: 'steel' }); if (cell === 9) { // Base logic handled separately visually, but collisions needed // Actually let's make the base an entity in mapBlocks for collision blocks.push({ id: 999, x: c * TILE_SIZE, y: r * TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE, type: 'base' }); } }); }); gameState.current = { ...gameState.current, player: { id: 1, x: 8 * TILE_SIZE + 4, y: 12 * TILE_SIZE + 4, w: 32, h: 32, type: 'player', dir: 0, speed: 3.5, cooldown: 0, bulletLevel: 1, moving: false, markedForDeletion: false }, enemies: [], bullets: [], mapBlocks: blocks, particles: [], powerups: [], baseIntegrity: 100, score: 0, gameOver: false, victory: false, frameCount: 0, enemySpawnTimer: 0, }; setGameStatus('playing'); }; // --- Input Handling --- useEffect(() => { const handleDown = (e: KeyboardEvent) => { gameState.current.keys[e.key] = true; }; const handleUp = (e: KeyboardEvent) => { gameState.current.keys[e.key] = false; }; window.addEventListener('keydown', handleDown); window.addEventListener('keyup', handleUp); return () => { window.removeEventListener('keydown', handleDown); window.removeEventListener('keyup', handleUp); }; }, []); // --- Helper: Collision --- const checkRectOverlap = (r1: GameObject, r2: GameObject) => { return ( r1.x < r2.x + r2.w && r1.x + r1.w > r2.x && r1.y < r2.y + r2.h && r1.y + r1.h > r2.y ); }; const getCollision = (rect: GameObject, excludeId?: number) => { const state = gameState.current; // Check Map for (const block of state.mapBlocks) { if (block.id !== excludeId && checkRectOverlap(rect, block)) return block; } // Check Base (if separate) // Check Enemies (if player) if (rect.type === 'player') { for (const enemy of state.enemies) { if (checkRectOverlap(rect, enemy)) return enemy; } } // Check Player (if enemy) if (rect.type === 'enemy') { if (checkRectOverlap(rect, state.player)) return state.player; // Enemies colliding with each other for (const other of state.enemies) { if (other.id !== rect.id && checkRectOverlap(rect, other)) return other; } } // Bounds if (rect.x < 0 || rect.x + rect.w > VIEW_WIDTH || rect.y < 0 || rect.y + rect.h > VIEW_HEIGHT) { return { type: 'wall' } as GameObject; } return null; }; const spawnParticle = (x: number, y: number, color: string, count: number = 5) => { for(let i=0; i { initGame(); let rafId: number; const loop = (time: number) => { const state = gameState.current; if (state.gameOver) { if (gameStatus !== 'gameover') setGameStatus('gameover'); return; } const delta = time - state.lastTime; state.lastTime = time; state.frameCount++; // 1. Player Logic const player = state.player; const keys = state.keys; let moving = false; let nextX = player.x; let nextY = player.y; // Movement if (keys['ArrowUp'] || keys['w']) { player.dir = 0; nextY -= player.speed; moving = true; } else if (keys['ArrowDown'] || keys['s']) { player.dir = 2; nextY += player.speed; moving = true; } else if (keys['ArrowLeft'] || keys['a']) { player.dir = 3; nextX -= player.speed; moving = true; } else if (keys['ArrowRight'] || keys['d']) { player.dir = 1; nextX += player.speed; moving = true; } player.moving = moving; // Apply Movement with Collision if (moving) { // Try X const testX = { ...player, x: nextX, y: player.y }; if (!getCollision(testX, player.id)) { player.x = nextX; } // Try Y (Independent axis movement for smoothness, but classic tank usually locks axis. // For better feel here, we lock axis if changing direction, but let's stick to simple checks) // Re-calculate based on successful X move const testY = { ...player, x: player.x, y: nextY }; // We only move in the direction faced usually. // Strict Retro Movement: Only move in facing direction if (player.dir === 0 || player.dir === 2) { const testV = { ...player, y: nextY }; if (!getCollision(testV, player.id)) player.y = nextY; } else { const testH = { ...player, x: nextX }; if (!getCollision(testH, player.id)) player.x = nextX; } } // Shooting if (player.cooldown > 0) player.cooldown--; // Auto fire or key press? Request says "Auto fire" but usually "Auto fire" means holding key or automatic. // Let's make it automatic periodic fire if key is held or just always auto fire for "Tech" feel? // "Control tank moving, tank automatically fires bullets" -> Always firing when cooldown ready. if (player.cooldown <= 0) { const bx = player.x + 12 + DIRS[player.dir].x * 20; const by = player.y + 12 + DIRS[player.dir].y * 20; state.bullets.push({ id: Math.random(), x: bx, y: by, w: 8, h: 8, type: 'bullet', dir: player.dir, speed: 6 + (player.bulletLevel * 2), owner: 'player', power: player.bulletLevel }); player.cooldown = 30 - (player.bulletLevel * 5); // Faster fire rate with level } // 2. Enemy Logic state.enemySpawnTimer++; if (state.enemies.length < 4 && state.enemySpawnTimer > 100) { // Spawn Enemy const spawnPoints = [{x: 0, y: 0}, {x: VIEW_WIDTH/2, y: 0}, {x: VIEW_WIDTH-40, y: 0}]; const pt = spawnPoints[Math.floor(Math.random()*spawnPoints.length)]; const newEnemy: Tank = { id: Math.random(), x: pt.x, y: pt.y, w: 32, h: 32, type: 'enemy', dir: 2, speed: 2, cooldown: 50, bulletLevel: 1, moving: true }; // Check spawn collision if (!getCollision(newEnemy)) { state.enemies.push(newEnemy); state.enemySpawnTimer = 0; } } state.enemies.forEach(enemy => { // AI: Move forward, if hit wall, random turn. // Chance to turn randomly if (Math.random() < 0.02) enemy.dir = Math.floor(Math.random() * 4); let ex = enemy.x; let ey = enemy.y; if (enemy.dir === 0) ey -= enemy.speed; if (enemy.dir === 1) ex += enemy.speed; if (enemy.dir === 2) ey += enemy.speed; if (enemy.dir === 3) ex -= enemy.speed; const testE = { ...enemy, x: ex, y: ey }; if (!getCollision(testE, enemy.id)) { enemy.x = ex; enemy.y = ey; } else { enemy.dir = Math.floor(Math.random() * 4); // Turn on collision } // Enemy Shoot if (enemy.cooldown > 0) enemy.cooldown--; else { const bx = enemy.x + 12 + DIRS[enemy.dir].x * 20; const by = enemy.y + 12 + DIRS[enemy.dir].y * 20; state.bullets.push({ id: Math.random(), x: bx, y: by, w: 8, h: 8, type: 'bullet', dir: enemy.dir, speed: 5, owner: 'enemy', power: 1 }); enemy.cooldown = 100 + Math.random() * 50; } }); // 3. Bullet Logic for (let i = state.bullets.length - 1; i >= 0; i--) { const b = state.bullets[i]; b.x += DIRS[b.dir].x * b.speed!; b.y += DIRS[b.dir].y * b.speed!; // Collision Check const hit = getCollision(b, -1); // -1 dummy ID if (hit) { b.markedForDeletion = true; spawnParticle(b.x, b.y, '#fbbf24', 3); // Spark if (hit.type === 'brick') { hit.markedForDeletion = true; spawnParticle(hit.x + 20, hit.y + 20, '#ea580c', 5); } if (hit.type === 'base') { state.baseIntegrity = 0; state.gameOver = true; spawnParticle(hit.x + 20, hit.y + 20, '#ef4444', 50); // Big Boom } if (hit.type === 'enemy' && b.owner === 'player') { hit.markedForDeletion = true; state.score += 100; spawnParticle(hit.x+16, hit.y+16, '#a855f7', 10); // Spawn Powerup Logic if (Math.random() < 0.4) { // 40% chance state.powerups.push({ id: Math.random(), x: Math.random() * (VIEW_WIDTH - 40), y: Math.random() * (VIEW_HEIGHT - 40), w: 24, h: 24, type: 'powerup' }); } } if (hit.type === 'player' && b.owner === 'enemy') { // Simple: One hit kill or HP? Classic is 1 hit. // Let's give player a shield or just game over. state.gameOver = true; spawnParticle(hit.x+16, hit.y+16, '#06b6d4', 20); } // Bullets destroy each other? (Optional, skip for now) } } // 4. Powerup Logic for (let i = state.powerups.length - 1; i >= 0; i--) { const p = state.powerups[i]; if (checkRectOverlap(player, p)) { p.markedForDeletion = true; player.bulletLevel = Math.min(player.bulletLevel + 1, 3); state.score += 500; spawnParticle(p.x+12, p.y+12, '#ffffff', 10); } } // 5. Cleanup state.bullets = state.bullets.filter(b => !b.markedForDeletion); state.mapBlocks = state.mapBlocks.filter(b => !b.markedForDeletion); state.enemies = state.enemies.filter(e => !e.markedForDeletion); state.powerups = state.powerups.filter(p => !p.markedForDeletion); // Particle cleanup state.particles.forEach(p => { p.life -= 0.05; p.x += (Math.random() - 0.5) * 2; p.y += (Math.random() - 0.5) * 2; }); state.particles = state.particles.filter(p => p.life > 0); // Trigger Render setRenderTrigger(prev => prev + 1); rafId = requestAnimationFrame(() => loop(performance.now())); }; rafId = requestAnimationFrame(() => loop(performance.now())); return () => cancelAnimationFrame(rafId); }, []); // Run once // --- Rendering Helpers --- const state = gameState.current; // Memoize static background grid to avoid heavy SVG dom thrashing const GridLines = useMemo(() => ( ), []); return (

坦克大战 NEON CORE

得分 SCORE: {state.score.toString().padStart(6, '0')}

火力 POWER: LV.{state.player.bulletLevel}

{/* UI Overlays */} {gameStatus === 'gameover' && (

任务失败

BASE DESTROYED // 基地已毁

)} {/* Controls Hint */}

操作: 方向键 / WASD 移动
机制: 自动射击 | 拾取 ★ 升级

); }