[V0_FILE]typescriptreact:file="game-screen.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useRef, useEffect, useState, useCallback } from "react" import { PenIcon, RocketIcon, Crosshair, Zap, Target } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" interface StickFigure { x: number y: number velocityY: number isJumping: boolean health: number invincibilityFrames: number } interface Enemy { x: number y: number health: number type: "basic" | "shooter" | "explosive" | "boss" cooldown: number } interface Trap { x: number y: number type: "spikes" | "sawblade" | "lava" | "mine" } type Weapon = "pistol" | "shotgun" | "laser" | "rocket" | "sniper" const GameScreen: React.FC = () => { const canvasRef = useRef(null) const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }) const stickFigureRef = useRef({ x: 100, y: 0, velocityY: 0, isJumping: false, health: 200, invincibilityFrames: 0, }) const [keys, setKeys] = useState({ left: false, right: false, up: false, space: false }) const [currentWeapon, setCurrentWeapon] = useState("pistol") const [score, setScore] = useState(0) const [level, setLevel] = useState(1) const enemiesRef = useRef([]) const trapsRef = useRef([]) const projectilesRef = useRef< Array<{ x: number; y: number; speedX: number; speedY: number; damage: number; size: number }> >([]) const [isWeaponWheelOpen, setIsWeaponWheelOpen] = useState(false) const [isDraggingTrap, setIsDraggingTrap] = useState(null) const [isPaused, setIsPaused] = useState(false) const [showPauseMenu, setShowPauseMenu] = useState(false) const updateStickFigure = useCallback(() => { const { left, right, up } = keys const figure = stickFigureRef.current if (left) figure.x -= 5 if (right) figure.x += 5 if (up && !figure.isJumping) { figure.velocityY = -15 figure.isJumping = true } figure.y += figure.velocityY figure.velocityY += 0.8 // Gravity // Ground collision if (figure.y > canvasSize.height - 100) { figure.y = canvasSize.height - 100 figure.velocityY = 0 figure.isJumping = false } // Keep player within canvas bounds figure.x = Math.max(20, Math.min(figure.x, canvasSize.width - 20)) }, [keys, canvasSize.height, canvasSize.width]) const updateEnemies = useCallback(() => { const player = stickFigureRef.current if (player.invincibilityFrames > 0) { player.invincibilityFrames-- } enemiesRef.current.forEach((enemy) => { // Simple AI: move towards the player const dx = stickFigureRef.current.x - enemy.x enemy.x += Math.sign(dx) * (enemy.type === "boss" ? 0.5 : 1) // Bosses move slower // Keep enemy within canvas bounds enemy.x = Math.max(20, Math.min(enemy.x, canvasSize.width - 20)) // Enemy attacks if (enemy.cooldown > 0) { enemy.cooldown-- } else { if (Math.abs(enemy.x - player.x) < 50 && player.invincibilityFrames === 0) { switch (enemy.type) { case "basic": player.health -= 2 break case "shooter": player.health -= 4 break case "explosive": player.health -= 8 break case "boss": player.health -= 12 break } player.invincibilityFrames = 60 // 1 second of invincibility at 60 FPS enemy.cooldown = 90 // 1.5 seconds cooldown at 60 FPS } } }) // Check if player is dead if (player.health <= 0) { alert("Game Over! Your score: " + score) // Reset game state here } }, [canvasSize.width, score]) const shoot = useCallback(() => { const player = stickFigureRef.current const projectile = { x: player.x + 20, // Start from the right side of the player y: player.y - 30, speedX: 10, // Horizontal speed speedY: 0, // No vertical speed damage: 0, size: 5, } switch (currentWeapon) { case "pistol": projectile.damage = 10 break case "shotgun": projectile.damage = 20 projectile.size = 8 break case "laser": projectile.damage = 30 projectile.speedX = 15 break case "rocket": projectile.damage = 50 projectile.speedX = 8 projectile.size = 10 break case "sniper": projectile.damage = 75 projectile.speedX = 20 break } projectilesRef.current.push(projectile) }, [currentWeapon]) const spawnEnemiesForLevel = useCallback( (level: number) => { const numEnemies = Math.min(5 + level, 20) // Cap at 20 enemies const newEnemies: Enemy[] = [] for (let i = 0; i < numEnemies; i++) { const enemyTypes: Enemy["type"][] = ["basic", "shooter", "explosive"] const randomType = enemyTypes[Math.floor(Math.random() * enemyTypes.length)] newEnemies.push({ x: Math.random() * canvasSize.width, y: canvasSize.height - 100, health: 50 + level * 10, type: randomType, cooldown: 0, }) } // Add a boss every 5 levels if (level % 5 === 0) { newEnemies.push({ x: canvasSize.width / 2, y: canvasSize.height - 100, health: 200 + level * 20, type: "boss", cooldown: 0, }) } enemiesRef.current = newEnemies }, [canvasSize.width, canvasSize.height], ) const handleWeaponSelect = (weapon: Weapon) => { setCurrentWeapon(weapon) setIsWeaponWheelOpen(false) } const handleTrapDragStart = (trapType: Trap["type"]) => { setIsDraggingTrap({ x: 0, y: 0, type: trapType }) } const handleTrapDragEnd = (e: React.DragEvent) => { if (isDraggingTrap) { const canvas = canvasRef.current if (canvas) { const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top trapsRef.current.push({ ...isDraggingTrap, x, y }) } } setIsDraggingTrap(null) } const togglePause = () => { setIsPaused(!isPaused) setShowPauseMenu(!isPaused) } useEffect(() => { const handleResize = () => { setCanvasSize({ width: window.innerWidth, height: window.innerHeight }) } window.addEventListener("resize", handleResize) handleResize() return () => window.removeEventListener("resize", handleResize) }, []) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") setKeys((k) => ({ ...k, left: true })) if (e.key === "ArrowRight") setKeys((k) => ({ ...k, right: true })) if (e.key === "ArrowUp") setKeys((k) => ({ ...k, up: true })) if (e.key === " ") { setKeys((k) => ({ ...k, space: true })) shoot() } } const handleKeyUp = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") setKeys((k) => ({ ...k, left: false })) if (e.key === "ArrowRight") setKeys((k) => ({ ...k, right: false })) if (e.key === "ArrowUp") setKeys((k) => ({ ...k, up: false })) if (e.key === " ") setKeys((k) => ({ ...k, space: false })) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [shoot]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationFrameId: number const render = () => { if (!isPaused) { updateStickFigure() updateEnemies() projectilesRef.current.forEach((projectile, index) => { projectile.x += projectile.speedX // Check for collisions with enemies enemiesRef.current.forEach((enemy) => { if ( Math.abs(projectile.x - enemy.x) < (enemy.type === "boss" ? 30 : 20) && Math.abs(projectile.y - (enemy.y - 30)) < (enemy.type === "boss" ? 30 : 20) ) { enemy.health -= projectile.damage if (enemy.health <= 0) { setScore((prevScore) => prevScore + (enemy.type === "boss" ? 50 : 10)) } projectilesRef.current.splice(index, 1) } }) // Remove projectile if it's off-screen if (projectile.x > canvasSize.width) { projectilesRef.current.splice(index, 1) } }) enemiesRef.current = enemiesRef.current.filter((enemy) => enemy.health > 0) // Check if level is complete if (enemiesRef.current.length === 0) { setLevel((prevLevel) => prevLevel + 1) // Spawn new enemies for the next level spawnEnemiesForLevel(level + 1) } // Clear canvas ctx.clearRect(0, 0, canvasSize.width, canvasSize.height) // Draw background ctx.fillStyle = "#ffffff" ctx.fillRect(0, 0, canvasSize.width, canvasSize.height) ctx.strokeStyle = "#000000" ctx.lineWidth = 2 ctx.strokeRect(10, 10, canvasSize.width - 20, canvasSize.height - 20) // Draw stick figure const { x, y, health, invincibilityFrames } = stickFigureRef.current ctx.strokeStyle = invincibilityFrames > 0 ? "#0000FF" : "#000000" // Blue when invincible ctx.lineWidth = 2 ctx.beginPath() ctx.arc(x, y - 30, 20, 0, Math.PI * 2) ctx.moveTo(x, y - 10) ctx.lineTo(x, y + 50) ctx.moveTo(x - 30, y + 10) ctx.lineTo(x + 30, y + 10) ctx.moveTo(x, y + 50) ctx.lineTo(x - 20, y + 90) ctx.moveTo(x, y + 50) ctx.lineTo(x + 20, y + 90) ctx.stroke() // Draw player health bar ctx.fillStyle = "red" ctx.fillRect(x - 25, y - 60, 50, 5) ctx.fillStyle = "green" ctx.fillRect(x - 25, y - 60, health / 2, 5) // Draw enemies enemiesRef.current.forEach((enemy) => { ctx.strokeStyle = enemy.type === "boss" ? "purple" : "red" ctx.beginPath() ctx.arc(enemy.x, enemy.y - 30, enemy.type === "boss" ? 30 : 20, 0, Math.PI * 2) ctx.moveTo(enemy.x, enemy.y - 10) ctx.lineTo(enemy.x, enemy.y + 50) ctx.moveTo(enemy.x - 30, enemy.y + 10) ctx.lineTo(enemy.x + 30, enemy.y + 10) ctx.moveTo(enemy.x, enemy.y + 50) ctx.lineTo(enemy.x - 20, enemy.y + 90) ctx.moveTo(enemy.x, enemy.y + 50) ctx.lineTo(enemy.x + 20, enemy.y + 90) ctx.stroke() // Draw enemy health bar ctx.fillStyle = "red" ctx.fillRect(enemy.x - 25, enemy.y - 60, 50, 5) ctx.fillStyle = "green" ctx.fillRect(enemy.x - 25, enemy.y - 60, (enemy.health / (50 + level * 10)) * 50, 5) }) // Draw traps trapsRef.current.forEach((trap) => { ctx.fillStyle = "orange" ctx.beginPath() ctx.arc(trap.x, trap.y, 10, 0, Math.PI * 2) ctx.fill() }) projectilesRef.current.forEach((projectile) => { ctx.fillStyle = currentWeapon === "laser" ? "red" : "black" ctx.beginPath() ctx.arc(projectile.x, projectile.y, projectile.size, 0, Math.PI * 2) ctx.fill() }) } animationFrameId = requestAnimationFrame(render) } render() return () => { cancelAnimationFrame(animationFrameId) } }, [canvasSize, updateStickFigure, updateEnemies, level, isPaused, currentWeapon, spawnEnemiesForLevel]) // Initialize the first level useEffect(() => { spawnEnemiesForLevel(1) }, [spawnEnemiesForLevel]) return (

e.preventDefault()} onDrop={handleTrapDragEnd} >

) } export default GameScreen