[V0_FILE]typescriptreact:file="App.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import GameBoyEmulator from "./GameBoyEmulator" const App = () => { return (

) } export default App [V0_FILE]typescriptreact:file="GameBoyEmulator.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef, useCallback } from "react" import { PsychedelicBackground } from "./PsychedelicBackground" export default function GameBoyEmulator() { const GAME_WIDTH = 160 const GAME_HEIGHT = 144 const BASE_PIXIE_SPEED = 0.2 // Reduced initial speed const SPEED_INCREMENT = 0.04 // Speed increase per point const [teapotX, setTeapotX] = useState(GAME_WIDTH / 2) const [teapotY, setTeapotY] = useState(GAME_HEIGHT - 30) const [showWelcomeScreen, setShowWelcomeScreen] = useState(true) const [loadingProgress, setLoadingProgress] = useState(0) const [pixies, setPixies] = useState([ { id: 1, x: 50, y: 20, dx: BASE_PIXIE_SPEED, dy: BASE_PIXIE_SPEED }, { id: 2, x: 100, y: 40, dx: -BASE_PIXIE_SPEED, dy: BASE_PIXIE_SPEED }, { id: 3, x: 80, y: 60, dx: BASE_PIXIE_SPEED, dy: -BASE_PIXIE_SPEED }, ]) const [score, setScore] = useState(0) const [gameOver, setGameOver] = useState(false) const gameLoopRef = useRef(null) const pressedKeys = useRef>(new Set()) const longPressTimers = useRef<{ [key: string]: NodeJS.Timeout }>({}) const getCurrentSpeed = useCallback( (baseSpeed: number) => { // Calculate speed multiplier based on score const speedMultiplier = 1 + score * SPEED_INCREMENT return baseSpeed * speedMultiplier }, [score], ) const resetGame = useCallback(() => { setTeapotX(GAME_WIDTH / 2) setTeapotY(GAME_HEIGHT - 30) setPixies([ { id: 1, x: 50, y: 20, dx: BASE_PIXIE_SPEED, dy: BASE_PIXIE_SPEED }, { id: 2, x: 100, y: 40, dx: -BASE_PIXIE_SPEED, dy: BASE_PIXIE_SPEED }, { id: 3, x: 80, y: 60, dx: BASE_PIXIE_SPEED, dy: -BASE_PIXIE_SPEED }, ]) setScore(0) setGameOver(false) setShowWelcomeScreen(true) setLoadingProgress(0) }, []) useEffect(() => { if (showWelcomeScreen) { const progressInterval = setInterval(() => { setLoadingProgress((prev) => { if (prev >= 100) { clearInterval(progressInterval) return 100 } return prev + 2 }) }, 100) const timer = setTimeout(() => { setShowWelcomeScreen(false) }, 5000) return () => { clearTimeout(timer) clearInterval(progressInterval) } } }, [showWelcomeScreen]) const moveTeapot = useCallback((direction: "left" | "right" | "up" | "down", isLongPress: boolean) => { const baseSpeed = 2 const speedMultiplier = isLongPress ? 2 : 1 const speed = baseSpeed * speedMultiplier switch (direction) { case "left": setTeapotX((prev) => Math.max(prev - speed, 20)) break case "right": setTeapotX((prev) => Math.min(prev + speed, GAME_WIDTH - 20)) break case "up": setTeapotY((prev) => Math.max(prev - speed, 20)) break case "down": setTeapotY((prev) => Math.min(prev + speed, GAME_HEIGHT - 20)) break } }, []) const handleKeyEvent = useCallback( (e: KeyboardEvent, isKeyDown: boolean) => { if (gameOver && isKeyDown) { if (e.key === "Enter" || e.key === " ") { resetGame() } return } const key = e.key.toLowerCase() if (["arrowleft", "arrowright", "arrowup", "arrowdown"].includes(key)) { if (isKeyDown) { pressedKeys.current.add(key) if (!longPressTimers.current[key]) { longPressTimers.current[key] = setTimeout(() => { moveTeapot(key.replace("arrow", "") as "left" | "right" | "up" | "down", true) }, 300) } } else { pressedKeys.current.delete(key) if (longPressTimers.current[key]) { clearTimeout(longPressTimers.current[key]) delete longPressTimers.current[key] } } if (isKeyDown) { moveTeapot(key.replace("arrow", "") as "left" | "right" | "up" | "down", false) } } }, [gameOver, moveTeapot, resetGame], ) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => handleKeyEvent(e, true) const handleKeyUp = (e: KeyboardEvent) => handleKeyEvent(e, false) window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [handleKeyEvent]) const spawnNewPixie = useCallback(() => { const baseSpeed = BASE_PIXIE_SPEED const currentSpeed = getCurrentSpeed(baseSpeed) const newPixie = { id: Date.now(), x: Math.random() * (GAME_WIDTH - 20) + 10, y: 0, dx: (Math.random() - 0.5) * currentSpeed * 2, // Horizontal speed varies more dy: Math.random() * currentSpeed + currentSpeed * 0.5, // Vertical speed is always positive } setPixies((currentPixies) => [...currentPixies, newPixie]) }, [getCurrentSpeed]) useEffect(() => { if (gameOver || showWelcomeScreen) return function gameLoop() { setPixies((prevPixies) => { const updatedPixies = prevPixies .map((p) => { // Calculate current speed for each pixie based on their original direction const speedMultiplier = getCurrentSpeed(1) const normalizedDx = p.dx / Math.abs(p.dx || 1) // Preserve direction const normalizedDy = p.dy / Math.abs(p.dy || 1) // Preserve direction const currentDx = normalizedDx * Math.abs(p.dx) * speedMultiplier const currentDy = normalizedDy * Math.abs(p.dy) * speedMultiplier return { ...p, x: p.x + currentDx, y: p.y + currentDy, } }) .filter((p) => p.x >= 0 && p.x <= GAME_WIDTH && p.y >= 0 && p.y <= GAME_HEIGHT) const collectedPixies = updatedPixies.filter((p) => { const horizontalRange = 30 const verticalRange = 20 const isTeapotBelow = teapotY > p.y return Math.abs(p.x - teapotX) < horizontalRange && Math.abs(p.y - teapotY) < verticalRange && isTeapotBelow }) if (collectedPixies.length > 0) { setScore((s) => s + collectedPixies.length) collectedPixies.forEach(() => spawnNewPixie()) } const remainingPixies = updatedPixies.filter((p) => !collectedPixies.includes(p)) if (remainingPixies.length === 0) { setGameOver(true) } return remainingPixies }) gameLoopRef.current = requestAnimationFrame(gameLoop) } gameLoopRef.current = requestAnimationFrame(gameLoop) return () => { if (gameLoopRef.current) { cancelAnimationFrame(gameLoopRef.current) } } }, [teapotX, teapotY, spawnNewPixie, gameOver, showWelcomeScreen, getCurrentSpeed]) // GameBoy color palette const shellColor = "#8B956D" const screenColor = "#849B76" const gameBackground = "#9bbc0f" // GameBoy sprite colors const darkest = "#0f380f" const dark = "#306230" const light = "#8bac0f" const TeapotSprite = ({ x, y, size = 32 }: { x: number; y: number; size?: number }) => (

{/* Teapot body */}

{/* Spout */}

{/* Handle */}

{/* Window */}

) const PixieSprite = ({ x, y }: { x: number; y: number }) => (

{/* Head */}

{/* Body */}

{/* Arms */}

) const ScoreDisplay = () => (

{score.toString().padStart(5, "0")}

) const GameOverDisplay = () => (

GAME OVER

Score: {score}

Play Again?

) const WelcomeScreen = () => (

Gongzilla

{/* Moved up slightly */}

Collect the Pot-Head Pixies ... we're flying to Planet Gong!

) return (

GameGrrrrl

{[...Array(4)].map((_, i) => (

))}

gameOver && resetGame()} > {showWelcomeScreen ? ( ) : ( <> {!gameOver && } {!gameOver && pixies.map((p) => )} {gameOver && } )}

) } [V0_FILE]typescriptreact:file="PsychedelicBackground.tsx" isEdit="true" isQuickEdit="true" export const PsychedelicBackground = () => { return (

{/* Central orb */}

{/* Rotating patterns */}

{/* Floating orbs */}

{/* Pulsing overlay */}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This