[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" interface Position { x: number y: number } interface Player { x: number y: number direction: "up" | "down" | "left" | "right" trail: Position[] alive: boolean color: string } const GRID_SIZE = 4 const CANVAS_WIDTH = 800 const CANVAS_HEIGHT = 600 const PLAYER_SPEED = 16 // Made 2x faster (was 33ms, now 16ms) const AI_SPEED = 20 // Made AI 2x faster to match (was 40ms, now 20ms) export default function TronGame() { const canvasRef = useRef(null) const [gameState, setGameState] = useState<"menu" | "playing" | "gameOver" | "levelComplete">("menu") const [level, setLevel] = useState(1) const [score, setScore] = useState(0) const [player, setPlayer] = useState({ x: 100, y: 300, direction: "right", trail: [], alive: true, color: "#00ffff", }) const [aiPlayers, setAiPlayers] = useState([]) const [keys, setKeys] = useState>(new Set()) const initializeLevel = useCallback(() => { const newPlayer: Player = { x: 100, y: 300, direction: "right", trail: [{ x: 100, y: 300 }], alive: true, color: "#00ffff", } const newAiPlayers: Player[] = [] const colors = ["#ff0080", "#80ff00", "#ff8000", "#8000ff", "#ff4000", "#00ff80", "#ff0040"] const numOpponents = Math.min(3 + (level - 1), 7) // Cap at 7 total opponents for (let i = 0; i < numOpponents; i++) { newAiPlayers.push({ x: 700 - (i % 3) * 50, y: 150 + (i % 3) * 150 + Math.floor(i / 3) * 100, direction: "left", trail: [{ x: 700 - (i % 3) * 50, y: 150 + (i % 3) * 150 + Math.floor(i / 3) * 100 }], alive: true, color: colors[i % colors.length], }) } setPlayer(newPlayer) setAiPlayers(newAiPlayers) setGameState("playing") }, [level]) const checkCollision = useCallback( (x: number, y: number, excludePlayer?: Player) => { // Check bounds if (x < 0 || x >= CANVAS_WIDTH || y < 0 || y >= CANVAS_HEIGHT) { return true } // Check trail collisions including own trail const allPlayers = [player, ...aiPlayers] for (const p of allPlayers) { if (!p.alive || p === excludePlayer) continue // Added excludePlayer check to prevent AI friendly fire for (const trail of p.trail) { if (Math.abs(trail.x - x) < GRID_SIZE && Math.abs(trail.y - y) < GRID_SIZE) { return true } } } return false }, [player, aiPlayers], ) const isTrapped = useCallback( (ai: Player, lookAheadSteps = 3) => { const directions = ["up", "down", "left", "right"] as const for (const dir of directions) { let canEscape = true let testX = ai.x let testY = ai.y for (let step = 1; step <= lookAheadSteps; step++) { switch (dir) { case "up": testY = ai.y - GRID_SIZE * step break case "down": testY = ai.y + GRID_SIZE * step break case "left": testX = ai.x - GRID_SIZE * step break case "right": testX = ai.x + GRID_SIZE * step break } if (checkCollision(testX, testY)) { canEscape = false break } } if (canEscape) { return false } } return true }, [checkCollision], ) const movePlayer = useCallback( (p: Player, newDirection?: string) => { if (!p.alive) return p const direction = newDirection || p.direction let newX = p.x let newY = p.y switch (direction) { case "up": newY -= GRID_SIZE break case "down": newY += GRID_SIZE break case "left": newX -= GRID_SIZE break case "right": newX += GRID_SIZE break } if (checkCollision(newX, newY)) { return { ...p, alive: false } } return { ...p, x: newX, y: newY, direction: direction as any, trail: [...p.trail, { x: newX, y: newY }], } }, [checkCollision], ) const getAiDirection = useCallback( (ai: Player, playerPos: Player, allAi: Player[], aiIndex: number) => { const directions = ["up", "down", "left", "right"] as const if (isTrapped(ai, 2)) { console.log(`[v0] AI ${aiIndex} is trapped, stopping to avoid back-and-forth`) return ai.direction // This will cause immediate collision } const safeDirections = directions.filter((dir) => { let testX = ai.x, testY = ai.y // Test multiple steps ahead for safety for (let step = 1; step <= 5; step++) { switch (dir) { case "up": testY = ai.y - GRID_SIZE * step break case "down": testY = ai.y + GRID_SIZE * step break case "left": testX = ai.x - GRID_SIZE * step break case "right": testX = ai.x + GRID_SIZE * step break } // Check bounds first if (testX < 0 || testX >= CANVAS_WIDTH || testY < 0 || testY >= CANVAS_HEIGHT) { return false } // Check collision with player trail only const wouldHitPlayerTrail = player.trail.some( (pos) => Math.abs(pos.x - testX) < GRID_SIZE && Math.abs(pos.y - testY) < GRID_SIZE, ) // Check collision with ANY AI trail (including own and teammates) const wouldHitAnyAITrail = allAi.some((ally) => { if (!ally.alive) return false return ally.trail.some((pos) => Math.abs(pos.x - testX) < GRID_SIZE && Math.abs(pos.y - testY) < GRID_SIZE) }) if (wouldHitPlayerTrail || wouldHitAnyAITrail) { return false } } return true }) if (safeDirections.length === 0) { console.log(`[v0] AI ${aiIndex} has no safe moves, will self-destruct`) return ai.direction // Will cause collision and death } const teamSafeDirections = safeDirections.filter((dir) => { let testX = ai.x, testY = ai.y switch (dir) { case "up": testY -= GRID_SIZE break case "down": testY += GRID_SIZE break case "left": testX -= GRID_SIZE break case "right": testX += GRID_SIZE break } // Predict if this move would interfere with any teammate's path return !allAi.some((ally, allyIndex) => { if (allyIndex === aiIndex || !ally.alive) return false // Check if we'd be too close to ally's current position const tooCloseToAlly = Math.abs(testX - ally.x) < GRID_SIZE * 3 && Math.abs(testY - ally.y) < GRID_SIZE * 3 // Predict ally's next several moves const allyPredictedPath = [] let allyX = ally.x, allyY = ally.y for (let steps = 1; steps <= 8; steps++) { switch (ally.direction) { case "up": allyY -= GRID_SIZE break case "down": allyY += GRID_SIZE break case "left": allyX -= GRID_SIZE break case "right": allyX += GRID_SIZE break } allyPredictedPath.push({ x: allyX, y: allyY }) } // Check if our move would cross ally's predicted path const wouldCrossAllyPath = allyPredictedPath.some( (pos) => Math.abs(testX - pos.x) < GRID_SIZE * 2 && Math.abs(testY - pos.y) < GRID_SIZE * 2, ) return tooCloseToAlly || wouldCrossAllyPath }) }) const finalSafeDirections = teamSafeDirections.length > 0 ? teamSafeDirections : safeDirections const aliveAi = allAi.filter((a) => a.alive) const distToPlayer = Math.abs(ai.x - playerPos.x) + Math.abs(ai.y - playerPos.y) if (aliveAi.length >= 2) { const playerQuadrant = { x: playerPos.x > CANVAS_WIDTH / 2 ? "right" : "left", y: playerPos.y > CANVAS_HEIGHT / 2 ? "bottom" : "top", } // AI 0: Master Interceptor - predicts and cuts off player if (aiIndex === 0) { const predictedMoves = 20 // Increased prediction depth let predX = playerPos.x, predY = playerPos.y for (let i = 0; i < predictedMoves; i++) { switch (playerPos.direction) { case "up": predY -= GRID_SIZE break case "down": predY += GRID_SIZE break case "left": predX -= GRID_SIZE break case "right": predX += GRID_SIZE break } } const interceptDirections = finalSafeDirections.filter((dir) => { let testX = ai.x, testY = ai.y switch (dir) { case "up": testY -= GRID_SIZE break case "down": testY += GRID_SIZE break case "left": testX -= GRID_SIZE break case "right": testX += GRID_SIZE break } const newDist = Math.abs(testX - predX) + Math.abs(testY - predY) const currentDist = Math.abs(ai.x - predX) + Math.abs(ai.y - predY) return newDist < currentDist }) if (interceptDirections.length > 0) { return interceptDirections[0] } } // AI 1: Strategic Herder - blocks escape routes else if (aiIndex === 1) { const escapeRoutes = directions.map((dir) => { let escapeX = playerPos.x, escapeY = playerPos.y const steps = 25 // Deep analysis for (let step = 1; step <= steps; step++) { switch (dir) { case "up": escapeY -= GRID_SIZE break case "down": escapeY += GRID_SIZE break case "left": escapeX -= GRID_SIZE break case "right": escapeX += GRID_SIZE break } if (checkCollision(escapeX, escapeY)) { return { dir, blocked: true, priority: 0 } } } const distFromAI = Math.abs(ai.x - escapeX) + Math.abs(ai.y - escapeY) return { dir, blocked: false, priority: 1000 - distFromAI } }) const bestEscapeRoute = escapeRoutes .filter((route) => !route.blocked) .sort((a, b) => b.priority - a.priority)[0] if (bestEscapeRoute) { const blockingDirections = finalSafeDirections.filter((dir) => { let testX = ai.x, testY = ai.y switch (dir) { case "up": testY -= GRID_SIZE break case "down": testY += GRID_SIZE break case "left": testX -= GRID_SIZE break case "right": testX += GRID_SIZE break } let targetX = playerPos.x, targetY = playerPos.y for (let i = 0; i < 25; i++) { switch (bestEscapeRoute.dir) { case "up": targetY -= GRID_SIZE break case "down": targetY += GRID_SIZE break case "left": targetX -= GRID_SIZE break case "right": targetX += GRID_SIZE break } } const newDist = Math.abs(testX - targetX) + Math.abs(testY - targetY) const currentDist = Math.abs(ai.x - targetX) + Math.abs(ai.y - targetY) return newDist < currentDist }) if (blockingDirections.length > 0) { return blockingDirections[0] } } } // AI 2+: Coordinated Flankers - create inescapable formations else { const otherAIs = aliveAi.filter((_, i) => i !== aiIndex) if (otherAIs.length > 0) { const teamCenter = { x: otherAIs.reduce((sum, ai) => sum + ai.x, 0) / otherAIs.length, y: otherAIs.reduce((sum, ai) => sum + ai.y, 0) / otherAIs.length, } // Create strategic position relative to team formation const formationAngle = (aiIndex - 2) * ((Math.PI * 2) / Math.max(aliveAi.length - 2, 1)) const formationRadius = 120 const targetX = playerPos.x + Math.cos(formationAngle) * formationRadius const targetY = playerPos.y + Math.sin(formationAngle) * formationRadius const formationDirections = finalSafeDirections.filter((dir) => { let testX = ai.x, testY = ai.y switch (dir) { case "up": testY -= GRID_SIZE break case "down": testY += GRID_SIZE break case "left": testX -= GRID_SIZE break case "right": testX += GRID_SIZE break } const newDist = Math.abs(testX - targetX) + Math.abs(testY - targetY) const currentDist = Math.abs(ai.x - targetX) + Math.abs(ai.y - targetY) return newDist < currentDist }) if (formationDirections.length > 0) { return formationDirections[0] } } } } const spaciousMoves = finalSafeDirections.filter((dir) => { let testX = ai.x, testY = ai.y switch (dir) { case "up": testY -= GRID_SIZE break case "down": testY += GRID_SIZE break case "left": testX -= GRID_SIZE break case "right": testX += GRID_SIZE break } const distanceFromCenter = Math.abs(testX - CANVAS_WIDTH / 2) + Math.abs(testY - CANVAS_HEIGHT / 2) const currentDistanceFromCenter = Math.abs(ai.x - CANVAS_WIDTH / 2) + Math.abs(ai.y - CANVAS_HEIGHT / 2) return distanceFromCenter > currentDistanceFromCenter * 0.8 }) return spaciousMoves.length > 0 ? spaciousMoves[0] : finalSafeDirections[0] }, [checkCollision, isTrapped, player], ) const gameLoop = useCallback(() => { if (gameState !== "playing") return let newDirection = player.direction if ((keys.has("ArrowUp") || keys.has("KeyW")) && player.direction !== "down") newDirection = "up" if ((keys.has("ArrowDown") || keys.has("KeyS")) && player.direction !== "up") newDirection = "down" if ((keys.has("ArrowLeft") || keys.has("KeyA")) && player.direction !== "right") newDirection = "left" if ((keys.has("ArrowRight") || keys.has("KeyD")) && player.direction !== "left") newDirection = "right" setPlayer((prev) => movePlayer(prev, newDirection)) setAiPlayers((prev) => prev.map((ai, index) => { if (!ai.alive) return ai const newDir = getAiDirection(ai, player, prev, index) return movePlayer(ai, newDir) }), ) // Check win/lose conditions const aliveAi = aiPlayers.filter((ai) => ai.alive).length if (aliveAi === 0) { setGameState("levelComplete") setLevel((prev) => prev + 1) setScore((prev) => prev + 1000 * level) // Score based on level completion } else if (!player.alive) { setGameState("gameOver") } }, [gameState, keys, player, aiPlayers, movePlayer, getAiDirection, level]) const draw = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.fillStyle = "#000011" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) // Draw grid ctx.strokeStyle = "#001122" ctx.lineWidth = 1 for (let x = 0; x < CANVAS_WIDTH; x += GRID_SIZE * 4) { ctx.beginPath() ctx.moveTo(x, 0) ctx.lineTo(x, CANVAS_HEIGHT) ctx.stroke() } for (let y = 0; y < CANVAS_HEIGHT; y += GRID_SIZE * 4) { ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(CANVAS_WIDTH, y) ctx.stroke() } // Draw trails and players const allPlayers = [player, ...aiPlayers] allPlayers.forEach((p) => { if (!p.alive) return // Draw trail with glow effect ctx.strokeStyle = p.color ctx.lineWidth = 3 ctx.shadowColor = p.color ctx.shadowBlur = 5 ctx.beginPath() p.trail.forEach((pos, i) => { if (i === 0) ctx.moveTo(pos.x, pos.y) else ctx.lineTo(pos.x, pos.y) }) ctx.stroke() ctx.shadowBlur = 0 // Draw player with larger, more visible marker ctx.fillStyle = p.color ctx.fillRect(p.x - 3, p.y - 3, 6, 6) }) // Draw UI ctx.fillStyle = "#ffffff" ctx.font = "20px monospace" ctx.fillText(`Level: ${level}`, 10, 30) ctx.fillText(`Score: ${score}`, 10, 55) const aliveAi = aiPlayers.filter((ai) => ai.alive).length ctx.fillText(`Enemies: ${aliveAi}`, 10, 80) }, [player, aiPlayers, level, score]) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.code === "Space") { if (gameState === "menu" || gameState === "gameOver") { startGame() return } else if (gameState === "levelComplete") { nextLevel() return } } setKeys((prev) => new Set([...prev, e.code])) } const handleKeyUp = (e: KeyboardEvent) => { setKeys((prev) => { const newKeys = new Set(prev) newKeys.delete(e.code) return newKeys }) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [gameState]) useEffect(() => { if (gameState === "playing") { const gameInterval = setInterval(gameLoop, PLAYER_SPEED) return () => clearInterval(gameInterval) } }, [gameState, gameLoop]) useEffect(() => { const drawInterval = setInterval(draw, 16) // 60 FPS return () => clearInterval(drawInterval) }, [draw]) const startGame = () => { setLevel(1) setScore(0) initializeLevel() } const nextLevel = () => { initializeLevel() } return (

TRON: LIGHT CYCLES

Arrow keys or WASD to move • Spacebar to start • Outmaneuver the coordinated AI team

) }