/** * # Whack-a-Ghost 👻 * * A spooky twist on the classic Whack-a-Mole game. * * ## Features * * - Four difficulty levels with increasing grid sizes and speeds * - Responsive design with a ghostly theme * - Score tracking and time limits * - Wrong click counter with game-over condition * - Confetti celebration when the player wins the game * - Mobile-friendly layout and interactions * * ## How to Play * * 1. Choose a difficulty level * 2. Click or tap on ghosts as they appear in the grid * 3. Avoid empty cells * 4. Score as many points as possible before time runs out * * ## Game Rules * * - +1 point for each ghost clicked * - Game ends when the timer reaches 0 or after 10 wrong clicks * - Higher levels feature larger grids and faster ghost appearances * - All levels have a 20-second time limit * * Enjoy the ghostly fun on any device! 🎃 */ /** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti@1.6.0"; import React, { useCallback, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const GRID_SIZES = [4, 5, 6, 7]; // Grid sizes for each level const LEVEL_SPEEDS = [1000, 800, 600, 400]; const GAME_DURATIONS = [20, 20, 20, 20]; // 20 seconds for all levels const MAX_WRONG_CLICKS = 10; // Maximum allowed wrong clicks before losing const WINNING_SCORE = 15; // Score required to win the game /** * HomeButton component - Renders a button to return to the home screen * @param {Object} props - Component props * @param {Function} props.onClick - Function to handle button click */ function HomeButton({ onClick }) { return ( ); } /** * SpookyMessage component - Displays a game over message with a ghost animation * @param {Object} props - Component props * @param {Function} props.onHomeClick - Function to handle home button click * @param {boolean} props.isTimeOut - Whether the game ended due to timeout * @param {number} props.score - The player's final score * @param {boolean} props.isTooManyWrongClicks - Whether the game ended due to too many wrong clicks * @param {boolean} props.isWin - Whether the player has won the game */ function SpookyMessage({ onHomeClick, isTimeOut, score, isTooManyWrongClicks, isWin }) { console.log("SpookyMessage rendered. isWin:", isWin, "score:", score); return (

{isWin ? "You Win! 🏆" : "Game Over!"}

{isWin ?

Congratulations! You've mastered the art of ghost-whacking!

: isTooManyWrongClicks ?

Too many wrong clicks! The ghosts have overwhelmed you...

The ghosts have overwhelmed you...

}

Final Score: {score}

{isWin ? "🏆" : "👻"}

); } /** * GameDescription component - Displays game instructions and rules */ function GameDescription() { return (

How to Play

Choose a difficulty level
Click or tap on ghosts as they appear
Avoid empty cells
Score points before time runs out

Game Rules

+1 point per ghost whacked
Game ends when timer hits 0 or after 10 wrong clicks
Higher levels = larger grids and faster ghosts
All levels have a 20-second time limit
Win by scoring {WINNING_SCORE} points

Enjoy the ghostly fun! 🎃

); } /** * Main App component for the Whack-a-Ghost game */ function App() { const [score, setScore] = useState(0); const [activeGhost, setActiveGhost] = useState(-1); const [level, setLevel] = useState(0); const [gameStarted, setGameStarted] = useState(false); const [timeLeft, setTimeLeft] = useState(GAME_DURATIONS[0]); const [wrongClicks, setWrongClicks] = useState(0); const [lost, setLost] = useState(false); const [isTimeOut, setIsTimeOut] = useState(false); const [isTooManyWrongClicks, setIsTooManyWrongClicks] = useState(false); const [isWin, setIsWin] = useState(false); const gridSize = GRID_SIZES[level]; const totalCells = gridSize * gridSize; /** * Starts a new game */ const startGame = useCallback(() => { setScore(0); setGameStarted(true); setTimeLeft(GAME_DURATIONS[level]); setWrongClicks(0); setLost(false); setIsTimeOut(false); setIsTooManyWrongClicks(false); setIsWin(false); }, [level]); /** * Ends the current game * @param {boolean} isTimeout - Whether the game ended due to timeout * @param {boolean} isTooManyWrong - Whether the game ended due to too many wrong clicks * @param {boolean} isWinning - Whether the player has won the game */ const endGame = useCallback((isTimeout: boolean, isTooManyWrong: boolean, isWinning: boolean) => { setGameStarted(false); setIsTimeOut(isTimeout); setIsTooManyWrongClicks(isTooManyWrong); setIsWin(isWinning); setLost(!isWinning); console.log( "Game ended. isWin:", isWinning, "Score:", score, "isTimeout:", isTimeout, "isTooManyWrong:", isTooManyWrong, ); if (isWinning) { triggerConfetti(); } }, [score]); /** * Handles ghost clicking logic * @param {number} index - Index of the clicked cell */ const whackGhost = useCallback((index: number) => { if (index === activeGhost) { setScore((prevScore) => { const newScore = prevScore + 1; console.log("New score:", newScore); if (newScore >= WINNING_SCORE) { console.log("Win condition met!"); endGame(false, false, true); } return newScore; }); setActiveGhost(-1); } else { setWrongClicks((prevWrongClicks) => { const newWrongClicks = prevWrongClicks + 1; if (newWrongClicks >= MAX_WRONG_CLICKS) { endGame(false, true, false); } return newWrongClicks; }); } }, [activeGhost, endGame]); /** * Triggers confetti animation for winning the game */ const triggerConfetti = useCallback(() => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }); }, []); /** * Returns to the home screen */ const goHome = useCallback(() => { setGameStarted(false); setLost(false); setLevel(0); setIsWin(false); }, []); // Game loop effect useEffect(() => { if (!gameStarted) return; const ghostInterval = setInterval(() => { const newGhostPosition = Math.floor(Math.random() * totalCells); setActiveGhost(newGhostPosition); }, LEVEL_SPEEDS[level]); const timerInterval = setInterval(() => { setTimeLeft((prevTime) => { if (prevTime <= 1) { clearInterval(ghostInterval); clearInterval(timerInterval); endGame(true, false, false); return 0; } return prevTime - 1; }); }, 1000); return () => { clearInterval(ghostInterval); clearInterval(timerInterval); }; }, [gameStarted, level, totalCells, endGame]); return (

Whack-a-Ghost 👻

{!gameStarted ? ( lost || isWin ? ( ) : ( <>

Select Level

{LEVEL_SPEEDS.map((_, index) => ( ))}

) ) : ( <>

Score: {score}

Time: {timeLeft}s

Wrong: {wrongClicks}/{MAX_WRONG_CLICKS}

{[...Array(totalCells)].map((_, index) => (

whackGhost(index)} > {activeGhost === index && "👻"}

))}

)}

View Source

); } /** * Client-side rendering function */ export function client() { const rootElement = document.getElementById("root"); if (rootElement) { createRoot(rootElement).render(); } else { console.error("Root element not found"); } } if (typeof document !== "undefined") { client(); } /** * Server-side rendering function * @param {Request} request - The incoming request object * @returns {Promise} The response object with the HTML content */ export default async function server(request: Request): Promise { return new Response( ` Whack-a-Ghost

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } body { margin: 0; font-family: 'Roboto', sans-serif; background-color: #1a1a1a; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23333333' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #f0f0f0; } .game-container { text-align: center; background-color: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 20px; box-shadow: 0 0 30px rgba(173, 216, 230, 0.2); width: 90%; max-width: 800px; display: flex; flex-direction: column; align-items: center; } h1, h2 { font-family: 'Creepster', cursive; color: #ff6b6b; text-shadow: 3px 3px 6px rgba(255, 0, 0, 0.5); margin-bottom: 20px; } h1 { font-size: 3em; animation: flicker 5s infinite; } h2 { font-size: 2em; } .menu { display: flex; flex-direction: column; align-items: center; width: 100%; } button { margin: 10px; padding: 10px 20px; font-size: 18px; cursor: pointer; background-color: #4a0e0e; color: #f0f0f0; border: none; border-radius: 10px; transition: all 0.3s; font-family: 'Creepster', cursive; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); width: 100%; max-width: 300px; } button:hover, button:active { background-color: #6a0e0e; transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 0, 0, 0.5); } .home-button { background-color: #2a4a0e; } .home-button:hover, .home-button:active { background-color: #3a6a0e; } .game-info { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; width: 100%; } .score, .timer, .wrong-clicks { font-size: 18px; color: #4df0e8; text-shadow: 2px 2px 4px rgba(77, 240, 232, 0.5); margin: 5px; } .grid { display: grid; gap: 10px; margin: 0 auto 20px; justify-content: center; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; } .cell { background-color: #2a2a2a; display: flex; justify-content: center; align-items: center; font-size: 30px; cursor: pointer; border-radius: 10px; transition: all 0.3s; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); aspect-ratio: 1 / 1; } .cell:hover, .cell:active { background-color: #3a3a3a; transform: scale(1.05); box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); } .ghost { background-color: #4a0e0e; animation: flicker 0.5s infinite; } .spooky-message { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 300px; } .spooky-message h2 { font-size: 3em; margin-bottom: 20px; } .spooky-message p { font-size: 1.2em; margin-bottom: 20px; } .spooky-ghost { font-size: 4em; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .source-link { margin-top: 20px; } .source-link a { color: #4df0e8; text-decoration: none; font-size: 0.9em; transition: all 0.3s; } .source-link a:hover { color: #ff6b6b; text-decoration: underline; } .game-description { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 15px; margin-bottom: 20px; text-align: left; width: 100%; max-width: 600px; } .game-description h3 { color: #ff6b6b; font-family: 'Creepster', cursive; font-size: 1.5em; margin-bottom: 10px; } .game-description ul { list-style-type: none; padding-left: 0; } .game-description li { margin-bottom: 5px; font-size: 1em; } .game-description li::before { content: "👻 "; margin-right: 5px; } .game-description p { font-size: 1.1em; font-weight: bold; color: #4df0e8; margin-top: 15px; } @media (max-width: 600px) { .game-container { padding: 10px; } h1 { font-size: 2.5em; } h2 { font-size: 1.8em; } button { font-size: 16px; padding: 8px 16px; } .game-info { font-size: 16px; } .cell { font-size: 24px; } .spooky-message h2 { font-size: 2.5em; } .spooky-message p { font-size: 1em; } .spooky-ghost { font-size: 3em; } .game-description h3 { font-size: 1.3em; } .game-description li { font-size: 0.9em; } .game-description p { font-size: 1em; } } `;

whackaghost