[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import TankGame from "../tank-game" export default function Page() { return } [V0_FILE]typescriptreact:file="tank-game.tsx" isEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" interface Tank { id: number x: number y: number angle: number color: string health: number maxHealth: number size: number speed: number rotationSpeed: number lastShot: number shootCooldown: number powerUp: string | null powerUpExpiry: number } interface Projectile { id: number x: number y: number vx: number vy: number ownerId: number bounces: number maxBounces: number size: number speed: number type: "normal" | "oneshot" | "grenade" damage: number } interface Pickup { id: number x: number y: number type: "health" | "grenade" | "oneshot" size: number spawnTime: number } interface Wall { x: number y: number width: number height: number } interface GameState { tanks: Tank[] projectiles: Projectile[] pickups: Pickup[] walls: Wall[] gameWidth: number gameHeight: number gameOver: boolean winner: number | null lastPickupSpawn: number } const TANK_SIZE = 20 const PROJECTILE_SIZE = 4 const PROJECTILE_SPEED = 8 const MAX_BOUNCES = 5 const SHOOT_COOLDOWN = 500 // milliseconds const PICKUP_SPAWN_INTERVAL = 8000 // 8 seconds const POWERUP_DURATION = 15000 // 15 seconds export default function TankGame() { const canvasRef = useRef(null) const gameLoopRef = useRef() const keysRef = useRef>(new Set()) const [gameState, setGameState] = useState(null) const [gameStarted, setGameStarted] = useState(false) const generateMap = useCallback((width: number, height: number): Wall[] => { const walls: Wall[] = [] const cellSize = 40 const cols = Math.floor(width / cellSize) const rows = Math.floor(height / cellSize) // Border walls walls.push({ x: 0, y: 0, width: width, height: 20 }) walls.push({ x: 0, y: height - 20, width: width, height: 20 }) walls.push({ x: 0, y: 0, width: 20, height: height }) walls.push({ x: width - 20, y: 0, width: 20, height: height }) // Generate random interior walls for (let i = 0; i < 12; i++) { const x = Math.floor(Math.random() * (cols - 4)) * cellSize + cellSize * 2 const y = Math.floor(Math.random() * (rows - 4)) * cellSize + cellSize * 2 const w = (Math.floor(Math.random() * 3) + 1) * cellSize const h = (Math.floor(Math.random() * 3) + 1) * cellSize // Ensure walls don't overlap with spawn areas if (x > 100 && y > 100 && x < width - 100 && y < height - 100) { walls.push({ x, y, width: w, height: h }) } } // Add some strategic walls for puzzle elements walls.push({ x: width / 2 - 60, y: height / 2 - 20, width: 120, height: 40 }) walls.push({ x: width / 4, y: height / 4, width: 40, height: 80 }) walls.push({ x: (3 * width) / 4 - 40, y: (3 * height) / 4 - 80, width: 40, height: 80 }) return walls }, []) const spawnPickup = useCallback((gameState: GameState): Pickup | null => { const types: ("health" | "grenade" | "oneshot")[] = ["health", "grenade", "oneshot"] const type = types[Math.floor(Math.random() * types.length)] // Find a safe spawn location for (let attempts = 0; attempts < 50; attempts++) { const x = 50 + Math.random() * (gameState.gameWidth - 100) const y = 50 + Math.random() * (gameState.gameHeight - 100) // Check if location is clear of walls and tanks let clear = true // Check walls for (const wall of gameState.walls) { if (x > wall.x - 20 && x < wall.x + wall.width + 20 && y > wall.y - 20 && y < wall.y + wall.height + 20) { clear = false break } } // Check tanks if (clear) { for (const tank of gameState.tanks) { const distance = Math.sqrt(Math.pow(x - tank.x, 2) + Math.pow(y - tank.y, 2)) if (distance < 60) { clear = false break } } } if (clear) { return { id: Date.now() + Math.random(), x, y, type, size: 15, spawnTime: Date.now(), } } } return null }, []) const initializeGame = useCallback(() => { const width = 800 const height = 600 const tanks: Tank[] = [ { id: 1, x: 50, y: 50, angle: 0, color: "#ef4444", // red health: 100, maxHealth: 100, size: TANK_SIZE, speed: 3, rotationSpeed: 0.08, lastShot: 0, shootCooldown: SHOOT_COOLDOWN, powerUp: null, powerUpExpiry: 0, }, { id: 2, x: width - 50, y: 50, angle: Math.PI, color: "#3b82f6", // blue health: 100, maxHealth: 100, size: TANK_SIZE, speed: 3, rotationSpeed: 0.08, lastShot: 0, shootCooldown: SHOOT_COOLDOWN, powerUp: null, powerUpExpiry: 0, }, { id: 3, x: width / 2, y: height - 50, angle: -Math.PI / 2, color: "#22c55e", // green health: 100, maxHealth: 100, size: TANK_SIZE, speed: 3, rotationSpeed: 0.08, lastShot: 0, shootCooldown: SHOOT_COOLDOWN, powerUp: null, powerUpExpiry: 0, }, ] const walls = generateMap(width, height) setGameState({ tanks, projectiles: [], pickups: [], walls, gameWidth: width, gameHeight: height, gameOver: false, winner: null, lastPickupSpawn: Date.now(), }) setGameStarted(true) }, [generateMap]) const checkCollision = (rect1: any, rect2: any) => { return ( rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y ) } const explodeGrenade = (x: number, y: number, ownerId: number, tanks: Tank[]) => { const explosionRadius = 80 tanks.forEach((tank) => { if (tank.id !== ownerId) { const distance = Math.sqrt(Math.pow(x - tank.x, 2) + Math.pow(y - tank.y, 2)) if (distance < explosionRadius) { const damage = Math.max(20, 50 - (distance / explosionRadius) * 30) tank.health -= damage } } }) } const updateGame = useCallback(() => { if (!gameState || gameState.gameOver) return setGameState((prevState) => { if (!prevState) return prevState const newState = { ...prevState } const keys = keysRef.current const currentTime = Date.now() // Spawn pickups if (currentTime - newState.lastPickupSpawn > PICKUP_SPAWN_INTERVAL && newState.pickups.length < 3) { const pickup = spawnPickup(newState) if (pickup) { newState.pickups.push(pickup) newState.lastPickupSpawn = currentTime } } // Update tanks based on input newState.tanks = newState.tanks.map((tank) => { const newTank = { ...tank } let moved = false // Remove expired power-ups if (newTank.powerUp && currentTime > newTank.powerUpExpiry) { newTank.powerUp = null newTank.powerUpExpiry = 0 } // Improved movement with smoother controls const moveX = 0 let moveY = 0 let rotate = 0 // Player 1 (Red) - WASD + Space if (tank.id === 1) { if (keys.has("a") || keys.has("A")) rotate -= 1 if (keys.has("d") || keys.has("D")) rotate += 1 if (keys.has("s") || keys.has("S")) moveY -= 1 if (keys.has("w") || keys.has("W")) moveY += 1 } // Player 2 (Blue) - Arrow keys + Enter if (tank.id === 2) { if (keys.has("ArrowLeft")) rotate -= 1 if (keys.has("ArrowRight")) rotate += 1 if (keys.has("ArrowDown")) moveY -= 1 if (keys.has("ArrowUp")) moveY += 1 } // Player 3 (Green) - IJKL + M if (tank.id === 3) { if (keys.has("j") || keys.has("J")) rotate -= 1 if (keys.has("l") || keys.has("L")) rotate += 1 if (keys.has("i") || keys.has("I")) moveY -= 1 if (keys.has("k") || keys.has("K")) moveY += 1 } // Apply rotation if (rotate !== 0) { newTank.angle += rotate * tank.rotationSpeed } // Apply movement in tank's facing direction if (moveY !== 0) { const newX = tank.x + Math.cos(tank.angle) * moveY * tank.speed const newY = tank.y + Math.sin(tank.angle) * moveY * tank.speed newTank.x = newX newTank.y = newY moved = true } // Check wall collisions if (moved) { const tankRect = { x: newTank.x - tank.size / 2, y: newTank.y - tank.size / 2, width: tank.size, height: tank.size, } for (const wall of newState.walls) { if (checkCollision(tankRect, wall)) { return tank // Revert movement } } // Keep tanks in bounds if ( newTank.x < tank.size / 2 || newTank.x > newState.gameWidth - tank.size / 2 || newTank.y < tank.size / 2 || newTank.y > newState.gameHeight - tank.size / 2 ) { return tank // Revert movement } } return newTank }) // Check pickup collisions newState.pickups = newState.pickups.filter((pickup) => { for (const tank of newState.tanks) { if (tank.health <= 0) continue const distance = Math.sqrt(Math.pow(pickup.x - tank.x, 2) + Math.pow(pickup.y - tank.y, 2)) if (distance < tank.size / 2 + pickup.size / 2) { // Apply pickup effect switch (pickup.type) { case "health": tank.health = Math.min(tank.maxHealth, tank.health + 40) break case "grenade": tank.powerUp = "grenade" tank.powerUpExpiry = currentTime + POWERUP_DURATION break case "oneshot": tank.powerUp = "oneshot" tank.powerUpExpiry = currentTime + POWERUP_DURATION break } return false // Remove pickup } } return true }) // Update projectiles const updatedProjectiles: Projectile[] = [] newState.projectiles.forEach((projectile) => { const newProjectile = { ...projectile } newProjectile.x += projectile.vx newProjectile.y += projectile.vy // Check wall collisions for bouncing const projRect = { x: newProjectile.x - projectile.size / 2, y: newProjectile.y - projectile.size / 2, width: projectile.size, height: projectile.size, } let shouldKeep = true let bounced = false for (const wall of newState.walls) { if (checkCollision(projRect, wall)) { if (projectile.type === "grenade") { // Grenade explodes on wall hit explodeGrenade(newProjectile.x, newProjectile.y, projectile.ownerId, newState.tanks) shouldKeep = false break } else if (projectile.bounces < projectile.maxBounces) { // Regular bounce logic const projCenterX = newProjectile.x const projCenterY = newProjectile.y const wallCenterX = wall.x + wall.width / 2 const wallCenterY = wall.y + wall.height / 2 const overlapX = Math.min(projRect.x + projRect.width - wall.x, wall.x + wall.width - projRect.x) const overlapY = Math.min(projRect.y + projRect.height - wall.y, wall.y + wall.height - projRect.y) if (overlapX < overlapY) { newProjectile.vx = -newProjectile.vx newProjectile.x = projCenterX + (projCenterX < wallCenterX ? -5 : 5) } else { newProjectile.vy = -newProjectile.vy newProjectile.y = projCenterY + (projCenterY < wallCenterY ? -5 : 5) } newProjectile.bounces++ bounced = true break } else { shouldKeep = false break } } } if (shouldKeep && !bounced) { // Check tank collisions for (const tank of newState.tanks) { if (tank.id !== projectile.ownerId && tank.health > 0) { const distance = Math.sqrt(Math.pow(newProjectile.x - tank.x, 2) + Math.pow(newProjectile.y - tank.y, 2)) if (distance < tank.size / 2 + projectile.size / 2) { if (projectile.type === "grenade") { explodeGrenade(newProjectile.x, newProjectile.y, projectile.ownerId, newState.tanks) } else { tank.health -= projectile.damage } shouldKeep = false break } } } } // Remove if out of bounds if (shouldKeep) { if ( newProjectile.x < 0 || newProjectile.x > newState.gameWidth || newProjectile.y < 0 || newProjectile.y > newState.gameHeight ) { if (projectile.type === "grenade") { explodeGrenade(newProjectile.x, newProjectile.y, projectile.ownerId, newState.tanks) } shouldKeep = false } } if (shouldKeep) { updatedProjectiles.push(newProjectile) } }) newState.projectiles = updatedProjectiles // Check for game over const aliveTanks = newState.tanks.filter((tank) => tank.health > 0) if (aliveTanks.length <= 1) { newState.gameOver = true newState.winner = aliveTanks.length === 1 ? aliveTanks[0].id : null } return newState }) }, [gameState, spawnPickup]) const handleKeyDown = useCallback( (e: KeyboardEvent) => { keysRef.current.add(e.key) if (!gameState || gameState.gameOver) return const currentTime = Date.now() // Shooting with cooldown if (e.key === " " || e.key === "Enter" || e.key === "m" || e.key === "M") { e.preventDefault() let tankId = 0 if (e.key === " ") tankId = 1 if (e.key === "Enter") tankId = 2 if (e.key === "m" || e.key === "M") tankId = 3 const tank = gameState.tanks.find((t) => t.id === tankId) if (tank && tank.health > 0 && currentTime - tank.lastShot > tank.shootCooldown) { let projectileType: "normal" | "oneshot" | "grenade" = "normal" let damage = 25 let size = PROJECTILE_SIZE let speed = PROJECTILE_SPEED if (tank.powerUp === "oneshot") { projectileType = "oneshot" damage = 100 size = 6 } else if (tank.powerUp === "grenade") { projectileType = "grenade" damage = 0 // Damage handled by explosion size = 8 speed = 6 } const projectile: Projectile = { id: Date.now() + Math.random(), x: tank.x + Math.cos(tank.angle) * (tank.size / 2 + 10), y: tank.y + Math.sin(tank.angle) * (tank.size / 2 + 10), vx: Math.cos(tank.angle) * speed, vy: Math.sin(tank.angle) * speed, ownerId: tank.id, bounces: 0, maxBounces: projectileType === "grenade" ? 2 : MAX_BOUNCES, size: size, speed: speed, type: projectileType, damage: damage, } tank.lastShot = currentTime setGameState((prev) => prev ? { ...prev, projectiles: [...prev.projectiles, projectile], } : prev, ) } } }, [gameState], ) const handleKeyUp = useCallback((e: KeyboardEvent) => { keysRef.current.delete(e.key) }, []) const draw = useCallback(() => { const canvas = canvasRef.current if (!canvas || !gameState) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.fillStyle = "#1f2937" ctx.fillRect(0, 0, gameState.gameWidth, gameState.gameHeight) // Draw walls ctx.fillStyle = "#6b7280" gameState.walls.forEach((wall) => { ctx.fillRect(wall.x, wall.y, wall.width, wall.height) }) // Draw pickups gameState.pickups.forEach((pickup) => { const time = Date.now() - pickup.spawnTime const pulse = Math.sin(time * 0.005) * 0.3 + 0.7 ctx.save() ctx.globalAlpha = pulse switch (pickup.type) { case "health": ctx.fillStyle = "#22c55e" break case "grenade": ctx.fillStyle = "#f59e0b" break case "oneshot": ctx.fillStyle = "#8b5cf6" break } ctx.beginPath() ctx.arc(pickup.x, pickup.y, pickup.size, 0, Math.PI * 2) ctx.fill() // Draw pickup icon ctx.fillStyle = "#ffffff" ctx.font = "12px Arial" ctx.textAlign = "center" let icon = "" switch (pickup.type) { case "health": icon = "+" break case "grenade": icon = "G" break case "oneshot": icon = "!" break } ctx.fillText(icon, pickup.x, pickup.y + 4) ctx.restore() }) // Draw tanks gameState.tanks.forEach((tank) => { if (tank.health <= 0) return ctx.save() ctx.translate(tank.x, tank.y) ctx.rotate(tank.angle) // Tank body with power-up glow if (tank.powerUp) { ctx.shadowColor = tank.powerUp === "oneshot" ? "#8b5cf6" : "#f59e0b" ctx.shadowBlur = 10 } ctx.fillStyle = tank.color ctx.fillRect(-tank.size / 2, -tank.size / 2, tank.size, tank.size) ctx.shadowBlur = 0 // Tank barrel ctx.fillStyle = "#374151" ctx.fillRect(0, -3, tank.size / 2 + 10, 6) ctx.restore() // Health bar const barWidth = tank.size const barHeight = 4 ctx.fillStyle = "#ef4444" ctx.fillRect(tank.x - barWidth / 2, tank.y - tank.size / 2 - 10, barWidth, barHeight) ctx.fillStyle = "#22c55e" ctx.fillRect( tank.x - barWidth / 2, tank.y - tank.size / 2 - 10, (barWidth * tank.health) / tank.maxHealth, barHeight, ) // Power-up indicator if (tank.powerUp) { ctx.fillStyle = "#ffffff" ctx.font = "10px Arial" ctx.textAlign = "center" const powerUpText = tank.powerUp === "oneshot" ? "ONE SHOT" : "GRENADE" ctx.fillText(powerUpText, tank.x, tank.y - tank.size / 2 - 20) } // Cooldown indicator const currentTime = Date.now() const cooldownProgress = Math.min(1, (currentTime - tank.lastShot) / tank.shootCooldown) if (cooldownProgress < 1) { ctx.fillStyle = "#fbbf24" ctx.fillRect(tank.x - barWidth / 2, tank.y + tank.size / 2 + 5, barWidth * cooldownProgress, 2) } }) // Draw projectiles gameState.projectiles.forEach((projectile) => { switch (projectile.type) { case "normal": ctx.fillStyle = "#fbbf24" break case "oneshot": ctx.fillStyle = "#8b5cf6" break case "grenade": ctx.fillStyle = "#f59e0b" break } ctx.beginPath() ctx.arc(projectile.x, projectile.y, projectile.size, 0, Math.PI * 2) ctx.fill() }) if (gameState.gameOver) { ctx.fillStyle = "rgba(0, 0, 0, 0.7)" ctx.fillRect(0, 0, gameState.gameWidth, gameState.gameHeight) ctx.fillStyle = "#ffffff" ctx.font = "48px Arial" ctx.textAlign = "center" if (gameState.winner) { const colors = { 1: "Red", 2: "Blue", 3: "Green" } ctx.fillText( `${colors[gameState.winner as keyof typeof colors]} Tank Wins!`, gameState.gameWidth / 2, gameState.gameHeight / 2, ) } else { ctx.fillText("Draw!", gameState.gameWidth / 2, gameState.gameHeight / 2) } ctx.font = "24px Arial" ctx.fillText("Press R to restart", gameState.gameWidth / 2, gameState.gameHeight / 2 + 50) ctx.textAlign = "left" } }, [gameState]) useEffect(() => { if (gameStarted && gameState) { const gameLoop = () => { updateGame() draw() gameLoopRef.current = requestAnimationFrame(gameLoop) } gameLoopRef.current = requestAnimationFrame(gameLoop) return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } } }, [gameStarted, gameState, updateGame, draw]) useEffect(() => { const handleRestart = (e: KeyboardEvent) => { if (e.key === "r" || e.key === "R") { if (gameState?.gameOver) { initializeGame() } } } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) window.addEventListener("keydown", handleRestart) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) window.removeEventListener("keydown", handleRestart) } }, [handleKeyDown, handleKeyUp, gameState, initializeGame]) return (

Tank Battle Arena

Enhanced 3-Player Combat with Power-ups & Healing

{!gameStarted ? (

Red Tank: WASD to move, Space to shoot

Blue Tank: Arrow keys to move, Enter to shoot

Green Tank: IJKL to move, M to shoot

Power-ups spawn every 8 seconds:

+ Health Pack - Restores 40 HP

G Grenade - Area damage weapon

! One Shot - Instant kill bullet

) : (

{/* Controls Panel - Left Side */}

Game Controls

Red Tank:

WASD to move, Space to shoot

Blue Tank:

Arrow keys to move, Enter to shoot

Green Tank:

IJKL to move, M to shoot

Power-ups:

+ Health Pack - Restores 40 HP

G Grenade - Area damage weapon

! One Shot - Instant kill bullet

Power-ups last 15 seconds

Shooting cooldown: 0.5s

{/* Game Canvas */}

)} {gameStarted && (

)}

) }