What if you could enter a haunted arcade, discover 20 different ghost games, and start playing instantly — without creating an account, downloading anything, or paying a single rupee?
That's the idea behind Ghost Games Arcade, my project for the Hacktoberfest Open-Source AI Challenge: Week 4 — Ghost in the Machine.
I wanted to build something fun, interactive, and accessible. Instead of creating another spooky chatbot, I decided to bring the Halloween spirit into a playable browser arcade.
The result is a collection of 20 ghost-themed mini-games, all accessible from one website.
🎮 Play the Arcade
🔗 Live Demo: Gost Games
💻 GitHub Repository: Gost-games
📸 Screenshots:
No login. No registration. No downloads. Just open the website and play.
🕹️ What Is Ghost Games Arcade?
Ghost Games Arcade is a browser-based gaming website inspired by retro arcades, Halloween, haunted mansions, and mysterious spirits.
The idea is simple: create one website where people can discover and play multiple small games without having to visit different websites or install separate applications.
The arcade includes 20 mini-games across four categories:
| Category | Games |
|---|---|
| Arcade | Ghost Catcher, Ghost Jump, Ghost Flappy, Haunted Whack-a-Ghost, Soul Collector, Ghost Runner, Ghost Reaction Test, Haunted Pong, Ghost Tower |
| Puzzle | Ghost Memory Match, Haunted Word Scramble, Ghost Tic-Tac-Toe, Haunted Number Puzzle, Haunted Memory Quiz |
| Adventure | Haunted Maze Escape, Ghost Detective, Haunted Treasure Hunt |
| Survival | Pumpkin Dodge, Ghost Shooter, The Last Ghost |
Every game has its own gameplay, controls, scoring, and restart functionality. Some are quick reflex tests, others are puzzles or exploration games, and a few are full survival challenges.
A few examples:
- Ghost Catcher — a 30-second arcade hunt. Catch blue ghosts for 10 points, golden ghosts for 30, and avoid bomb ghosts that cost you points.
- Haunted Maze Escape — explore a freshly generated maze, collect all three keys, avoid patrolling spirits, and find the exit with three lives.
- Haunted Word Scramble — unscramble spooky words against an 80-second clock. Hints reduce your reward, correct words add time, and streaks increase your score.
- Ghost Tic-Tac-Toe — play ghosts against pumpkins across a best-of-three match with three AI difficulty levels.
- Haunted Number Puzzle — a sliding 8-puzzle with a timer, move counter, shuffle, and score based on speed and efficiency.
- Haunted Memory Quiz — ten folklore and horror questions with speed bonuses, an accuracy report, and a final score screen.
- Ghost Tower — drop moving blocks onto a haunted tower. Perfect drops score double and preserve your width; a complete miss ends the run.
- Ghost Shooter — a top-down survival arena with escalating waves, WASD movement, and Space to fire.
- The Last Ghost — survive an endless void of hunters, collect energy orbs, and keep your shield alive for as long as possible.
- Haunted Treasure Hunt — explore a fog-covered graveyard grid, dig up treasure, avoid traps, collect keys, and escape.
They all share the same game framework: a start screen with rules and controls, pause and resume, restart, sound toggle, live score, personal best, and an animated game-over screen. Progress is saved locally, including best scores, favorites, games played, survival records, and achievements.
There are also seven achievements to unlock, including First Spirit, Ghost Hunter, Puzzle Master, Survivor, Arcade Legend, High Roller, and Soul Collector. Unlocks appear as animated toast notifications with a synthesized chime.
A few screenshots from the arcade
👻 The Theme: Ghost in the Machine
For this challenge, I wanted to interpret the theme in a slightly different way.
Instead of building a traditional ghost story, I created a digital haunted arcade where ghosts live inside the games.
The player enters the arcade, chooses a game, and interacts with these digital spirits through puzzles, challenges, and arcade mechanics.
The project brings together the nostalgic feeling of retro games with a modern web experience.
The goal was to make something that people could immediately interact with and enjoy.
I also leaned into the “machine” part of the theme: the ghosts are rendered with code, the sounds are synthesized in the browser, and every cover illustration is generated with SVG and CSS rather than downloaded as an image asset.
🛠️ How I Built It
I used modern frontend technologies to create the arcade experience.
Technology Stack
- Next.js 15: Application structure, App Router, and static export.
- React 19: Component architecture and game interfaces.
- TypeScript: Type safety and maintainable game state.
- Tailwind CSS: Responsive styling and UI design.
- GSAP + ScrollTrigger: Animations, transitions, and interactive effects.
- Three.js + React Three Fiber + Drei: Interactive 3D ghost elements.
- HTML Canvas: Lightweight arcade gameplay.
- Zustand + persist: Saving high scores, favorites, stats, and achievements.
- Web Audio API: Synthesized sound effects.
- Local Storage: Saving progress locally in the browser.
- Render: Hosting the website.
I kept the architecture frontend-focused so the arcade could run without a traditional backend.
The games run directly in the browser, and user progress is stored locally.
Why GSAP and Three.js?
GSAP helps make the website feel alive through animated game cards, scroll reveals, transitions, modals, counters, and visual effects.
Three.js adds an interactive 3D ghost to the landing page, making the experience feel more like entering a haunted arcade than opening a normal website.
The hero ghost uses a custom-deformed sphere geometry with a translucent material, glowing eyes, blinking, mouse-follow movement, floating particles, stars, and soft contact shadows. It is lazy-loaded so Three.js does not block the initial page, and there is a fallback illustration if WebGL is unavailable.
I used 3D selectively because most mini-games work better with lightweight Canvas or React-based gameplay.
The shared game framework
Building 20 separate games could easily turn into 20 separate codebases, so I created a shared runtime:
- A single
GameShellhandles start, pause, resume, restart, exit, score, best score, game over, and sound. - Every game talks to the shell through a shared
useGameApi()context. - A reusable canvas hook handles DPR-aware resizing,
ResizeObserver, delta-time clamping, and cleanup. - Game loops stop when paused or when the modal is closed.
- All 20 games are lazy-loaded with dynamic imports and only downloaded when opened.
- The Zustand store hydrates after mount to avoid SSR and localStorage mismatches.
-
prefers-reduced-motiondisables or reduces GSAP timelines, CSS animations, and 3D motion.
The static export produces a plain out/ directory with no server requirement.
🚀 Why I Chose Render
I wanted the arcade to be accessible through a simple URL.
Render made it possible to deploy the website as a static site without maintaining a traditional server.
The application uses Next.js static export, which produces a deployable website that can be hosted on Render.
The deployment process includes:
- Building the application with Next.js.
- Exporting the static website to
out/. - Connecting the GitHub repository to Render.
- Deploying the generated website.
- Sharing the live arcade URL.
The project also includes a render.yaml blueprint with the build command, publish directory, Node version, security headers, and a rewrite rule. No environment variables or backend services are required.
This keeps the deployment simple and makes it easy for anyone to access the games.
Render Integration
The project is available here:
🔗 Click Here to Play Gost Games
💻 How GitHub Copilot Helped
GitHub Copilot was part of my development workflow while building the arcade.
I used Copilot to assist with:
- Structuring the application and reusable game components.
- Implementing repetitive game logic such as timers, scoring, and restart flows.
- Working through TypeScript issues across 20 different game modules.
- Refactoring shared state, controls, and canvas helpers.
- Debugging layout, input, and persistence problems.
- Preparing the static export and Render deployment configuration.
- Improving the overall development workflow.
Building 20 mini-games means dealing with repeated patterns such as game states, controls, scoring, timers, and restart functionality.
Copilot helped me work through these repetitive implementation tasks while allowing me to focus on the gameplay experience and the overall architecture.
🎯 What I Learned
Building this project helped me explore several areas of frontend and game development:
- Creating interactive browser-based games with Canvas and React.
- Building reusable game components and a shared runtime.
- Managing keyboard, mouse, and touch controls.
- Working with GSAP animations and scroll-triggered effects.
- Integrating Three.js and React Three Fiber into a Next.js application.
- Handling local persistence without an account system.
- Deploying a static website and keeping the build reproducible.
- Improving accessibility and performance for an interactive site.
- Using AI-assisted development tools effectively.
One of the biggest challenges was keeping the games lightweight while making the website feel like one cohesive arcade.
Rather than treating every game as a completely separate application, I used a shared structure for common functionality such as starting, pausing, restarting, and tracking scores.
🔮 What's Next?
There are several things I would like to improve:
- More ghost characters and visual effects.
- Selectable difficulty modes for more games.
- More achievements and unlockable content.
- A daily challenge or rotating featured game.
- Further mobile-specific gameplay refinements.
- More interactive AI-generated game experiences.
- Additional mini-games and arcade challenges.
The goal is to keep the arcade simple, fun, and accessible while making it a place where people can discover new little games.
🏆 Prize Categories
I am submitting Ghost Games Arcade for the following categories:
Best Use of Render: I used Render to deploy and host my Ghost Games Arcade, making the game accessible to anyone through a live website. Render made it easy to take the project from development to a playable online experience. The site is exported as a static Next.js build and deployed with a Render blueprint, with no backend services required.
Best Use of GitHub Copilot: I used GitHub Copilot as an AI coding assistant while creating the arcade. It helped me write and improve code, build game mechanics, troubleshoot issues, and speed up development of the 20 spooky mini-games.
These integrations are part of the project's development and deployment workflow.
🙌 Try It Out
If you enjoy spooky games, retro arcades, or interactive web experiences, give Ghost Games Arcade a try.
🔗 Live Website: Gost Games
⭐ GitHub Repository: Gost-Games
If you have feedback, ideas for new games, or suggestions for improvements, I would love to hear them.
Thanks for checking out my project!
Happy Halloween, and remember:
The ghosts are waiting. Are you brave enough to play? 👻
Top comments (0)