import React, { useState, useCallback, useRef, useEffect } from 'react'; import { GameState, Enemy, Bullet, BulletParticle, Star, Player, MathQuestion, PowerUp, ActivePowerUp } from '../types/game'; import { generateMathQuestion, generateAnswerOptions } from '../utils/math'; import { checkCollision } from '../utils/collision'; import { getRandomPowerUpType, POWER_UP_CONFIGS } from '../utils/powerups'; import { useGameLoop } from '../hooks/useGameLoop'; import Starfield from './Starfield'; import PlayerShip from './PlayerShip'; import EnemyShip from './EnemyShip'; import BulletComponent from './BulletComponent'; import BulletParticles from './BulletParticles'; import PowerUpItem from './PowerUpItem'; import HUD from './HUD'; import MenuScreen from './MenuScreen'; import GameOverScreen from './GameOverScreen'; import FinalChallengeScreen from './FinalChallengeScreen'; import Explosion from './Explosion'; import FlashMessage from './FlashMessage'; import WarningOverlay from './WarningOverlay'; const GAME_WIDTH = 700; const GAME_HEIGHT = 700; const PLAYER_WIDTH = 50; const PLAYER_HEIGHT = 50; const ENEMY_WIDTH = 70; const ENEMY_HEIGHT = 55; const BULLET_WIDTH = 6; const BULLET_HEIGHT = 14; const BULLET_SPEED = 500; const ENEMY_BASE_SPEED = 40; const STAR_COUNT = 120; const ENEMY_COUNT = 4; const SHOOT_COOLDOWN = 0.25; const RAPID_FIRE_COOLDOWN = 0.08; const PLAYER_SPEED = 400; const POWERUP_SIZE = 36; const POWERUP_FALL_SPEED = 120; const WARNING_THRESHOLD = 550; const ENEMY_COLORS = ['#ff6b6b', '#ffd93d', '#6bcb77', '#4d96ff', '#ff6bff', '#ff9f43']; interface ExplosionData { id: string; x: number; y: number; color: string; duration: number; elapsed: number; } interface Flash { message: string; color: string; duration: number; elapsed: number; } function createStars(): Star[] { return Array.from({ length: STAR_COUNT }, () => ({ x: Math.random() * GAME_WIDTH, y: Math.random() * GAME_HEIGHT, size: Math.random() * 2.5 + 0.5, speed: Math.random() * 40 + 10, opacity: Math.random() * 0.7 + 0.3, twinkleSpeed: Math.random() * 3 + 1, twinklePhase: Math.random() * Math.PI * 2, })); } function spawnEnemyWave(question: MathQuestion, wave: number): Enemy[] { const answers = generateAnswerOptions(question.correctAnswer, ENEMY_COUNT); const spacing = GAME_WIDTH / (ENEMY_COUNT + 1); return answers.map((answer, i) => { const baseX = spacing * (i + 1) - ENEMY_WIDTH / 2; return { id: `enemy-${Date.now()}-${i}`, x: baseX, y: -ENEMY_HEIGHT - Math.random() * 40, width: ENEMY_WIDTH, height: ENEMY_HEIGHT, answer, isCorrect: answer === question.correctAnswer, color: ENEMY_COLORS[i % ENEMY_COLORS.length], speed: ENEMY_BASE_SPEED + wave * 5 + Math.random() * 10, dodgeSpeed: 80 + wave * 10 + Math.random() * 40, dodgeReactionRadius: 120, sineOffset: Math.random() * Math.PI * 2, sineSpeed: 1.5 + Math.random() * 1.5, sineAmplitude: 15 + Math.random() * 15, baseX, }; }); } export default function Game() { const containerRef = useRef(null); const gameTimeRef = useRef(0); const [gameState, setGameState] = useState('menu'); const [score, setScore] = useState(0); const [lives, setLives] = useState(3); const [wave, setWave] = useState(1); const [streak, setStreak] = useState(0); const [gameTime, setGameTime] = useState(0); const [engineFlicker, setEngineFlicker] = useState(false); const [screenShake, setScreenShake] = useState({ x: 0, y: 0 }); const [warningActive, setWarningActive] = useState(false); const [stars] = useState(() => createStars()); const starsRef = useRef(stars); const [player, setPlayer] = useState({ x: GAME_WIDTH / 2 - PLAYER_WIDTH / 2, y: GAME_HEIGHT - PLAYER_HEIGHT - 20, width: PLAYER_WIDTH, height: PLAYER_HEIGHT, }); const [bullets, setBullets] = useState([]); const [bulletParticles, setBulletParticles] = useState([]); const [enemies, setEnemies] = useState([]); const [question, setQuestion] = useState(() => generateMathQuestion(1)); const [explosions, setExplosions] = useState([]); const [flash, setFlash] = useState(null); const [powerUps, setPowerUps] = useState([]); const [activePowerUps, setActivePowerUps] = useState([]); const [hasShield, setHasShield] = useState(false); const playerRef = useRef(player); const bulletsRef = useRef(bullets); const enemiesRef = useRef(enemies); const questionRef = useRef(question); const scoreRef = useRef(score); const livesRef = useRef(lives); const waveRef = useRef(wave); const streakRef = useRef(streak); const explosionsRef = useRef(explosions); const flashRef = useRef(flash); const powerUpsRef = useRef(powerUps); const activePowerUpsRef = useRef(activePowerUps); const hasShieldRef = useRef(hasShield); const shootCooldownRef = useRef(0); const waveSpawnTimerRef = useRef(null); const gameStateRef = useRef(gameState); const screenShakeTimerRef = useRef(0); const bulletParticlesRef = useRef(bulletParticles); const particleIdRef = useRef(0); const keysRef = useRef>(new Set()); const mouseXRef = useRef(null); const useMouseRef = useRef(false); // Score ref for final challenge const finalChallengeScoreRef = useRef(0); const finalChallengeWaveRef = useRef(1); useEffect(() => { playerRef.current = player; }, [player]); useEffect(() => { bulletsRef.current = bullets; }, [bullets]); useEffect(() => { enemiesRef.current = enemies; }, [enemies]); useEffect(() => { questionRef.current = question; }, [question]); useEffect(() => { scoreRef.current = score; }, [score]); useEffect(() => { livesRef.current = lives; }, [lives]); useEffect(() => { waveRef.current = wave; }, [wave]); useEffect(() => { streakRef.current = streak; }, [streak]); useEffect(() => { explosionsRef.current = explosions; }, [explosions]); useEffect(() => { flashRef.current = flash; }, [flash]); useEffect(() => { gameStateRef.current = gameState; }, [gameState]); useEffect(() => { powerUpsRef.current = powerUps; }, [powerUps]); useEffect(() => { activePowerUpsRef.current = activePowerUps; }, [activePowerUps]); useEffect(() => { hasShieldRef.current = hasShield; }, [hasShield]); useEffect(() => { bulletParticlesRef.current = bulletParticles; }, [bulletParticles]); const hasActivePowerUp = useCallback((type: string): boolean => { return activePowerUpsRef.current.some((ap) => ap.type === type); }, []); const shoot = useCallback(() => { if (shootCooldownRef.current > 0) return; const p = playerRef.current; const newBullet: Bullet = { id: `bullet-${Date.now()}-${Math.random()}`, x: p.x + p.width / 2 - BULLET_WIDTH / 2, y: p.y - BULLET_HEIGHT, width: BULLET_WIDTH, height: BULLET_HEIGHT, speed: BULLET_SPEED, }; setBullets((prev) => [...prev, newBullet]); shootCooldownRef.current = hasActivePowerUp('rapid_fire') ? RAPID_FIRE_COOLDOWN : SHOOT_COOLDOWN; }, [hasActivePowerUp]); const triggerScreenShake = useCallback(() => { screenShakeTimerRef.current = 0.4; }, []); const scheduleNewWave = useCallback((nextWave: number, isAdvance: boolean) => { if (waveSpawnTimerRef.current !== null) return; waveSpawnTimerRef.current = window.setTimeout(() => { waveSpawnTimerRef.current = null; if (gameStateRef.current !== 'playing') return; const w = isAdvance ? nextWave : waveRef.current; if (isAdvance) { setWave(w); } const nq = generateMathQuestion(w); setQuestion(nq); setEnemies(spawnEnemyWave(nq, w)); }, 800); }, []); const startGame = useCallback(() => { if (waveSpawnTimerRef.current !== null) { clearTimeout(waveSpawnTimerRef.current); waveSpawnTimerRef.current = null; } setScore(0); setLives(3); setWave(1); setStreak(0); setBullets([]); setBulletParticles([]); setExplosions([]); setFlash(null); setPowerUps([]); setActivePowerUps([]); setHasShield(false); setWarningActive(false); setScreenShake({ x: 0, y: 0 }); screenShakeTimerRef.current = 0; gameTimeRef.current = 0; setGameTime(0); setPlayer({ x: GAME_WIDTH / 2 - PLAYER_WIDTH / 2, y: GAME_HEIGHT - PLAYER_HEIGHT - 20, width: PLAYER_WIDTH, height: PLAYER_HEIGHT, }); const q = generateMathQuestion(1); setQuestion(q); setEnemies(spawnEnemyWave(q, 1)); setGameState('playing'); }, []); const handleFinalChallengeCorrect = useCallback(() => { setLives(1); setGameState('playing'); setFlash({ message: '🎉 LIFE RESTORED!', color: '#00ff88', duration: 1.5, elapsed: 0 }); // Respawn a wave const w = waveRef.current; const nq = generateMathQuestion(w); setQuestion(nq); setEnemies(spawnEnemyWave(nq, w)); }, []); const handleFinalChallengeWrong = useCallback(() => { setGameState('gameover'); }, []); // Keyboard events useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { keysRef.current.add(e.key); useMouseRef.current = false; if (e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); if (gameState === 'playing') shoot(); } }; const handleKeyUp = (e: KeyboardEvent) => { keysRef.current.delete(e.key); }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, [gameState, shoot]); // Mouse events useEffect(() => { const container = containerRef.current; if (!container) return; const handleMouseMove = (e: MouseEvent) => { const rect = container.getBoundingClientRect(); mouseXRef.current = ((e.clientX - rect.left) / rect.width) * GAME_WIDTH; useMouseRef.current = true; }; const handleClick = () => { if (gameState === 'playing') shoot(); }; container.addEventListener('mousemove', handleMouseMove); container.addEventListener('click', handleClick); return () => { container.removeEventListener('mousemove', handleMouseMove); container.removeEventListener('click', handleClick); }; }, [gameState, shoot]); // Clean up wave timer on unmount useEffect(() => { return () => { if (waveSpawnTimerRef.current !== null) { clearTimeout(waveSpawnTimerRef.current); waveSpawnTimerRef.current = null; } }; }, []); const gameLoop = useCallback( (dt: number) => { gameTimeRef.current += dt; setGameTime(gameTimeRef.current); // Engine flicker setEngineFlicker(Math.sin(gameTimeRef.current * 15) > 0); // Screen shake if (screenShakeTimerRef.current > 0) { screenShakeTimerRef.current -= dt; const intensity = Math.min(screenShakeTimerRef.current * 20, 8); setScreenShake({ x: (Math.random() - 0.5) * intensity, y: (Math.random() - 0.5) * intensity, }); } else { setScreenShake({ x: 0, y: 0 }); } // Update shoot cooldown if (shootCooldownRef.current > 0) { shootCooldownRef.current -= dt; } // Update active power-ups setActivePowerUps((prev) => { const updated = prev .map((ap) => ({ ...ap, remainingTime: ap.totalTime > 0 ? ap.remainingTime - dt : ap.remainingTime, })) .filter((ap) => ap.totalTime === 0 || ap.remainingTime > 0); return updated; }); // Update stars const currentStars = starsRef.current; for (let i = 0; i < currentStars.length; i++) { currentStars[i].y += currentStars[i].speed * dt; if (currentStars[i].y > GAME_HEIGHT) { currentStars[i].y = -2; currentStars[i].x = Math.random() * GAME_WIDTH; } } // Move player let px = playerRef.current.x; if (useMouseRef.current && mouseXRef.current !== null) { const targetX = mouseXRef.current - PLAYER_WIDTH / 2; const diff = targetX - px; const maxMove = PLAYER_SPEED * dt; if (Math.abs(diff) > maxMove) { px += Math.sign(diff) * maxMove; } else { px = targetX; } } else { if (keysRef.current.has('ArrowLeft') || keysRef.current.has('a')) { px -= PLAYER_SPEED * dt; } if (keysRef.current.has('ArrowRight') || keysRef.current.has('d')) { px += PLAYER_SPEED * dt; } } px = Math.max(0, Math.min(GAME_WIDTH - PLAYER_WIDTH, px)); if (px !== playerRef.current.x) { setPlayer((p) => ({ ...p, x: px })); } // Move bullets setBullets((prev) => { const next = prev .map((b) => ({ ...b, y: b.y - b.speed * dt })) .filter((b) => b.y + b.height > -10); return next; }); // Generate bullet particles const currentBullets = bulletsRef.current; const newParticles: BulletParticle[] = []; for (const b of currentBullets) { if (Math.random() < 0.6) { particleIdRef.current++; newParticles.push({ id: `bp-${particleIdRef.current}`, x: b.x + b.width / 2 + (Math.random() - 0.5) * 4, y: b.y + b.height, size: Math.random() * 3 + 1.5, opacity: 0.7 + Math.random() * 0.3, life: 0, maxLife: 0.2 + Math.random() * 0.15, }); } } // Update bullet particles setBulletParticles((prev) => { const updated = [...prev, ...newParticles] .map((p) => ({ ...p, life: p.life + dt, y: p.y + 60 * dt })) .filter((p) => p.life < p.maxLife); return updated; }); // Move enemies with dodging & sine wave const bulletsCurrent = bulletsRef.current; let enemiesReachedBottom = false; let anyNearBottom = false; setEnemies((prev) => { const next = prev.map((e) => { let newY = e.y + e.speed * dt; let newBaseX = e.baseX; // Sine wave horizontal motion const sineX = Math.sin(gameTimeRef.current * e.sineSpeed + e.sineOffset) * e.sineAmplitude; // Dodge bullets let dodgeForce = 0; for (const bullet of bulletsCurrent) { const bulletCenterX = bullet.x + bullet.width / 2; const enemyCenterX = e.x + e.width / 2; const horizontalDist = Math.abs(bulletCenterX - enemyCenterX); const verticalDist = e.y + e.height - bullet.y; if (horizontalDist < e.dodgeReactionRadius && verticalDist > 0 && verticalDist < 180) { // Calculate dodge direction: move away from bullet const direction = bulletCenterX > enemyCenterX ? -1 : 1; const proximity = 1 - horizontalDist / e.dodgeReactionRadius; dodgeForce += direction * proximity * e.dodgeSpeed * dt; } } newBaseX += dodgeForce; newBaseX = Math.max(0, Math.min(GAME_WIDTH - e.width, newBaseX)); let finalX = newBaseX + sineX; finalX = Math.max(0, Math.min(GAME_WIDTH - e.width, finalX)); if (newY > GAME_HEIGHT) { enemiesReachedBottom = true; } if (newY > WARNING_THRESHOLD) { anyNearBottom = true; } return { ...e, y: newY, baseX: newBaseX, x: finalX }; }); return next; }); setWarningActive(anyNearBottom); // Move power-ups setPowerUps((prev) => { return prev .map((pu) => ({ ...pu, y: pu.y + POWERUP_FALL_SPEED * dt })) .filter((pu) => pu.y < GAME_HEIGHT + 50); }); // Check bullet-enemy collisions const currentEnemies = enemiesRef.current; const bulletsToRemove = new Set(); const enemiesToRemove = new Set(); const newExplosions: ExplosionData[] = []; let scoreChange = 0; let livesChange = 0; let newFlash: Flash | null = null; let hitCorrect = false; const newPowerUps: PowerUp[] = []; for (const bullet of currentBullets) { for (const enemy of currentEnemies) { if (bulletsToRemove.has(bullet.id) || enemiesToRemove.has(enemy.id)) continue; if (checkCollision(bullet, enemy)) { bulletsToRemove.add(bullet.id); enemiesToRemove.add(enemy.id); newExplosions.push({ id: `exp-${Date.now()}-${Math.random()}`, x: enemy.x + enemy.width / 2, y: enemy.y + enemy.height / 2, color: enemy.isCorrect ? '#00ff88' : '#ff4444', duration: 0.6, elapsed: 0, }); if (enemy.isCorrect) { hitCorrect = true; const newStreak = streakRef.current + 1; const isDoubleScore = activePowerUpsRef.current.some((ap) => ap.type === 'double_score'); let bonus = 100 + waveRef.current * 10 + (newStreak >= 2 ? newStreak * 15 : 0); if (isDoubleScore) bonus *= 2; scoreChange += bonus; newFlash = { message: newStreak >= 2 ? `+${bonus} 🔥 ${newStreak}x COMBO!${isDoubleScore ? ' (2x)' : ''}` : `+${bonus} CORRECT!${isDoubleScore ? ' (2x)' : ''}`, color: '#00ff88', duration: 1.2, elapsed: 0, }; setStreak(newStreak); // Remove all enemies for this wave for (const e of currentEnemies) { enemiesToRemove.add(e.id); } // Drop power-up from the correct enemy const puType = getRandomPowerUpType(); newPowerUps.push({ id: `pu-${Date.now()}-${Math.random()}`, x: enemy.x + enemy.width / 2 - POWERUP_SIZE / 2, y: enemy.y + enemy.height / 2, width: POWERUP_SIZE, height: POWERUP_SIZE, type: puType, speed: POWERUP_FALL_SPEED, }); } else { // Wrong answer hit if (hasShieldRef.current) { // Shield absorbs it setHasShield(false); setActivePowerUps((prev) => prev.filter((ap) => ap.type !== 'shield')); newFlash = { message: '🛡️ SHIELD BLOCKED!', color: '#00b4d8', duration: 1.0, elapsed: 0 }; } else { livesChange -= 1; newFlash = { message: 'WRONG!', color: '#ff4444', duration: 1.0, elapsed: 0 }; triggerScreenShake(); } setStreak(0); } } } } // Check player-powerup collisions const currentPowerUps = powerUpsRef.current; const puToRemove = new Set(); for (const pu of currentPowerUps) { if (checkCollision(playerRef.current, pu)) { puToRemove.add(pu.id); const config = POWER_UP_CONFIGS[pu.type]; if (pu.type === 'bomb') { // Destroy all enemies for (const e of enemiesRef.current) { if (!enemiesToRemove.has(e.id)) { enemiesToRemove.add(e.id); newExplosions.push({ id: `exp-bomb-${Date.now()}-${Math.random()}`, x: e.x + e.width / 2, y: e.y + e.height / 2, color: '#b44dff', duration: 0.8, elapsed: 0, }); } } newFlash = { message: '💥 BOMB!', color: '#b44dff', duration: 1.2, elapsed: 0 }; triggerScreenShake(); // After bomb, schedule new wave setTimeout(() => { if (gameStateRef.current === 'playing') { const w = waveRef.current; const nq = generateMathQuestion(w); setQuestion(nq); setEnemies(spawnEnemyWave(nq, w)); } }, 1000); } else if (pu.type === 'shield') { setHasShield(true); setActivePowerUps((prev) => { const filtered = prev.filter((ap) => ap.type !== 'shield'); return [...filtered, { type: 'shield', remainingTime: 0, totalTime: 0 }]; }); if (!newFlash) { newFlash = { message: '🛡️ SHIELD!', color: '#00b4d8', duration: 1.0, elapsed: 0 }; } } else if (pu.type === 'rapid_fire') { setActivePowerUps((prev) => { const filtered = prev.filter((ap) => ap.type !== 'rapid_fire'); return [...filtered, { type: 'rapid_fire', remainingTime: config.duration, totalTime: config.duration }]; }); if (!newFlash) { newFlash = { message: '🔥 RAPID FIRE!', color: '#ff6b35', duration: 1.0, elapsed: 0 }; } } else if (pu.type === 'double_score') { setActivePowerUps((prev) => { const filtered = prev.filter((ap) => ap.type !== 'double_score'); return [...filtered, { type: 'double_score', remainingTime: config.duration, totalTime: config.duration }]; }); if (!newFlash) { newFlash = { message: '⚡ DOUBLE SCORE!', color: '#ffd60a', duration: 1.0, elapsed: 0 }; } } } } if (puToRemove.size > 0) { setPowerUps((prev) => prev.filter((pu) => !puToRemove.has(pu.id))); } if (newPowerUps.length > 0) { setPowerUps((prev) => [...prev, ...newPowerUps]); } if (bulletsToRemove.size > 0) { setBullets((prev) => prev.filter((b) => !bulletsToRemove.has(b.id))); } if (enemiesToRemove.size > 0) { setEnemies((prev) => prev.filter((e) => !enemiesToRemove.has(e.id))); } if (newExplosions.length > 0) { setExplosions((prev) => [...prev, ...newExplosions]); } if (newFlash) { setFlash(newFlash); } if (scoreChange > 0) { setScore((s) => s + scoreChange); } if (livesChange < 0) { const newLives = livesRef.current + livesChange; setLives(newLives); if (newLives <= 0) { finalChallengeScoreRef.current = scoreRef.current + scoreChange; finalChallengeWaveRef.current = waveRef.current; setGameState('final_challenge'); return; } } if (enemiesReachedBottom) { if (hasShieldRef.current) { setHasShield(false); setActivePowerUps((prev) => prev.filter((ap) => ap.type !== 'shield')); setFlash({ message: '🛡️ SHIELD BLOCKED ESCAPE!', color: '#00b4d8', duration: 1.0, elapsed: 0 }); } else { const newLives = livesRef.current - 1; setLives(newLives); triggerScreenShake(); setFlash({ message: 'ENEMIES ESCAPED!', color: '#ff8800', duration: 1.0, elapsed: 0 }); if (newLives <= 0) { finalChallengeScoreRef.current = scoreRef.current; finalChallengeWaveRef.current = waveRef.current; setGameState('final_challenge'); return; } } setEnemies([]); setStreak(0); scheduleNewWave(waveRef.current, false); } // Update explosions setExplosions((prev) => prev .map((e) => ({ ...e, elapsed: e.elapsed + dt })) .filter((e) => e.elapsed < e.duration) ); // Update flash if (flashRef.current) { const newElapsed = flashRef.current.elapsed + dt; if (newElapsed >= flashRef.current.duration) { setFlash(null); } else { setFlash({ ...flashRef.current, elapsed: newElapsed }); } } // Check if wave is complete — spawn new wave const remainingEnemies = enemiesRef.current.filter( (e) => !enemiesToRemove.has(e.id) && e.y <= GAME_HEIGHT ); if (remainingEnemies.length === 0 && enemiesToRemove.size > 0 && !enemiesReachedBottom) { if (hitCorrect) { scheduleNewWave(waveRef.current + 1, true); } else { scheduleNewWave(waveRef.current, false); } } }, [scheduleNewWave, triggerScreenShake] ); useGameLoop(gameLoop, gameState === 'playing'); const isRapidFire = activePowerUps.some((ap) => ap.type === 'rapid_fire'); return (

{gameState === 'playing' && ( <> {enemies.map((enemy) => ( ))} {bullets.map((bullet) => ( ))} {powerUps.map((pu) => ( ))} {explosions.map((exp) => ( ))} {flash && ( )} )} {gameState === 'menu' && } {gameState === 'final_challenge' && ( )} {gameState === 'gameover' && ( )}

); }