[V0_FILE]typescriptreact:file="side-scrolling-game.tsx" isMerged="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface Player { x: number y: number width: number height: number velocityY: number isJumping: boolean color: string } interface Obstacle { x: number y: number width: number height: number color: string } interface GameState { player: Player obstacles: Obstacle[] score: number gameOver: boolean gameStarted: boolean } export default function SideScrollingGame() { const canvasRef = useRef(null) const gameLoopRef = useRef() const [gameState, setGameState] = useState({ player: { x: 100, y: 300, width: 40, height: 40, velocityY: 0, isJumping: false, color: "#3b82f6", }, obstacles: [], score: 0, gameOver: false, gameStarted: false, }) const CANVAS_WIDTH = 800 const CANVAS_HEIGHT = 400 const GRAVITY = 0.8 const JUMP_FORCE = -15 const GROUND_Y = 340 const GAME_SPEED = 3 const resetGame = useCallback(() => { setGameState({ player: { x: 100, y: 300, width: 40, height: 40, velocityY: 0, isJumping: false, color: "#3b82f6", }, obstacles: [], score: 0, gameOver: false, gameStarted: true, }) }, []) const jump = useCallback(() => { setGameState((prev) => { if (!prev.gameStarted || prev.gameOver) return prev if (!prev.player.isJumping) { return { ...prev, player: { ...prev.player, velocityY: JUMP_FORCE, isJumping: true, }, } } return prev }) }, []) const checkCollision = (player: Player, obstacle: Obstacle): boolean => { return ( player.x < obstacle.x + obstacle.width && player.x + player.width > obstacle.x && player.y < obstacle.y + obstacle.height && player.y + player.height > obstacle.y ) } const updateGame = useCallback(() => { setGameState((prev) => { if (!prev.gameStarted || prev.gameOver) return prev const newPlayer = { ...prev.player } const newObstacles = [...prev.obstacles] const newScore = prev.score + 1 // Update player physics newPlayer.velocityY += GRAVITY newPlayer.y += newPlayer.velocityY // Ground collision if (newPlayer.y >= GROUND_Y) { newPlayer.y = GROUND_Y newPlayer.velocityY = 0 newPlayer.isJumping = false } // Move obstacles for (let i = newObstacles.length - 1; i >= 0; i--) { newObstacles[i].x -= GAME_SPEED // Remove obstacles that are off screen if (newObstacles[i].x + newObstacles[i].width < 0) { newObstacles.splice(i, 1) } } // Generate new obstacles if (Math.random() < 0.005) { const obstacleHeight = Math.random() * 60 + 40 newObstacles.push({ x: CANVAS_WIDTH, y: GROUND_Y + 40 - obstacleHeight, width: 30, height: obstacleHeight, color: "#ef4444", }) } // Check collisions for (const obstacle of newObstacles) { if (checkCollision(newPlayer, obstacle)) { return { ...prev, gameOver: true, } } } return { ...prev, player: newPlayer, obstacles: newObstacles, score: newScore, } }) }, []) const draw = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.fillStyle = "#87ceeb" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) // Draw ground ctx.fillStyle = "#22c55e" ctx.fillRect(0, GROUND_Y + 40, CANVAS_WIDTH, CANVAS_HEIGHT - GROUND_Y - 40) // Draw clouds (background elements) ctx.fillStyle = "#ffffff" for (let i = 0; i < 5; i++) { const x = (gameState.score * -0.5 + i * 200) % (CANVAS_WIDTH + 100) ctx.beginPath() ctx.arc(x, 80 + i * 20, 20, 0, Math.PI * 2) ctx.arc(x + 25, 80 + i * 20, 25, 0, Math.PI * 2) ctx.arc(x + 50, 80 + i * 20, 20, 0, Math.PI * 2) ctx.fill() } if (gameState.gameStarted) { // Draw player ctx.fillStyle = gameState.player.color ctx.fillRect(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height) // Draw player eyes ctx.fillStyle = "#ffffff" ctx.fillRect(gameState.player.x + 8, gameState.player.y + 8, 8, 8) ctx.fillRect(gameState.player.x + 24, gameState.player.y + 8, 8, 8) ctx.fillStyle = "#000000" ctx.fillRect(gameState.player.x + 10, gameState.player.y + 10, 4, 4) ctx.fillRect(gameState.player.x + 26, gameState.player.y + 10, 4, 4) // Draw obstacles gameState.obstacles.forEach((obstacle) => { ctx.fillStyle = obstacle.color ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height) }) // Draw score ctx.fillStyle = "#000000" ctx.font = "24px Arial" ctx.fillText(`Score: ${Math.floor(gameState.score / 10)}`, 20, 40) } // Draw game over screen if (gameState.gameOver) { ctx.fillStyle = "rgba(0, 0, 0, 0.7)" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ctx.fillStyle = "#ffffff" ctx.font = "48px Arial" ctx.textAlign = "center" ctx.fillText("Game Over!", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 40) ctx.font = "24px Arial" ctx.fillText(`Final Score: ${Math.floor(gameState.score / 10)}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 20) ctx.fillText("Press R to restart", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 60) ctx.textAlign = "left" } // Draw start screen if (!gameState.gameStarted) { ctx.fillStyle = "rgba(0, 0, 0, 0.7)" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ctx.fillStyle = "#ffffff" ctx.font = "48px Arial" ctx.textAlign = "center" ctx.fillText("Side Scroller", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 60) ctx.font = "24px Arial" ctx.fillText("Press SPACE to jump", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2) ctx.fillText("Avoid the red obstacles!", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 40) ctx.fillText("Click START to begin", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 80) ctx.textAlign = "left" } }, [gameState]) const gameLoop = useCallback(() => { updateGame() draw() gameLoopRef.current = requestAnimationFrame(gameLoop) }, [updateGame, draw]) useEffect(() => { const handleKeyPress = (event: KeyboardEvent) => { if (event.code === "Space") { event.preventDefault() jump() } else if (event.code === "KeyR" && gameState.gameOver) { resetGame() } } window.addEventListener("keydown", handleKeyPress) return () => window.removeEventListener("keydown", handleKeyPress) }, [jump, resetGame, gameState.gameOver]) useEffect(() => { if (gameState.gameStarted && !gameState.gameOver) { gameLoopRef.current = requestAnimationFrame(gameLoop) } return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [gameLoop, gameState.gameStarted, gameState.gameOver]) useEffect(() => { draw() }, [draw]) return (

횡스크롤 러너 게임

) } [V0_FILE]typescriptreact:file="cuphead-boss-battle.tsx" isMerged="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface Vector2 { x: number y: number } interface Player { x: number y: number width: number height: number hp: number maxHp: number speed: number color: string invulnerable: number } interface Boss { x: number y: number width: number height: number hp: number maxHp: number color: string attackTimer: number attackPattern: number phase: number } interface Bullet { x: number y: number width: number height: number velocityX: number velocityY: number color: string isPlayerBullet: boolean } interface GameState { player: Player boss: Boss playerBullets: Bullet[] bossBullets: Bullet[] keys: { [key: string]: boolean } gameStarted: boolean gameWon: boolean gameOver: boolean score: number } export default function CupheadBossBattle() { const canvasRef = useRef(null) const gameLoopRef = useRef() const lastShotTime = useRef(0) const CANVAS_WIDTH = 800 const CANVAS_HEIGHT = 600 const SHOT_COOLDOWN = 150 // milliseconds const [gameState, setGameState] = useState({ player: { x: 100, y: 300, width: 40, height: 40, hp: 5, maxHp: 5, speed: 5, color: "#3b82f6", invulnerable: 0, }, boss: { x: 600, y: 200, width: 120, height: 120, hp: 100, maxHp: 100, color: "#dc2626", attackTimer: 0, attackPattern: 0, phase: 1, }, playerBullets: [], bossBullets: [], keys: {}, gameStarted: false, gameWon: false, gameOver: false, score: 0, }) const resetGame = useCallback(() => { setGameState({ player: { x: 100, y: 300, width: 40, height: 40, hp: 5, maxHp: 5, speed: 5, color: "#3b82f6", invulnerable: 0, }, boss: { x: 600, y: 200, width: 120, height: 120, hp: 100, maxHp: 100, color: "#dc2626", attackTimer: 0, attackPattern: 0, phase: 1, }, playerBullets: [], bossBullets: [], keys: {}, gameStarted: true, gameWon: false, gameOver: false, score: 0, }) }, []) const shootPlayerBullet = useCallback(() => { const now = Date.now() if (now - lastShotTime.current < SHOT_COOLDOWN) return lastShotTime.current = now setGameState((prev) => { if (!prev.gameStarted || prev.gameOver || prev.gameWon) return prev const newBullet: Bullet = { x: prev.player.x + prev.player.width, y: prev.player.y + prev.player.height / 2 - 2, width: 8, height: 4, velocityX: 8, velocityY: 0, color: "#fbbf24", isPlayerBullet: true, } return { ...prev, playerBullets: [...prev.playerBullets, newBullet], } }) }, []) const createBossBullet = (x: number, y: number, vx: number, vy: number): Bullet => ({ x, y, width: 6, height: 6, velocityX: vx, velocityY: vy, color: "#ef4444", isPlayerBullet: false, }) const checkCollision = (rect1: any, rect2: any): boolean => { 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 updateGame = useCallback(() => { setGameState((prev) => { if (!prev.gameStarted || prev.gameOver || prev.gameWon) return prev const newState = { ...prev } // Update player movement const newPlayer = { ...newState.player } if (newState.keys["ArrowLeft"] || newState.keys["a"]) { newPlayer.x = Math.max(0, newPlayer.x - newPlayer.speed) } if (newState.keys["ArrowRight"] || newState.keys["d"]) { newPlayer.x = Math.min(CANVAS_WIDTH - newPlayer.width, newPlayer.x + newPlayer.speed) } if (newState.keys["ArrowUp"] || newState.keys["w"]) { newPlayer.y = Math.max(0, newPlayer.y - newPlayer.speed) } if (newState.keys["ArrowDown"] || newState.keys["s"]) { newPlayer.y = Math.min(CANVAS_HEIGHT - newPlayer.height, newPlayer.y + newPlayer.speed) } // Update invulnerability if (newPlayer.invulnerable > 0) { newPlayer.invulnerable-- } // Update boss const newBoss = { ...newState.boss } newBoss.attackTimer++ // Boss movement (simple up-down pattern) newBoss.y += Math.sin(newBoss.attackTimer * 0.02) * 2 // Boss attack patterns if (newBoss.attackTimer % 120 === 0) { newBoss.attackPattern = Math.floor(Math.random() * 3) } // Update bullets const newPlayerBullets = newState.playerBullets .map((bullet) => ({ ...bullet, x: bullet.x + bullet.velocityX, y: bullet.y + bullet.velocityY, })) .filter((bullet) => bullet.x < CANVAS_WIDTH && bullet.x > -bullet.width) const newBossBullets = newState.bossBullets .map((bullet) => ({ ...bullet, x: bullet.x + bullet.velocityX, y: bullet.y + bullet.velocityY, })) .filter( (bullet) => bullet.x > -bullet.width && bullet.x < CANVAS_WIDTH + bullet.width && bullet.y > -bullet.height && bullet.y < CANVAS_HEIGHT + bullet.height, ) // Boss attacks if (newBoss.attackTimer % 60 === 0) { const bossCenter = { x: newBoss.x + newBoss.width / 2, y: newBoss.y + newBoss.height / 2, } switch (newBoss.attackPattern) { case 0: // Straight shots for (let i = 0; i < 3; i++) { newBossBullets.push(createBossBullet(bossCenter.x, bossCenter.y + i * 20 - 20, -4, 0)) } break case 1: // Circular pattern for (let i = 0; i < 8; i++) { const angle = (i / 8) * Math.PI * 2 newBossBullets.push( createBossBullet(bossCenter.x, bossCenter.y, Math.cos(angle) * 3, Math.sin(angle) * 3), ) } break case 2: // Aimed at player const dx = newPlayer.x + newPlayer.width / 2 - bossCenter.x const dy = newPlayer.y + newPlayer.height / 2 - bossCenter.y const distance = Math.sqrt(dx * dx + dy * dy) const speed = 4 newBossBullets.push( createBossBullet(bossCenter.x, bossCenter.y, (dx / distance) * speed, (dy / distance) * speed), ) break } } // Check player bullet vs boss collisions for (let i = newPlayerBullets.length - 1; i >= 0; i--) { if (checkCollision(newPlayerBullets[i], newBoss)) { newPlayerBullets.splice(i, 1) newBoss.hp = Math.max(0, newBoss.hp - 1) newState.score += 10 } } // Check boss bullet vs player collisions if (newPlayer.invulnerable === 0) { for (let i = newBossBullets.length - 1; i >= 0; i--) { if (checkCollision(newBossBullets[i], newPlayer)) { newBossBullets.splice(i, 1) newPlayer.hp = Math.max(0, newPlayer.hp - 1) newPlayer.invulnerable = 120 // 2 seconds of invulnerability } } } // Check win/lose conditions if (newBoss.hp <= 0) { return { ...newState, gameWon: true, score: newState.score + 1000 } } if (newPlayer.hp <= 0) { return { ...newState, gameOver: true } } // Boss phase changes if (newBoss.hp < newBoss.maxHp * 0.5 && newBoss.phase === 1) { newBoss.phase = 2 newBoss.color = "#7c2d12" // Darker red for phase 2 } return { ...newState, player: newPlayer, boss: newBoss, playerBullets: newPlayerBullets, bossBullets: newBossBullets, } }) }, []) const draw = useCallback(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas with gradient background const gradient = ctx.createLinearGradient(0, 0, 0, CANVAS_HEIGHT) gradient.addColorStop(0, "#1e1b4b") gradient.addColorStop(1, "#312e81") ctx.fillStyle = gradient ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) if (gameState.gameStarted && !gameState.gameOver && !gameState.gameWon) { // Draw player (with invulnerability flashing) if (gameState.player.invulnerable === 0 || Math.floor(gameState.player.invulnerable / 10) % 2 === 0) { ctx.fillStyle = gameState.player.color ctx.fillRect(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height) // Player details (eyes and mouth) ctx.fillStyle = "#ffffff" ctx.fillRect(gameState.player.x + 8, gameState.player.y + 8, 6, 6) ctx.fillRect(gameState.player.x + 26, gameState.player.y + 8, 6, 6) ctx.fillStyle = "#000000" ctx.fillRect(gameState.player.x + 10, gameState.player.y + 10, 2, 2) ctx.fillRect(gameState.player.x + 28, gameState.player.y + 10, 2, 2) ctx.fillRect(gameState.player.x + 15, gameState.player.y + 25, 10, 3) } // Draw boss ctx.fillStyle = gameState.boss.color ctx.fillRect(gameState.boss.x, gameState.boss.y, gameState.boss.width, gameState.boss.height) // Boss details (angry eyes) ctx.fillStyle = "#ffffff" ctx.fillRect(gameState.boss.x + 20, gameState.boss.y + 20, 15, 15) ctx.fillRect(gameState.boss.x + 85, gameState.boss.y + 20, 15, 15) ctx.fillStyle = "#000000" ctx.fillRect(gameState.boss.x + 25, gameState.boss.y + 25, 8, 8) ctx.fillRect(gameState.boss.x + 87, gameState.boss.y + 25, 8, 8) // Boss mouth ctx.fillStyle = "#000000" ctx.fillRect(gameState.boss.x + 40, gameState.boss.y + 80, 40, 8) // Draw player bullets ctx.fillStyle = "#fbbf24" gameState.playerBullets.forEach((bullet) => { ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height) }) // Draw boss bullets ctx.fillStyle = "#ef4444" gameState.bossBullets.forEach((bullet) => { ctx.beginPath() ctx.arc(bullet.x + bullet.width / 2, bullet.y + bullet.height / 2, bullet.width / 2, 0, Math.PI * 2) ctx.fill() }) // Draw HP bars // Player HP ctx.fillStyle = "#dc2626" ctx.fillRect(20, 20, 200, 20) ctx.fillStyle = "#22c55e" ctx.fillRect(20, 20, (gameState.player.hp / gameState.player.maxHp) * 200, 20) ctx.strokeStyle = "#ffffff" ctx.lineWidth = 2 ctx.strokeRect(20, 20, 200, 20) ctx.fillStyle = "#ffffff" ctx.font = "16px Arial" ctx.fillText(`Player HP: ${gameState.player.hp}/${gameState.player.maxHp}`, 20, 60) // Boss HP ctx.fillStyle = "#dc2626" ctx.fillRect(CANVAS_WIDTH - 220, 20, 200, 20) ctx.fillStyle = "#22c55e" ctx.fillRect(CANVAS_WIDTH - 220, 20, (gameState.boss.hp / gameState.boss.maxHp) * 200, 20) ctx.strokeStyle = "#ffffff" ctx.lineWidth = 2 ctx.strokeRect(CANVAS_WIDTH - 220, 20, 200, 20) ctx.fillStyle = "#ffffff" ctx.font = "16px Arial" ctx.fillText(`Boss HP: ${gameState.boss.hp}/${gameState.boss.maxHp}`, CANVAS_WIDTH - 220, 60) // Draw score ctx.fillStyle = "#ffffff" ctx.font = "20px Arial" ctx.fillText(`Score: ${gameState.score}`, 20, CANVAS_HEIGHT - 20) // Draw phase indicator if (gameState.boss.phase === 2) { ctx.fillStyle = "#fbbf24" ctx.font = "24px Arial" ctx.textAlign = "center" ctx.fillText("PHASE 2!", CANVAS_WIDTH / 2, 100) ctx.textAlign = "left" } } // Draw game over screen if (gameState.gameOver) { ctx.fillStyle = "rgba(0, 0, 0, 0.8)" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ctx.fillStyle = "#ef4444" ctx.font = "48px Arial" ctx.textAlign = "center" ctx.fillText("GAME OVER", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 40) ctx.fillStyle = "#ffffff" ctx.font = "24px Arial" ctx.fillText(`Final Score: ${gameState.score}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 20) ctx.fillText("Press R to restart", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 60) ctx.textAlign = "left" } // Draw win screen if (gameState.gameWon) { ctx.fillStyle = "rgba(0, 0, 0, 0.8)" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ctx.fillStyle = "#22c55e" ctx.font = "48px Arial" ctx.textAlign = "center" ctx.fillText("VICTORY!", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 40) ctx.fillStyle = "#ffffff" ctx.font = "24px Arial" ctx.fillText(`Final Score: ${gameState.score}`, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 20) ctx.fillText("Press R to play again", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 60) ctx.textAlign = "left" } // Draw start screen if (!gameState.gameStarted) { ctx.fillStyle = "rgba(0, 0, 0, 0.8)" ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ctx.fillStyle = "#fbbf24" ctx.font = "48px Arial" ctx.textAlign = "center" ctx.fillText("BOSS BATTLE", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 80) ctx.fillStyle = "#ffffff" ctx.font = "20px Arial" ctx.fillText("WASD or Arrow Keys to move", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 - 20) ctx.fillText("SPACE or Z to shoot", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 10) ctx.fillText("Defeat the boss to win!", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 40) ctx.fillText("Click START to begin", CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2 + 80) ctx.textAlign = "left" } }, [gameState]) const gameLoop = useCallback(() => { updateGame() draw() gameLoopRef.current = requestAnimationFrame(gameLoop) }, [updateGame, draw]) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { setGameState((prev) => ({ ...prev, keys: { ...prev.keys, [event.key]: true }, })) if (event.key === " " || event.key === "z") { event.preventDefault() shootPlayerBullet() } else if (event.key === "r" && (gameState.gameOver || gameState.gameWon)) { resetGame() } } const handleKeyUp = (event: KeyboardEvent) => { setGameState((prev) => ({ ...prev, keys: { ...prev.keys, [event.key]: false }, })) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [shootPlayerBullet, resetGame, gameState.gameOver, gameState.gameWon]) useEffect(() => { if (gameState.gameStarted && !gameState.gameOver && !gameState.gameWon) { gameLoopRef.current = requestAnimationFrame(gameLoop) } return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [gameLoop, gameState.gameStarted, gameState.gameOver, gameState.gameWon]) useEffect(() => { draw() }, [draw]) return (

컵헤드 스타일 보스 배틀

) } [V0_FILE]typescriptreact:file="types.ts" export interface Vector2 { x: number y: number } export interface Player { x: number y: number width: number height: number hp: number maxHp: number speed: number color: string invulnerable: number weaponLevel: { damage: number fireRate: number bulletSize: number bulletSpeed: number multiShot: number } } export interface Boss { id: number name: string x: number y: number width: number height: number hp: number maxHp: number color: string attackTimer: number attackPattern: number phase: number phaseThresholds: number[] attackSpeed: number bulletSpeed: number bulletSize: number } export interface Bullet { x: number y: number width: number height: number velocityX: number velocityY: number color: string isPlayerBullet: boolean damage?: number } export interface GameState { screen: "lobby" | "shop" | "game" | "gameOver" | "victory" player: Player boss: Boss | null playerBullets: Bullet[] bossBullets: Bullet[] keys: { [key: string]: boolean } gameStarted: boolean gameWon: boolean gameOver: boolean score: number gold: number currentStage: number stagesCompleted: number[] } export interface StageInfo { id: number name: string description: string difficulty: string reward: number boss: Boss completed: boolean } export interface UpgradeOption { id: string name: string description: string cost: number maxLevel: number currentLevel: number effect: (player: Player) => Player } [V0_FILE]typescriptreact:file="game-engine.tsx" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Card, CardContent } from "@/components/ui/card" import type { GameState, Bullet, StageInfo, UpgradeOption } from "./types" import LobbyScreen from "./screens/lobby-screen" import ShopScreen from "./screens/shop-screen" import GameScreen from "./screens/game-screen" import GameOverScreen from "./screens/game-over-screen" import VictoryScreen from "./screens/victory-screen" import { bosses } from "./data/bosses" import { upgradeOptions } from "./data/upgrades" export default function GameEngine() { const canvasRef = useRef(null) const gameLoopRef = useRef() const lastShotTime = useRef(0) const CANVAS_WIDTH = 800 const CANVAS_HEIGHT = 600 const SHOT_COOLDOWN = 150 // milliseconds const [gameState, setGameState] = useState({ screen: "lobby", player: { x: 100, y: 300, width: 40, height: 40, hp: 5, maxHp: 5, speed: 5, color: "#3b82f6", invulnerable: 0, weaponLevel: { damage: 1, fireRate: 1, bulletSize: 1, bulletSpeed: 1, multiShot: 1, }, }, boss: null, playerBullets: [], bossBullets: [], keys: {}, gameStarted: false, gameWon: false, gameOver: false, score: 0, gold: 0, currentStage: 0, stagesCompleted: [], }) const [stages, setStages] = useState( bosses.map((boss, index) => ({ id: index + 1, name: boss.name, description: `Fight against ${boss.name}!`, difficulty: index === 0 ? "Easy" : "Hard", reward: (index + 1) * 100, boss: boss, completed: false, })), ) const [upgrades, setUpgrades] = useState(upgradeOptions) const startGame = useCallback( (stageId: number) => { const selectedStage = stages.find((stage) => stage.id === stageId) if (!selectedStage) return setGameState((prev) => ({ ...prev, screen: "game", player: { ...prev.player, x: 100, y: 300, hp: prev.player.maxHp, invulnerable: 0, }, boss: JSON.parse(JSON.stringify(selectedStage.boss)), // Deep copy playerBullets: [], bossBullets: [], gameStarted: true, gameWon: false, gameOver: false, score: 0, currentStage: stageId, })) }, [stages], ) const returnToLobby = useCallback(() => { setGameState((prev) => ({ ...prev, screen: "lobby", gameStarted: false, })) }, []) const goToShop = useCallback(() => { setGameState((prev) => ({ ...prev, screen: "shop", })) }, []) const purchaseUpgrade = useCallback( (upgradeId: string) => { const upgrade = upgrades.find((u) => u.id === upgradeId) if (!upgrade) return if (upgrade.currentLevel >= upgrade.maxLevel) return if (gameState.gold < upgrade.cost) return setGameState((prev) => { const newPlayer = upgrade.effect({ ...prev.player }) return { ...prev, player: newPlayer, gold: prev.gold - upgrade.cost, } }) setUpgrades((prev) => prev.map((u) => { if (u.id === upgradeId) { return { ...u, currentLevel: u.currentLevel + 1, cost: Math.floor(u.cost * 1.5), } } return u }), ) }, [gameState.gold, upgrades], ) const shootPlayerBullet = useCallback(() => { const now = Date.now() const cooldown = SHOT_COOLDOWN / gameState.player.weaponLevel.fireRate if (now - lastShotTime.current < cooldown) return lastShotTime.current = now setGameState((prev) => { if (prev.screen !== "game" || !prev.gameStarted || prev.gameOver || prev.gameWon) return prev const bullets: Bullet[] = [] const multiShot = prev.player.weaponLevel.multiShot const bulletSize = 4 + prev.player.weaponLevel.bulletSize * 2 const bulletSpeed = 8 * prev.player.weaponLevel.bulletSpeed // Calculate spread based on multiShot for (let i = 0; i < multiShot; i++) { let angleOffset = 0 if (multiShot > 1) { angleOffset = ((i / (multiShot - 1)) * 20 - 10) * (Math.PI / 180) } bullets.push({ x: prev.player.x + prev.player.width, y: prev.player.y + prev.player.height / 2 - bulletSize / 2, width: bulletSize, height: bulletSize, velocityX: Math.cos(angleOffset) * bulletSpeed, velocityY: Math.sin(angleOffset) * bulletSpeed, color: "#fbbf24", isPlayerBullet: true, damage: prev.player.weaponLevel.damage, }) } return { ...prev, playerBullets: [...prev.playerBullets, ...bullets], } }) }, [gameState.player.weaponLevel, gameState.screen, gameState.gameStarted, gameState.gameOver, gameState.gameWon]) const createBossBullet = (x: number, y: number, vx: number, vy: number, size = 6, color = "#ef4444"): Bullet => ({ x, y, width: size, height: size, velocityX: vx, velocityY: vy, color, isPlayerBullet: false, }) const checkCollision = (rect1: any, rect2: any): boolean => { 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 updateGame = useCallback(() => { setGameState((prev) => { if (prev.screen !== "game" || !prev.gameStarted || prev.gameOver || prev.gameWon || !prev.boss) return prev const newState = { ...prev } const newPlayer = { ...newState.player } const newBoss = { ...newState.boss } // Update player movement if (newState.keys["ArrowLeft"] || newState.keys["a"]) { newPlayer.x = Math.max(0, newPlayer.x - newPlayer.speed) } if (newState.keys["ArrowRight"] || newState.keys["d"]) { newPlayer.x = Math.min(CANVAS_WIDTH - newPlayer.width, newPlayer.x + newPlayer.speed) } if (newState.keys["ArrowUp"] || newState.keys["w"]) { newPlayer.y = Math.max(0, newPlayer.y - newPlayer.speed) } if (newState.keys["ArrowDown"] || newState.keys["s"]) { newPlayer.y = Math.min(CANVAS_HEIGHT - newPlayer.height, newPlayer.y + newPlayer.speed) } // Update invulnerability if (newPlayer.invulnerable > 0) { newPlayer.invulnerable-- } // Update boss newBoss.attackTimer++ // Boss movement (more complex pattern based on phase) const phaseMultiplier = newBoss.phase * 0.5 newBoss.y += Math.sin(newBoss.attackTimer * 0.02) * (2 + phaseMultiplier) // In higher phases, add horizontal movement if (newBoss.phase >= 2) { newBoss.x += Math.sin(newBoss.attackTimer * 0.01) * 1.5 newBoss.x = Math.max(CANVAS_WIDTH / 2, Math.min(CANVAS_WIDTH - newBoss.width - 20, newBoss.x)) } // Boss attack patterns const attackFrequency = Math.max(30, 120 - newBoss.phase * 20) if (newBoss.attackTimer % attackFrequency === 0) { newBoss.attackPattern = Math.floor(Math.random() * (2 + newBoss.phase)) } // Update bullets const newPlayerBullets = newState.playerBullets .map((bullet) => ({ ...bullet, x: bullet.x + bullet.velocityX, y: bullet.y + bullet.velocityY, })) .filter((bullet) => bullet.x < CANVAS_WIDTH && bullet.x > -bullet.width) const newBossBullets = newState.bossBullets .map((bullet) => ({ ...bullet, x: bullet.x + bullet.velocityX, y: bullet.y + bullet.velocityY, })) .filter( (bullet) => bullet.x > -bullet.width && bullet.x < CANVAS_WIDTH + bullet.width && bullet.y > -bullet.height && bullet.y < CANVAS_HEIGHT + bullet.height, ) // Boss attacks const attackInterval = Math.max(20, 60 - newBoss.phase * 10) if (newBoss.attackTimer % attackInterval === 0) { const bossCenter = { x: newBoss.x + newBoss.width / 2, y: newBoss.y + newBoss.height / 2, } const bulletSpeed = newBoss.bulletSpeed + newBoss.phase * 0.5 const bulletSize = newBoss.bulletSize // Execute attack pattern based on current pattern and phase switch (newBoss.attackPattern) { case 0: // Straight shots for (let i = 0; i < 3 + newBoss.phase; i++) { newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y + (i - (2 + newBoss.phase) / 2) * 20, -bulletSpeed, 0, bulletSize, "#ef4444", ), ) } break case 1: // Circular pattern const bulletCount = 8 + newBoss.phase * 2 for (let i = 0; i < bulletCount; i++) { const angle = (i / bulletCount) * Math.PI * 2 newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y, Math.cos(angle) * bulletSpeed, Math.sin(angle) * bulletSpeed, bulletSize, "#ef4444", ), ) } break case 2: // Aimed at player const dx = newPlayer.x + newPlayer.width / 2 - bossCenter.x const dy = newPlayer.y + newPlayer.height / 2 - bossCenter.y const distance = Math.sqrt(dx * dx + dy * dy) for (let i = 0; i < 1 + Math.floor(newBoss.phase / 2); i++) { const spreadAngle = (i - Math.floor(newBoss.phase / 4)) * 0.2 const spreadDx = dx * Math.cos(spreadAngle) - dy * Math.sin(spreadAngle) const spreadDy = dx * Math.sin(spreadAngle) + dy * Math.cos(spreadAngle) const spreadDistance = Math.sqrt(spreadDx * spreadDx + spreadDy * spreadDy) newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y, (spreadDx / spreadDistance) * bulletSpeed, (spreadDy / spreadDistance) * bulletSpeed, bulletSize, "#ef4444", ), ) } break case 3: // Spiral pattern (phase 2+) if (newBoss.phase >= 2) { const spiralCount = 3 + newBoss.phase const spiralAngle = (newBoss.attackTimer * 0.1) % (Math.PI * 2) for (let i = 0; i < spiralCount; i++) { const angle = spiralAngle + (i / spiralCount) * Math.PI * 2 newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y, Math.cos(angle) * bulletSpeed, Math.sin(angle) * bulletSpeed, bulletSize, "#9333ea", // Purple for spiral ), ) } } break case 4: // Wave pattern (phase 3+) if (newBoss.phase >= 3) { for (let i = 0; i < 5; i++) { const waveSpeed = bulletSpeed * 0.8 newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y - 40 + i * 20, -waveSpeed, Math.sin(newBoss.attackTimer * 0.1 + i) * 2, bulletSize, "#2563eb", // Blue for wave ), ) } } break } // Add combined attacks in higher phases if (newBoss.phase >= 3 && newBoss.attackTimer % (attackInterval * 3) === 0) { // Bullet hell - random bullets in all directions for (let i = 0; i < 12; i++) { const randomAngle = Math.random() * Math.PI * 2 const randomSpeed = bulletSpeed * (0.5 + Math.random() * 0.5) newBossBullets.push( createBossBullet( bossCenter.x, bossCenter.y, Math.cos(randomAngle) * randomSpeed, Math.sin(randomAngle) * randomSpeed, bulletSize, "#f97316", // Orange for random ), ) } } } // Check player bullet vs boss collisions let goldEarned = 0 for (let i = newPlayerBullets.length - 1; i >= 0; i--) { if (checkCollision(newPlayerBullets[i], newBoss)) { const damage = newPlayerBullets[i].damage || 1 newBoss.hp = Math.max(0, newBoss.hp - damage) newPlayerBullets.splice(i, 1) newState.score += 10 // Small chance to earn gold on hit if (Math.random() < 0.1) { goldEarned += 1 } // Check for phase change for (let p = 0; p < newBoss.phaseThresholds.length; p++) { const threshold = newBoss.phaseThresholds[p] if (newBoss.hp <= threshold * newBoss.maxHp && newBoss.phase === p + 1) { newBoss.phase += 1 newBoss.color = newBoss.phase === 2 ? "#7c2d12" : "#450a0a" // Darker colors for higher phases } } } } // Check boss bullet vs player collisions if (newPlayer.invulnerable === 0) { for (let i = newBossBullets.length - 1; i >= 0; i--) { if (checkCollision(newBossBullets[i], newPlayer)) { newBossBullets.splice(i, 1) newPlayer.hp = Math.max(0, newPlayer.hp - 1) newPlayer.invulnerable = 120 // 2 seconds of invulnerability } } } // Check win/lose conditions if (newBoss.hp <= 0) { // Find the stage that was completed const stageIndex = stages.findIndex((s) => s.id === newState.currentStage) if (stageIndex !== -1) { // Mark stage as completed if not already if (!newState.stagesCompleted.includes(newState.currentStage)) { const stageReward = stages[stageIndex].reward goldEarned += stageReward setStages((prevStages) => prevStages.map((stage) => (stage.id === newState.currentStage ? { ...stage, completed: true } : stage)), ) } } return { ...newState, screen: "victory", gameWon: true, score: newState.score + 1000, gold: newState.gold + goldEarned, stagesCompleted: [...new Set([...newState.stagesCompleted, newState.currentStage])], } } if (newPlayer.hp <= 0) { return { ...newState, screen: "gameOver", gameOver: true, gold: newState.gold + Math.floor(goldEarned / 2), // Get half gold on death } } return { ...newState, player: newPlayer, boss: newBoss, playerBullets: newPlayerBullets, bossBullets: newBossBullets, score: newState.score, gold: newState.gold + goldEarned, } }) }, []) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { setGameState((prev) => ({ ...prev, keys: { ...prev.keys, [event.key]: true }, })) if ((event.key === " " || event.key === "z") && gameState.screen === "game") { event.preventDefault() shootPlayerBullet() } else if (event.key === "Escape") { // ESC key to return to lobby if (gameState.screen === "game" || gameState.screen === "shop") { returnToLobby() } } } const handleKeyUp = (event: KeyboardEvent) => { setGameState((prev) => ({ ...prev, keys: { ...prev.keys, [event.key]: false }, })) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [gameState.screen, shootPlayerBullet, returnToLobby]) useEffect(() => { if (gameState.screen === "game" && gameState.gameStarted && !gameState.gameOver && !gameState.gameWon) { gameLoopRef.current = requestAnimationFrame(function gameLoop() { updateGame() gameLoopRef.current = requestAnimationFrame(gameLoop) }) } return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [gameState.screen, gameState.gameStarted, gameState.gameOver, gameState.gameWon, updateGame]) return (

보스 배틀 게임

{gameState.screen === "lobby" && ( )} {gameState.screen === "shop" && ( )} {gameState.screen === "game" && ( )} {gameState.screen === "gameOver" && ( startGame(gameState.currentStage)} onReturn={returnToLobby} /> )} {gameState.screen === "victory" && ( { const nextStage = gameState.currentStage + 1 if (nextStage <= stages.length) { startGame(nextStage) } else { returnToLobby() } }} onReturn={returnToLobby} /> )}

) } [V0_FILE]typescriptreact:file="data/bosses.ts" import type { Boss } from "../types" export const bosses: Boss[] = [ { id: 1, name: "Crimson Sentinel", x: 600, y: 200, width: 120, height: 120, hp: 100, maxHp: 100, color: "#dc2626", attackTimer: 0, attackPattern: 0, phase: 1, phaseThresholds: [0.6, 0.3], // Phase changes at 60% and 30% HP attackSpeed: 1, bulletSpeed: 3, bulletSize: 6, }, { id: 2, name: "Void Harbinger", x: 600, y: 200, width: 140, height: 140, hp: 150, maxHp: 150, color: "#4c1d95", attackTimer: 0, attackPattern: 0, phase: 1, phaseThresholds: [0.7, 0.4, 0.2], // Phase changes at 70%, 40%, and 20% HP attackSpeed: 1.2, bulletSpeed: 3.5, bulletSize: 8, }, ] [V0_FILE]typescriptreact:file="data/upgrades.ts" import type { UpgradeOption, Player } from "../types" export const upgradeOptions: UpgradeOption[] = [ { id: "damage", name: "데미지 강화", description: "총알의 데미지를 증가시킵니다", cost: 50, maxLevel: 5, currentLevel: 1, effect: (player: Player) => ({ ...player, weaponLevel: { ...player.weaponLevel, damage: player.weaponLevel.damage + 1, }, }), }, { id: "fireRate", name: "발사 속도 강화", description: "총알 발사 속도를 증가시킵니다", cost: 75, maxLevel: 5, currentLevel: 1, effect: (player: Player) => ({ ...player, weaponLevel: { ...player.weaponLevel, fireRate: player.weaponLevel.fireRate + 0.2, }, }), }, { id: "bulletSize", name: "총알 크기 강화", description: "총알의 크기를 증가시킵니다", cost: 60, maxLevel: 3, currentLevel: 1, effect: (player: Player) => ({ ...player, weaponLevel: { ...player.weaponLevel, bulletSize: player.weaponLevel.bulletSize + 1, }, }), }, { id: "bulletSpeed", name: "총알 속도 강화", description: "총알의 속도를 증가시킵니다", cost: 40, maxLevel: 3, currentLevel: 1, effect: (player: Player) => ({ ...player, weaponLevel: { ...player.weaponLevel, bulletSpeed: player.weaponLevel.bulletSpeed + 0.3, }, }), }, { id: "multiShot", name: "멀티샷", description: "한 번에 여러 발의 총알을 발사합니다", cost: 100, maxLevel: 3, currentLevel: 1, effect: (player: Player) => ({ ...player, weaponLevel: { ...player.weaponLevel, multiShot: player.weaponLevel.multiShot + 1, }, }), }, { id: "maxHp", name: "최대 체력 증가", description: "최대 체력을 증가시킵니다", cost: 80, maxLevel: 5, currentLevel: 1, effect: (player: Player) => ({ ...player, maxHp: player.maxHp + 1, hp: player.hp + 1, }), }, { id: "speed", name: "이동 속도 강화", description: "이동 속도를 증가시킵니다", cost: 65, maxLevel: 3, currentLevel: 1, effect: (player: Player) => ({ ...player, speed: player.speed + 1, }), }, ] [V0_FILE]typescriptreact:file="screens/lobby-screen.tsx" "use client" import { Button } from "@/components/ui/button" import type { StageInfo, Player } from "../types" interface LobbyScreenProps { stages: StageInfo[] gold: number player: Player onStartGame: (stageId: number) => void onGoToShop: () => void } export default function LobbyScreen({ stages, gold, player, onStartGame, onGoToShop }: LobbyScreenProps) { return (

로비

보유 골드: {gold} G

플레이어 정보

체력: {player.hp}/{player.maxHp}

이동 속도: {player.speed}

데미지: {player.weaponLevel.damage}

발사 속도: {Math.round(player.weaponLevel.fireRate * 100)}%

총알 크기: {player.weaponLevel.bulletSize}

총알 속도: {Math.round(player.weaponLevel.bulletSpeed * 100)}%

멀티샷: {player.weaponLevel.multiShot}발

스테이지 선택

{stages.map((stage) => (

{stage.name}

{stage.description}

{stage.difficulty} 보상: {stage.reward} G

{stage.completed && 클리어!}

))}

) } [V0_FILE]typescriptreact:file="screens/shop-screen.tsx" "use client" import { Button } from "@/components/ui/button" import type { UpgradeOption } from "../types" interface ShopScreenProps { gold: number upgrades: UpgradeOption[] onPurchase: (upgradeId: string) => void onReturn: () => void } export default function ShopScreen({ gold, upgrades, onPurchase, onReturn }: ShopScreenProps) { return (

무기 상점

보유 골드: {gold} G

업그레이드

{upgrades.map((upgrade) => (

{upgrade.name}

{upgrade.description}

레벨: {upgrade.currentLevel}/{upgrade.maxLevel} 가격: {upgrade.cost} G

))}

) } [V0_FILE]typescriptreact:file="screens/game-screen.tsx" "use client" import { useEffect, type RefObject } from "react" import { Button } from "@/components/ui/button" import type { GameState } from "../types" interface GameScreenProps { canvasRef: RefObject gameState: GameState canvasWidth: number canvasHeight: number onShoot: () => void onReturn: () => void } export default function GameScreen({ canvasRef, gameState, canvasWidth, canvasHeight, onShoot, onReturn, }: GameScreenProps) { useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx || !gameState.boss) return // Clear canvas with gradient background const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight) gradient.addColorStop(0, "#1e1b4b") gradient.addColorStop(1, "#312e81") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvasWidth, canvasHeight) // Draw player (with invulnerability flashing) if (gameState.player.invulnerable === 0 || Math.floor(gameState.player.invulnerable / 10) % 2 === 0) { ctx.fillStyle = gameState.player.color ctx.fillRect(gameState.player.x, gameState.player.y, gameState.player.width, gameState.player.height) // Player details (eyes and mouth) ctx.fillStyle = "#ffffff" ctx.fillRect(gameState.player.x + 8, gameState.player.y + 8, 6, 6) ctx.fillRect(gameState.player.x + 26, gameState.player.y + 8, 6, 6) ctx.fillStyle = "#000000" ctx.fillRect(gameState.player.x + 10, gameState.player.y + 10, 2, 2) ctx.fillRect(gameState.player.x + 28, gameState.player.y + 10, 2, 2) ctx.fillRect(gameState.player.x + 15, gameState.player.y + 25, 10, 3) } // Draw boss ctx.fillStyle = gameState.boss.color ctx.fillRect(gameState.boss.x, gameState.boss.y, gameState.boss.width, gameState.boss.height) // Boss details (angry eyes) ctx.fillStyle = "#ffffff" ctx.fillRect(gameState.boss.x + 20, gameState.boss.y + 20, 15, 15) ctx.fillRect(gameState.boss.x + 85, gameState.boss.y + 20, 15, 15) ctx.fillStyle = "#000000" ctx.fillRect(gameState.boss.x + 25, gameState.boss.y + 25, 8, 8) ctx.fillRect(gameState.boss.x + 87, gameState.boss.y + 25, 8, 8) // Boss mouth ctx.fillStyle = "#000000" ctx.fillRect(gameState.boss.x + 40, gameState.boss.y + 80, 40, 8) // Draw player bullets gameState.playerBullets.forEach((bullet) => { ctx.fillStyle = bullet.color ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height) }) // Draw boss bullets gameState.bossBullets.forEach((bullet) => { ctx.fillStyle = bullet.color ctx.beginPath() ctx.arc(bullet.x + bullet.width / 2, bullet.y + bullet.height / 2, bullet.width / 2, 0, Math.PI * 2) ctx.fill() }) // Draw HP bars // Player HP ctx.fillStyle = "#dc2626" ctx.fillRect(20, 20, 200, 20) ctx.fillStyle = "#22c55e" ctx.fillRect(20, 20, (gameState.player.hp / gameState.player.maxHp) * 200, 20) ctx.strokeStyle = "#ffffff" ctx.lineWidth = 2 ctx.strokeRect(20, 20, 200, 20) ctx.fillStyle = "#ffffff" ctx.font = "16px Arial" ctx.fillText(`Player HP: ${gameState.player.hp}/${gameState.player.maxHp}`, 20, 60) // Boss HP ctx.fillStyle = "#dc2626" ctx.fillRect(canvasWidth - 220, 20, 200, 20) ctx.fillStyle = "#22c55e" ctx.fillRect(canvasWidth - 220, 20, (gameState.boss.hp / gameState.boss.maxHp) * 200, 20) ctx.strokeStyle = "#ffffff" ctx.lineWidth = 2 ctx.strokeRect(canvasWidth - 220, 20, 200, 20) ctx.fillStyle = "#ffffff" ctx.font = "16px Arial" ctx.fillText(`${gameState.boss.name}: ${gameState.boss.hp}/${gameState.boss.maxHp}`, canvasWidth - 220, 60) // Draw score and gold ctx.fillStyle = "#ffffff" ctx.font = "20px Arial" ctx.fillText(`Score: ${gameState.score}`, 20, canvasHeight - 40) ctx.fillText(`Gold: ${gameState.gold}`, 20, canvasHeight - 10) // Draw phase indicator if (gameState.boss.phase > 1) { ctx.fillStyle = gameState.boss.phase === 2 ? "#fbbf24" : "#ef4444" ctx.font = "24px Arial" ctx.textAlign = "center" ctx.fillText(`PHASE ${gameState.boss.phase}!`, canvasWidth / 2, 100) ctx.textAlign = "left" } }, [canvasRef, gameState, canvasWidth, canvasHeight]) return (

) } [V0_FILE]typescriptreact:file="screens/game-over-screen.tsx" "use client" import { Button } from "@/components/ui/button" interface GameOverScreenProps { score: number gold: number onRetry: () => void onReturn: () => void } export default function GameOverScreen({ score, gold, onRetry, onReturn }: GameOverScreenProps) { return (

게임 오버

최종 점수: {score}

획득한 골드: {gold} G

무기를 업그레이드하여 더 강해진 후 다시 도전해보세요!

) } [V0_FILE]typescriptreact:file="screens/victory-screen.tsx" "use client" import { Button } from "@/components/ui/button" interface VictoryScreenProps { score: number gold: number stageId: number onNextStage: () => void onReturn: () => void } export default function VictoryScreen({ score, gold, stageId, onNextStage, onReturn }: VictoryScreenProps) { return (

승리!

최종 점수: {score}

획득한 골드: {gold} G

스테이지 {stageId} 클리어!

획득한 골드로 무기를 업그레이드하여 더 강력한 보스에 도전해보세요!

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import GameEngine from "../game-engine" export default function Page() { return }