[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface GameObject { x: number y: number width: number height: number speed: number direction: number color: string } interface Player { x: number y: number width: number height: number } const CANVAS_WIDTH = 800 const CANVAS_HEIGHT = 600 const LANE_HEIGHT = 50 const PLAYER_SIZE = 30 const SAFE_ZONES = [0, 250, 550] // Start, middle (river bank), end export default function FroggerGame() { const canvasRef = useRef(null) const gameLoopRef = useRef() const [score, setScore] = useState(0) const [lives, setLives] = useState(3) const [gameState, setGameState] = useState<"playing" | "gameOver" | "paused">("playing") const [highScore, setHighScore] = useState(0) // Game objects const playerRef = useRef({ x: CANVAS_WIDTH / 2 - PLAYER_SIZE / 2, y: CANVAS_HEIGHT - LANE_HEIGHT, width: PLAYER_SIZE, height: PLAYER_SIZE, }) const carsRef = useRef([]) const logsRef = useRef([]) const keysRef = useRef>(new Set()) // Initialize game objects const initializeGame = useCallback(() => { // Reset player position playerRef.current = { x: CANVAS_WIDTH / 2 - PLAYER_SIZE / 2, y: CANVAS_HEIGHT - LANE_HEIGHT, width: PLAYER_SIZE, height: PLAYER_SIZE, } // Initialize cars (road lanes) carsRef.current = [] const carColors = ["#FF0000", "#0000FF", "#FFFF00", "#FF8C00", "#800080", "#00FF00"] for (let lane = 0; lane < 4; lane++) { const y = CANVAS_HEIGHT - (lane + 2) * LANE_HEIGHT const direction = lane % 2 === 0 ? 1 : -1 const speed = 2 + Math.random() * 2 for (let i = 0; i < 3; i++) { carsRef.current.push({ x: direction > 0 ? -100 - i * 200 : CANVAS_WIDTH + 100 + i * 200, y: y + 10, width: 60, height: 30, speed: speed, direction: direction, color: carColors[Math.floor(Math.random() * carColors.length)], }) } } // Initialize logs (river lanes) logsRef.current = [] for (let lane = 0; lane < 4; lane++) { const y = 50 + lane * LANE_HEIGHT const direction = lane % 2 === 0 ? -1 : 1 const speed = 1 + Math.random() * 1.5 for (let i = 0; i < 2; i++) { logsRef.current.push({ x: direction > 0 ? -150 - i * 300 : CANVAS_WIDTH + 150 + i * 300, y: y + 10, width: 120, height: 30, speed: speed, direction: direction, }) } } }, []) // Collision detection 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 ) } // Check if player is in safe zone const isInSafeZone = (y: number) => { return SAFE_ZONES.some((zone) => Math.abs(y - zone) < LANE_HEIGHT) } // Update game logic const updateGame = useCallback(() => { if (gameState !== "playing") return const player = playerRef.current const cars = carsRef.current const logs = logsRef.current // Update cars cars.forEach((car) => { car.x += car.speed * car.direction // Reset car position when it goes off screen if (car.direction > 0 && car.x > CANVAS_WIDTH + 100) { car.x = -100 - Math.random() * 200 } else if (car.direction < 0 && car.x < -100) { car.x = CANVAS_WIDTH + 100 + Math.random() * 200 } }) // Update logs logs.forEach((log) => { log.x += log.speed * log.direction // Reset log position when it goes off screen if (log.direction > 0 && log.x > CANVAS_WIDTH + 150) { log.x = -150 - Math.random() * 300 } else if (log.direction < 0 && log.x < -150) { log.x = CANVAS_WIDTH + 150 + Math.random() * 300 } }) // Check car collisions cars.forEach((car) => { if (checkCollision(player, car)) { setLives((prev) => prev - 1) // Reset player position player.x = CANVAS_WIDTH / 2 - PLAYER_SIZE / 2 player.y = CANVAS_HEIGHT - LANE_HEIGHT } }) // Check if player is in water without a log if (player.y >= 50 && player.y <= 250 && !isInSafeZone(player.y)) { let onLog = false logs.forEach((log) => { if (checkCollision(player, log)) { onLog = true // Move player with log player.x += log.speed * log.direction } }) if (!onLog) { setLives((prev) => prev - 1) // Reset player position player.x = CANVAS_WIDTH / 2 - PLAYER_SIZE / 2 player.y = CANVAS_HEIGHT - LANE_HEIGHT } } // Keep player on screen when on logs if (player.x < 0) player.x = 0 if (player.x > CANVAS_WIDTH - PLAYER_SIZE) player.x = CANVAS_WIDTH - PLAYER_SIZE // Check win condition if (player.y <= 50) { setScore((prev) => prev + 100) // Reset player position player.x = CANVAS_WIDTH / 2 - PLAYER_SIZE / 2 player.y = CANVAS_HEIGHT - LANE_HEIGHT } // Check game over if (lives <= 0) { setGameState("gameOver") if (score > highScore) { setHighScore(score) } } }, [gameState, lives, score, highScore]) // Handle keyboard input const handleKeyPress = useCallback((e: KeyboardEvent) => { keysRef.current.add(e.key.toLowerCase()) }, []) const handleKeyRelease = useCallback((e: KeyboardEvent) => { keysRef.current.delete(e.key.toLowerCase()) }, []) // Process input const processInput = useCallback(() => { if (gameState !== "playing") return const player = playerRef.current const moveDistance = 25 if (keysRef.current.has("arrowup") || keysRef.current.has("w")) { player.y = Math.max(0, player.y - moveDistance) keysRef.current.delete("arrowup") keysRef.current.delete("w") } if (keysRef.current.has("arrowdown") || keysRef.current.has("s")) { player.y = Math.min(CANVAS_HEIGHT - PLAYER_SIZE, player.y + moveDistance) keysRef.current.delete("arrowdown") keysRef.current.delete("s") } if (keysRef.current.has("arrowleft") || keysRef.current.has("a")) { player.x = Math.max(0, player.x - moveDistance) keysRef.current.delete("arrowleft") keysRef.current.delete("a") } if (keysRef.current.has("arrowright") || keysRef.current.has("d")) { player.x = Math.min(CANVAS_WIDTH - PLAYER_SIZE, player.x + moveDistance) keysRef.current.delete("arrowright") keysRef.current.delete("d") } }, [gameState]) // Render game const render = 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 road ctx.fillStyle = "#333333" ctx.fillRect(0, CANVAS_HEIGHT - 250, CANVAS_WIDTH, 200) // Draw river ctx.fillStyle = "#4169E1" ctx.fillRect(0, 50, CANVAS_WIDTH, 200) // Draw safe zones ctx.fillStyle = "#228B22" SAFE_ZONES.forEach((zone) => { ctx.fillRect(0, zone, CANVAS_WIDTH, LANE_HEIGHT) }) // Draw lane dividers ctx.strokeStyle = "#FFFF00" ctx.lineWidth = 2 ctx.setLineDash([10, 10]) for (let i = 1; i < 4; i++) { const y = CANVAS_HEIGHT - (i + 1) * LANE_HEIGHT ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(CANVAS_WIDTH, y) ctx.stroke() } ctx.setLineDash([]) // Draw cars carsRef.current.forEach((car) => { ctx.fillStyle = car.color ctx.fillRect(car.x, car.y, car.width, car.height) ctx.fillStyle = "#FFFFFF" // Left dot ctx.fillRect(car.x + 8, car.y + 8, 6, 14) // Right dot ctx.fillRect(car.x + car.width - 14, car.y + 8, 6, 14) }) // Draw logs ctx.fillStyle = "#8B4513" logsRef.current.forEach((log) => { ctx.fillRect(log.x, log.y, log.width, log.height) // Add log texture ctx.strokeStyle = "#654321" ctx.lineWidth = 2 for (let i = 0; i < 3; i++) { ctx.beginPath() ctx.moveTo(log.x, log.y + (i + 1) * 8) ctx.lineTo(log.x + log.width, log.y + (i + 1) * 8) ctx.stroke() } }) // Draw player (frog) const player = playerRef.current ctx.fillStyle = "#00FF00" ctx.fillRect(player.x, player.y, player.width, player.height) // Add simple frog details ctx.fillStyle = "#FFFFFF" ctx.fillRect(player.x + 5, player.y + 5, 8, 8) ctx.fillRect(player.x + player.width - 13, player.y + 5, 8, 8) ctx.fillStyle = "#000000" ctx.fillRect(player.x + 7, player.y + 7, 4, 4) ctx.fillRect(player.x + player.width - 11, player.y + 7, 4, 4) }, []) // Game loop const gameLoop = useCallback(() => { processInput() updateGame() render() gameLoopRef.current = requestAnimationFrame(gameLoop) }, [processInput, updateGame, render]) // Start new game const startNewGame = () => { setScore(0) setLives(3) setGameState("playing") initializeGame() } // Initialize game on mount useEffect(() => { initializeGame() window.addEventListener("keydown", handleKeyPress) window.addEventListener("keyup", handleKeyRelease) return () => { window.removeEventListener("keydown", handleKeyPress) window.removeEventListener("keyup", handleKeyRelease) } }, [initializeGame, handleKeyPress, handleKeyRelease]) // Start game loop useEffect(() => { if (gameState === "playing") { gameLoopRef.current = requestAnimationFrame(gameLoop) } else { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [gameState, gameLoop]) return (

Score: {score}

Lives: {lives}

High Score: {highScore}

Use WASD or Arrow Keys to move the frog

Cross the road avoiding cars, then cross the river using logs!

{gameState === "gameOver" && (

Game Over!

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

Paused

)}

) }