[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { Suspense } from "react" import dynamic from "next/dynamic" import { Loader2 } from "lucide-react" // Dynamically import the game component to avoid SSR issues with R3F const TowerDefenseGame = dynamic(() => import("@/components/tower-defense-game"), { ssr: false, loading: () => (

Loading Game...

), }) export default function Home() { return (

Loading Game...

} >

) } [V0_FILE]typescriptreact:file="components/game-map.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef, useMemo, useState } from "react" import { useThree } from "@react-three/fiber" import { useGameStore } from "@/lib/game-store" import { Building } from "@/components/building" import { Road } from "@/components/road" import { Defense } from "@/components/defense" import { Utility } from "@/components/utility" import { useCursor } from "@react-three/drei" import * as THREE from "three" export function GameMap() { const { mapData, selectedTool, placeBuildingAt, placeRoadAt, placeDefenseAt, placeUtilityAt } = useGameStore() const [hovered, setHovered] = useState(null) const [hoveredValid, setHoveredValid] = useState(true) const { raycaster, camera, scene, gl } = useThree() const groundRef = useRef(null) const gridSize = 20 // 20x20 grid // Generate terrain with some hills and valleys const terrainGeometry = useMemo(() => { const geometry = new THREE.PlaneGeometry(gridSize, gridSize, gridSize - 1, gridSize - 1) const positions = geometry.attributes.position.array // Create some terrain variation for (let i = 0; i < positions.length; i += 3) { // Skip the edges to keep them flat const x = Math.floor((i / 3) % gridSize) const z = Math.floor(i / 3 / gridSize) if (x > 0 && x < gridSize - 1 && z > 0 && z < gridSize - 1) { // Add some noise for terrain positions[i + 1] = (Math.sin(x / 2) + Math.cos(z / 3)) * 0.2 } } geometry.computeVertexNormals() return geometry }, []) // Handle hover and placement const handlePointerMove = (e) => { if (e.intersections.length > 0 && groundRef.current) { const intersection = e.intersections[0] const x = Math.floor(intersection.point.x + gridSize / 2) const z = Math.floor(intersection.point.z + gridSize / 2) if (x >= 0 && x < gridSize && z >= 0 && z < gridSize) { setHovered([x, z]) // Check if placement is valid const isValid = !mapData[z]?.[x]?.occupied setHoveredValid(isValid) } else { setHovered(null) } } } const handleClick = (e) => { if (hovered && hoveredValid) { const [x, z] = hovered switch (selectedTool) { case "road": case "highway": placeRoadAt(x, z) break case "residential": case "commercial": case "industrial": placeBuildingAt(x, z) break case "cannon": case "mine": case "laser": case "gatling": case "missile": case "sniper": case "flamethrower": case "emp": placeDefenseAt(x, z) break case "powerplant": case "waterplant": placeUtilityAt(x, z) break } } } // Set cursor based on hover state useCursor(hovered !== null, hoveredValid ? "pointer" : "not-allowed") return ( {/* Base terrain */} {/* Grid lines for visual reference */} {/* Render map elements */} {mapData.map((row, z) => row.map((cell, x) => { if (!cell) return null switch (cell.type) { case "road": return case "building": return ( ) case "defense": return ( ) case "utility": return ( ) default: return null } }), )} {/* Placement preview */} {hovered && ( )} ) } [V0_FILE]typescriptreact:file="components/building.tsx" isMerged="true" "use client" import { useRef } from "react" import type * as THREE from "three" type BuildingProps = { position: [number, number, number] buildingType: string } export function Building({ position, buildingType }: BuildingProps) { const buildingRef = useRef(null) // Different building types const renderBuilding = () => { switch (buildingType) { case "residential": return ( ) case "commercial": return ( ) case "industrial": return ( ) default: return ( ) } } return ( {renderBuilding()} ) } [V0_FILE]typescriptreact:file="components/road.tsx" isMerged="true" "use client" import { useRef } from "react" import type * as THREE from "three" type RoadProps = { position: [number, number, number] } export function Road({ position }: RoadProps) { const roadRef = useRef(null) return ( {/* Road markings */} ) } [V0_FILE]typescriptreact:file="components/utility.tsx" isMerged="true" "use client" import { useRef } from "react" import type * as THREE from "three" type UtilityProps = { position: [number, number, number] utilityType: string } export function Utility({ position, utilityType }: UtilityProps) { const utilityRef = useRef(null) // Different utility types const renderUtility = () => { switch (utilityType) { case "powerplant": return ( ) case "waterplant": return ( ) default: return ( ) } } return ( {renderUtility()} ) } [V0_FILE]typescriptreact:file="lib/game-store.ts" isEdit="true" "use client" import { create } from "zustand" type Enemy = { id: string position: [number, number, number] health: number speed: number type: string } type MapCell = { type: string occupied: boolean buildingType?: string defenseType?: string utilityType?: string } type GameState = { gameState: "menu" | "playing" | "paused" | "gameover" mapData: MapCell[][] selectedTool: string | null waveNumber: number waveInProgress: boolean money: number health: number enemies: Enemy[] gameSpeed: number // Game actions startGame: () => void pauseGame: () => void resetGame: () => void setGameSpeed: (speed: number) => void // Building actions selectTool: (tool: string) => void placeBuildingAt: (x: number, z: number) => void placeRoadAt: (x: number, z: number) => void placeDefenseAt: (x: number, z: number) => void placeUtilityAt: (x: number, z: number) => void // Wave management startWave: () => void endWave: () => void // Enemy management addEnemy: (enemy: Enemy) => void removeEnemy: (id: string) => void updateEnemyPosition: (id: string, newPosition: [number, number, number]) => void damageEnemy: (id: string, damage: number) => void damagePlayer: (damage: number) => void } // Building costs const COSTS = { road: 10, highway: 25, cannon: 200, mine: 100, laser: 250, gatling: 180, missile: 350, sniper: 400, flamethrower: 300, emp: 280, } // Create a random map const createRandomMap = (size = 20): MapCell[][] => { const map: MapCell[][] = [] for (let z = 0; z < size; z++) { const row: MapCell[] = [] for (let x = 0; x < size; x++) { row.push({ type: "empty", occupied: false, }) } map.push(row) } // Add some initial roads const center = Math.floor(size / 2) // Horizontal road for (let x = center - 5; x <= center + 5; x++) { map[center][x] = { type: "road", occupied: true, } } // Vertical road for (let z = center - 5; z <= center + 5; z++) { map[z][center] = { type: "road", occupied: true, } } return map } export const useGameStore = create((set, get) => ({ gameState: "menu", mapData: createRandomMap(), selectedTool: null, waveNumber: 0, waveInProgress: false, money: 500, health: 20, enemies: [], gameSpeed: 1, // Game actions startGame: () => set({ gameState: "playing" }), pauseGame: () => set({ gameState: "paused" }), resetGame: () => set({ gameState: "menu", mapData: createRandomMap(), selectedTool: null, waveNumber: 0, waveInProgress: false, money: 500, health: 20, enemies: [], gameSpeed: 1, }), setGameSpeed: (speed) => set({ gameSpeed: speed }), // Building actions selectTool: (tool) => set({ selectedTool: tool }), placeBuildingAt: (x, z) => { const { mapData, money, selectedTool } = get() // Check if cell is empty if (mapData[z]?.[x]?.occupied) return // Check if we have enough money and if the selected tool is a building type const buildingTypes = ["residential", "commercial", "industrial"] if (buildingTypes.includes(selectedTool) && money >= COSTS[selectedTool]) { const newMapData = [...mapData] newMapData[z][x] = { type: "building", occupied: true, buildingType: selectedTool, } set({ mapData: newMapData, money: money - COSTS[selectedTool], }) } }, placeRoadAt: (x, z) => { const { mapData, money, selectedTool } = get() // Check if cell is empty if (mapData[z]?.[x]?.occupied) return // Check if we have enough money if ((selectedTool === "road" || selectedTool === "highway") && money >= COSTS[selectedTool]) { const newMapData = [...mapData] newMapData[z][x] = { type: "road", occupied: true, } set({ mapData: newMapData, money: money - COSTS[selectedTool], }) } }, placeDefenseAt: (x, z) => { const { mapData, money, selectedTool } = get() // Check if cell is empty if (mapData[z]?.[x]?.occupied) return // Check if we have enough money if (money >= COSTS[selectedTool]) { const newMapData = [...mapData] newMapData[z][x] = { type: "defense", occupied: true, defenseType: selectedTool, } set({ mapData: newMapData, money: money - COSTS[selectedTool], }) } }, placeUtilityAt: (x, z) => { const { mapData, money, selectedTool } = get() // Check if cell is empty if (mapData[z]?.[x]?.occupied) return // Check if we have enough money and if the selected tool is a utility type const utilityTypes = ["powerplant", "waterplant"] if (utilityTypes.includes(selectedTool) && money >= COSTS[selectedTool]) { const newMapData = [...mapData] newMapData[z][x] = { type: "utility", occupied: true, utilityType: selectedTool, } set({ mapData: newMapData, money: money - COSTS[selectedTool], }) } }, // Wave management startWave: () => { const { waveNumber } = get() set({ waveInProgress: true, waveNumber: waveNumber + 1, }) }, endWave: () => { const { waveNumber, money } = get() // Give player money based on wave number const reward = 100 + waveNumber * 50 set({ waveInProgress: false, money: money + reward, }) }, // Enemy management addEnemy: (enemy) => { const { enemies } = get() set({ enemies: [...enemies, enemy] }) }, removeEnemy: (id) => { const { enemies } = get() set({ enemies: enemies.filter((enemy) => enemy.id !== id) }) }, updateEnemyPosition: (id, newPosition) => { const { enemies } = get() const updatedEnemies = enemies.map((enemy) => { if (enemy.id === id) { return { ...enemy, position: [...newPosition] as [number, number, number], } } return enemy }) set({ enemies: updatedEnemies }) }, damageEnemy: (id, damage) => { const { enemies, removeEnemy, money } = get() const updatedEnemies = enemies.map((enemy) => { if (enemy.id === id) { const newHealth = enemy.health - damage if (newHealth <= 0) { // Enemy defeated, give player money setTimeout(() => { removeEnemy(id) set({ money: money + 10 }) }, 0) return { ...enemy, health: 0 } } return { ...enemy, health: newHealth } } return enemy }) set({ enemies: updatedEnemies }) }, damagePlayer: (damage) => { const { health } = get() const newHealth = health - damage if (newHealth <= 0) { set({ health: 0, gameState: "gameover", }) } else { set({ health: newHealth }) } }, })) [V0_FILE]typescriptreact:file="components/game-ui.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useGameStore } from "@/lib/game-store" import { RouteIcon as Road, Shield, Zap, Clock } from "lucide-react" import { Slider } from "@/components/ui/slider" import { useState, useEffect } from "react" type GameUIProps = { gameState: string waveNumber: number timeToNextWave: number waveInProgress: boolean money: number health: number onStartGame: () => void onPauseGame: () => void onResetGame: () => void } export function GameUI({ gameState, waveNumber, timeToNextWave, waveInProgress, money, health, onStartGame, onPauseGame, onResetGame, }: GameUIProps) { const { selectTool, selectedTool, gameSpeed, setGameSpeed } = useGameStore() const [speedValue, setSpeedValue] = useState(1) // Speed options const speedOptions = [0.5, 1, 2, 5, 10] // Update game speed when slider changes useEffect(() => { setGameSpeed(speedValue) }, [speedValue, setGameSpeed]) return (

{/* Top HUD */}

Health: {health}

Money: ${money}

Wave: {waveNumber}

{!waveInProgress && gameState === "playing" && (

Next wave in: {timeToNextWave}s

)} {waveInProgress &&

Wave in progress!

} {/* Game speed control */}

Game Speed: {speedValue}x

0.5x

setSpeedValue(speedOptions[value[0]])} className="pointer-events-auto" />

10x

{/* Game controls */}

{gameState === "menu" && } {gameState === "playing" && } {gameState === "paused" && } {gameState !== "menu" && ( )}

{/* Building tools */} {gameState === "playing" && (

Roads Defense

)} {/* Game over screen */} {gameState === "gameover" && (

Game Over

You survived {waveNumber} waves!

)} {/* Start screen */} {gameState === "menu" && (

Tower Defense

SimCity 2000 Inspired

Build your city layout with roads and defend it against waves of enemies! Enemies will follow your road network, so plan carefully! Choose from a variety of defense options to protect your city from the invading forces.

)}

) } [V0_FILE]typescriptreact:file="components/tower-defense-game.tsx" isEdit="true" "use client" import { useState, useEffect, useRef, useCallback } from "react" import { Canvas } from "@react-three/fiber" import { Sky, OrbitControls, Environment } from "@react-three/drei" import { GameMap } from "@/components/game-map" import { GameUI } from "@/components/game-ui" import { useGameStore } from "@/lib/game-store" import { EnemyWave } from "@/components/enemy-wave" export default function TowerDefenseGame() { const gameState = useGameStore((state) => state.gameState) const waveNumber = useGameStore((state) => state.waveNumber) const waveInProgress = useGameStore((state) => state.waveInProgress) const money = useGameStore((state) => state.money) const health = useGameStore((state) => state.health) const gameSpeed = useGameStore((state) => state.gameSpeed) // Use separate selectors for actions to avoid re-renders const startGame = useGameStore((state) => state.startGame) const pauseGame = useGameStore((state) => state.pauseGame) const resetGame = useGameStore((state) => state.resetGame) const startWave = useGameStore((state) => state.startWave) const [timeToNextWave, setTimeToNextWave] = useState(45) const waveTimerRef = useRef(null) // Memoize the wave start function to avoid recreating it on every render const handleStartWave = useCallback(() => { startWave() }, [startWave]) // Handle wave timing useEffect(() => { // Clear any existing timer if (waveTimerRef.current) { clearInterval(waveTimerRef.current) waveTimerRef.current = null } // Only start a new timer if the game is playing and no wave is in progress if (gameState === "playing" && !waveInProgress) { setTimeToNextWave(45) // Reset timer when wave ends or game starts // Adjust interval based on game speed const interval = 1000 / gameSpeed waveTimerRef.current = setInterval(() => { setTimeToNextWave((prev) => { if (prev <= 1) { clearInterval(waveTimerRef.current!) waveTimerRef.current = null // Use setTimeout to avoid state updates during rendering setTimeout(() => { handleStartWave() }, 0) return 45 } return prev - 1 }) }, interval) } // Cleanup function return () => { if (waveTimerRef.current) { clearInterval(waveTimerRef.current) waveTimerRef.current = null } } }, [gameState, waveInProgress, handleStartWave, gameSpeed]) return (

{/* Game UI overlay */}

) } [V0_FILE]typescriptreact:file="components/enemy-wave.tsx" isEdit="true" "use client" import { useRef, useEffect, useMemo, useState } from "react" import { useFrame } from "@react-three/fiber" import type * as THREE from "three" import { useGameStore } from "@/lib/game-store" type EnemyWaveProps = { waveNumber: number } export function EnemyWave({ waveNumber }: EnemyWaveProps) { const { enemies, addEnemy, removeEnemy, updateEnemyPosition, damagePlayer, mapData, endWave, gameSpeed } = useGameStore() const waveRef = useRef(null) const spawnTimerRef = useRef(null) const enemiesSpawned = useRef(0) const enemiesRemaining = useRef(0) const [enemyDirections, setEnemyDirections] = useState>({}) // Calculate number of enemies based on wave number const enemyCount = useMemo(() => Math.min(5 + waveNumber * 2, 30), [waveNumber]) // Calculate enemy speed and health based on wave number const enemySpeed = useMemo(() => 0.02 + waveNumber * 0.005, [waveNumber]) const enemyHealth = useMemo(() => 1 + Math.floor(waveNumber / 2), [waveNumber]) // Find entry and exit points on the map const entryPoints = useMemo(() => { const entries = [] const gridSize = mapData.length // Only use left edge for entry points for (let i = 0; i < gridSize; i++) { // Left edge if (mapData[i][0]?.type === "road") { entries.push({ x: 0, z: i, direction: { dx: 1, dz: 0 } }) } } // If no road entries, use random points on left edge if (entries.length === 0) { entries.push({ x: 0, z: Math.floor(gridSize / 2), direction: { dx: 1, dz: 0 } }) } return entries }, [mapData]) // Spawn enemies useEffect(() => { enemiesSpawned.current = 0 enemiesRemaining.current = enemyCount const newEnemyDirections = {} const spawnEnemy = () => { if (enemiesSpawned.current < enemyCount) { // Choose random entry point const entryPoint = entryPoints[Math.floor(Math.random() * entryPoints.length)] const gridSize = mapData.length // Convert grid coordinates to world coordinates const worldX = entryPoint.x - gridSize / 2 + 0.5 const worldZ = entryPoint.z - gridSize / 2 + 0.5 // Add enemy const enemyId = `enemy-${waveNumber}-${enemiesSpawned.current}` addEnemy({ id: enemyId, position: [worldX, 0.3, worldZ], health: enemyHealth, speed: enemySpeed, type: Math.random() > 0.7 ? "fast" : "normal", }) // Set initial direction newEnemyDirections[enemyId] = entryPoint.direction enemiesSpawned.current++ // Schedule next spawn with game speed adjustment spawnTimerRef.current = setTimeout(spawnEnemy, 1000 / gameSpeed) } } // Start spawning spawnEnemy() // Update directions setEnemyDirections(newEnemyDirections) return () => { if (spawnTimerRef.current) { clearTimeout(spawnTimerRef.current) } } }, [waveNumber, enemyCount, enemyHealth, enemySpeed, entryPoints, addEnemy, mapData.length, gameSpeed]) // Update enemy positions useFrame((state, delta) => { const gridSize = mapData.length const updatedDirections = { ...enemyDirections } const speedMultiplier = gameSpeed // Apply game speed to enemy movement // Process each enemy enemies.forEach((enemy) => { if (!enemy || !enemy.id) return // Get current direction or set default let currentDirection = updatedDirections[enemy.id] || { dx: 1, dz: 0 } // Convert world position to grid coordinates const gridX = Math.floor(enemy.position[0] + gridSize / 2) const gridZ = Math.floor(enemy.position[2] + gridSize / 2) // Check if enemy reached the right edge (exit point) if (gridX >= gridSize - 1) { // Enemy reached the exit removeEnemy(enemy.id) damagePlayer(1) enemiesRemaining.current-- delete updatedDirections[enemy.id] return } // Calculate next position based on current direction const nextGridX = gridX + currentDirection.dx const nextGridZ = gridZ + currentDirection.dz // Check if next position is valid (has a road) const needsNewDirection = nextGridX < 0 || nextGridX >= gridSize || nextGridZ < 0 || nextGridZ >= gridSize || mapData[nextGridZ][nextGridX]?.type !== "road" if (needsNewDirection) { // Find a new direction by checking all possible directions const possibleDirections = [ { dx: 1, dz: 0 }, // right { dx: -1, dz: 0 }, // left { dx: 0, dz: 1 }, // down { dx: 0, dz: -1 }, // up ] // Filter out the opposite of current direction to avoid going back const oppositeDirection = { dx: -currentDirection.dx, dz: -currentDirection.dz } const filteredDirections = possibleDirections.filter( (dir) => !(dir.dx === oppositeDirection.dx && dir.dz === oppositeDirection.dz), ) // Check which directions have roads const validDirections = filteredDirections.filter((dir) => { const newX = gridX + dir.dx const newZ = gridZ + dir.dz return newX >= 0 && newX < gridSize && newZ >= 0 && newZ < gridSize && mapData[newZ][newX]?.type === "road" }) if (validDirections.length > 0) { // Choose a random valid direction currentDirection = validDirections[Math.floor(Math.random() * validDirections.length)] } else { // If no valid directions, just continue in current direction // This will make enemies move even if there's no road currentDirection = possibleDirections[Math.floor(Math.random() * possibleDirections.length)] } // Update direction updatedDirections[enemy.id] = currentDirection } // Move enemy in the current direction const speed = (enemy.type === "fast" ? enemy.speed * 1.5 : enemy.speed) * speedMultiplier const newX = enemy.position[0] + currentDirection.dx * speed const newY = enemy.position[1] const newZ = enemy.position[2] + currentDirection.dz * speed // Update enemy position through the store updateEnemyPosition(enemy.id, [newX, newY, newZ]) }) // Update directions setEnemyDirections(updatedDirections) // Check if wave is complete if (enemies.length === 0 && enemiesSpawned.current >= enemyCount) { endWave() } }) return ( {enemies.map((enemy) => ( ))} ) } type EnemyModelProps = { position: [number, number, number] type: string health: number direction: { dx: number; dz: number } } function EnemyModel({ position, type, health, direction }: EnemyModelProps) { const enemyRef = useRef(null) const maxHealth = type === "fast" ? 1 : 2 // Base max health const healthPercent = health / maxHealth // Calculate opacity and color based on health const opacity = Math.max(0.3, healthPercent) const colorValue = Math.max(0.3, healthPercent) const emissiveIntensity = 1 - healthPercent // More emissive as health decreases // Rotate to face movement direction and add bobbing motion useFrame((state, delta) => { if (!enemyRef.current) return // Add a slight bobbing motion enemyRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 5) * 0.05 // Rotate to face movement direction if (direction.dx !== 0 || direction.dz !== 0) { const angle = Math.atan2(direction.dx, direction.dz) enemyRef.current.rotation.y = angle } }) return ( {type === "fast" ? ( // Fast enemy - smaller and red ) : ( // Normal enemy - larger and blue )} {/* Health indicator */} ) } [V0_FILE]typescriptreact:file="components/defense.tsx" isEdit="true" "use client" import { useRef, useState, useMemo } from "react" import { useFrame } from "@react-three/fiber" import * as THREE from "three" import { useGameStore } from "@/lib/game-store" type DefenseProps = { position: [number, number, number] defenseType: string } type Projectile = { id: string position: THREE.Vector3 target: THREE.Vector3 type: string speed: number size: number color: string } // Defense specs configuration const DEFENSE_SPECS = { cannon: { range: 5, damage: 2, cooldown: 1.5, projectileSpeed: 0.2, projectileSize: 0.1, color: "#f44336" }, mine: { range: 3, damage: 1, cooldown: 0.8, projectileSpeed: 0, projectileSize: 0, color: "#f44336" }, laser: { range: 6, damage: 1.5, cooldown: 0.5, projectileSpeed: 0.4, projectileSize: 0.05, color: "#00ff00" }, gatling: { range: 4, damage: 0.5, cooldown: 0.2, projectileSpeed: 0.3, projectileSize: 0.07, color: "#ffff00" }, missile: { range: 8, damage: 3, cooldown: 2.5, projectileSpeed: 0.15, projectileSize: 0.15, color: "#ff9800" }, sniper: { range: 12, damage: 5, cooldown: 3, projectileSpeed: 0.5, projectileSize: 0.08, color: "#2196f3" }, flamethrower: { range: 3, damage: 0.3, cooldown: 0.1, projectileSpeed: 0.15, projectileSize: 0.06, color: "#ff5722" }, emp: { range: 6, damage: 0.8, cooldown: 1.2, projectileSpeed: 0.25, projectileSize: 0.12, color: "#9c27b0" }, } export function Defense({ position, defenseType }: DefenseProps) { const defenseRef = useRef(null) const turretRef = useRef(null) const [target, setTarget] = useState(null) const [showRange, setShowRange] = useState(false) const [isFiring, setIsFiring] = useState(false) const [projectiles, setProjectiles] = useState([]) const lastFireTime = useRef(0) const { enemies, damageEnemy, gameSpeed } = useGameStore() // Get defense specs const specs = useMemo(() => DEFENSE_SPECS[defenseType] || DEFENSE_SPECS.cannon, [defenseType]) // Create a fixed position vector for this defense const defensePosition = useMemo(() => new THREE.Vector3(...position), [position]) // Show range on hover const handlePointerEnter = () => setShowRange(true) const handlePointerLeave = () => setShowRange(false) // Store enemy positions to avoid recreating Vector3 objects each frame const enemyPositions = useMemo(() => { return enemies.map((enemy) => ({ id: enemy.id, position: new THREE.Vector3(enemy.position[0], 0, enemy.position[2]), })) }, [enemies]) // Rotate turret to face enemies and fire at them useFrame((state, delta) => { if (!turretRef.current) return // Find closest enemy in range let closestEnemy = null let closestDistance = Number.POSITIVE_INFINITY let closestEnemyId = null for (const enemy of enemyPositions) { const distance = defensePosition.distanceTo(enemy.position) if (distance < specs.range && distance < closestDistance) { closestDistance = distance closestEnemy = enemy.position closestEnemyId = enemy.id } } if (closestEnemy) { setTarget(closestEnemy) // Rotate turret to face enemy const direction = new THREE.Vector3().subVectors(closestEnemy, defensePosition) const angle = Math.atan2(direction.x, direction.z) turretRef.current.rotation.y = angle // Fire at enemy with cooldown (adjusted by game speed) const currentTime = state.clock.getElapsedTime() const adjustedCooldown = specs.cooldown / gameSpeed if (currentTime - lastFireTime.current > adjustedCooldown) { lastFireTime.current = currentTime setIsFiring(true) // Create projectile (except for mines which are instant) if (defenseType !== "mine") { // Create exact initial position for the projectile based on turret position // This fixes the incorrect rendering of projectiles const turretWorldPosition = new THREE.Vector3() if (turretRef.current) { // Get world position of the turret turretRef.current.getWorldPosition(turretWorldPosition) } else { turretWorldPosition.set(position[0], position[1] + 0.5, position[2]) } const newProjectile = { id: `projectile-${Date.now()}-${Math.random()}`, position: turretWorldPosition, target: closestEnemy.clone(), type: defenseType, speed: specs.projectileSpeed * gameSpeed, // Apply game speed to projectile speed size: specs.projectileSize, color: specs.color, } setProjectiles((prev) => [...prev, newProjectile]) // Special treatment for area damage weapons if (defenseType === "missile" || defenseType === "flamethrower") { // Delayed damage to nearby enemies setTimeout( () => { // Find all enemies in blast radius const blastRadius = defenseType === "missile" ? 2 : 1 for (const enemy of enemyPositions) { if (closestEnemy.distanceTo(enemy.position) <= blastRadius) { damageEnemy(enemy.id, specs.damage) } } // Remove projectile after effect setProjectiles((prev) => prev.filter((p) => p.id !== newProjectile.id)) }, (defenseType === "missile" ? 800 : 400) / gameSpeed, // Adjust timing based on game speed ) } else { // Regular projectile damage setTimeout( () => { damageEnemy(closestEnemyId, specs.damage) setProjectiles((prev) => prev.filter((p) => p.id !== newProjectile.id)) }, 500 / specs.projectileSpeed / gameSpeed, ) // Adjust timing based on projectile speed and game speed } } else { // Mine has immediate effect damageEnemy(closestEnemyId, specs.damage) } // Reset firing state setTimeout(() => { setIsFiring(false) }, 200 / gameSpeed) // Adjust timing based on game speed } } else { setTarget(null) } // Update projectiles with proper trajectory calculation setProjectiles((prev) => prev .map((projectile) => { const direction = new THREE.Vector3().subVectors(projectile.target, projectile.position) const distance = direction.length() // If projectile reached target, remove it if (distance < 0.2) { return null } // Create a normalized direction vector const normalizedDirection = direction.clone().normalize() // Create a new position by adding the scaled direction to the current position const newPosition = projectile.position.clone().add(normalizedDirection.multiplyScalar(projectile.speed)) // Return a new projectile object with the updated position return { ...projectile, position: newPosition, } }) .filter(Boolean), ) }) // Different defense types const renderDefense = () => { switch (defenseType) { case "cannon": return ( {/* Muzzle flash when firing */} {isFiring && ( )} ) case "mine": return ( {/* Explosion effect when firing */} {isFiring && ( )} ) case "laser": return ( {/* Laser beam when firing */} {isFiring && target && ( )} ) case "gatling": return ( {/* Muzzle flash when firing */} {isFiring && ( )} ) case "missile": return ( {/* Launch effect when firing */} {isFiring && ( <> )} ) case "sniper": return ( {/* Flash when firing */} {isFiring && ( )} ) case "flamethrower": return ( {/* Flame effect when firing */} {isFiring && ( )} ) case "emp": return ( {/* EMP pulse effect when firing */} {isFiring && ( )} ) default: return ( ) } } return ( {renderDefense()} {/* Range indicator */} {showRange && ( )} {/* Render projectiles */} {projectiles.map((projectile) => ( ))} ) }