[V0_FILE]typescriptreact:file="app/page.tsx" 'use client' import { useState, useEffect, useCallback } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { useLocalStorage } from './hooks/useLocalStorage' import styles from './page.module.css' export default function PopTheMonkey() { const [score, setScore] = useState(0) const [highScore, setHighScore] = useLocalStorage('highScore', 0) const [misses, setMisses] = useState(0) const [gameOver, setGameOver] = useState(false) const [monkeyProps, setMonkeyProps] = useState({ size: 20, opacity: 1, x: 0, y: 0, }) const [growthRate, setGrowthRate] = useState(1) const resetMonkey = useCallback(() => { const maxWidth = typeof window !== 'undefined' ? window.innerWidth - 100 : 300 const maxHeight = typeof window !== 'undefined' ? window.innerHeight - 100 : 300 setMonkeyProps({ size: 20, opacity: 1, x: Math.random() * maxWidth, y: Math.random() * maxHeight, }) }, []) const handleMonkeyClick = () => { const pointsEarned = Math.round(monkeyProps.opacity * 100) setScore((prevScore) => prevScore + pointsEarned) setMisses(0) setGrowthRate((prevRate) => prevRate * 1.1) resetMonkey() } useEffect(() => { if (score > highScore) { setHighScore(score) } }, [score, highScore, setHighScore]) useEffect(() => { if (misses >= 3) { setGameOver(true) } }, [misses]) useEffect(() => { if (gameOver) return const growInterval = setInterval(() => { setMonkeyProps((prev) => { const newSize = prev.size + growthRate const newOpacity = Math.max(0, prev.opacity - 0.01 * growthRate) if (newSize >= Math.min(window.innerWidth, window.innerHeight) || newOpacity <= 0) { setMisses((prevMisses) => prevMisses + 1) resetMonkey() return prev } return { ...prev, size: newSize, opacity: newOpacity, } }) }, 50) return () => clearInterval(growInterval) }, [gameOver, growthRate, resetMonkey]) const handleRestart = () => { setScore(0) setMisses(0) setGameOver(false) setGrowthRate(1) resetMonkey() } return (

Score: {score}

High Score: {highScore}

Misses: {misses}/3

{!gameOver && ( 🐒 )} {gameOver && (

Game Over!

Final Score: {score}

)}

) } [V0_FILE]css:file="app/page.module.css" .gameContainer { width: 100vw; height: 100vh; overflow: hidden; position: relative; background-color: #000; color: #0f0; font-family: 'Press Start 2P', cursive; } .scoreBoard { position: absolute; top: 10px; left: 10px; z-index: 10; font-size: 16px; } .monkey { position: absolute; cursor: pointer; user-select: none; } .gameOver { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 24px; } .gameOver button { margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: #0f0; color: #000; border: none; cursor: pointer; font-family: 'Press Start 2P', cursive; } @media (max-width: 768px) { .scoreBoard { font-size: 14px; } .gameOver { font-size: 20px; } .gameOver button { font-size: 16px; } } [V0_FILE]typescriptreact:file="app/hooks/useLocalStorage.ts" import { useState, useEffect } from 'react' export function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] { const [storedValue, setStoredValue] = useState(initialValue) useEffect(() => { try { const item = window.localStorage.getItem(key) if (item) { setStoredValue(JSON.parse(item)) } } catch (error) { console.log(error) } }, [key]) const setValue = (value: T) => { try { setStoredValue(value) window.localStorage.setItem(key, JSON.stringify(value)) } catch (error) { console.log(error) } } return [storedValue, setValue] } [V0_FILE]typescript:file="app/manifest.ts" import { MetadataRoute } from 'next' export default function manifest(): MetadataRoute.Manifest { return { name: 'Pop the Monkey', short_name: 'PopMonkey', description: 'A fun retro-style game where you pop growing monkeys', start_url: '/', display: 'standalone', background_color: '#000000', theme_color: '#00FF00', icons: [ { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', }, ], } } [V0_FILE]typescriptreact:file="app/layout.tsx" import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Pop the Monkey', description: 'A fun retro-style game where you pop growing monkeys', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" :root { --max-width: 1100px; --border-radius: 12px; --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; } * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; } body { color: rgb(var(--foreground-rgb)); background: #000; } a { color: inherit; text-decoration: none; } @media (prefers-color-scheme: dark) { html { color-scheme: dark; } }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This