Ghost Games Arcade：一個鬧鬼網站內的 20 款鬼怪迷你遊戲

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 simple ghost-themed mini-games, all accessible from one website.

🎮 Play the Arcade

🔗 Live Demo: [ADD YOUR RENDER URL HERE]

💻 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 different categories:

Category	Games
Arcade	Ghost Catcher, Ghost Jump, Ghost Flappy, Ghost Runner, Haunted Pong
Puzzle	Memory Match, Word Scramble, Tic-Tac-Toe, Number Puzzle, Memory Quiz
Adventure	Haunted Maze Escape, Ghost Detective, Haunted Treasure Hunt
Survival	Pumpkin Dodge, Soul Collector, Ghost Shooter, The Last Ghost
Other	Whack-a-Ghost, Ghost Reaction Test, Ghost Tower

Every game has its own gameplay, controls, scoring, and restart functionality.

A few screenshots from the arcade

[ADD GAME SELECTION SCREENSHOT HERE]

[ADD GAMEPLAY SCREENSHOT HERE]

[ADD GAME OVER / SCORE SCREENSHOT HERE]

👻 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.

🛠️ How I Built It

I used modern frontend technologies to create the arcade experience.

Technology Stack

Next.js: Application structure and page rendering.
TypeScript: Type safety and maintainable code.
Tailwind CSS: Responsive styling and UI design.
GSAP: Animations, transitions, and interactive effects.
Three.js: Interactive 3D ghost elements.
HTML Canvas: Lightweight arcade gameplay.
Local Storage: Saving high scores and favorites.
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, transitions, 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.

I used 3D selectively because most mini-games work better with lightweight Canvas or React-based gameplay.

🤖 Where Open-Source AI Fits In

The Week 4 challenge asks us to build something with open-source AI at its core and explain why open innovation matters.

For Ghost Games Arcade, I wanted to explore how open-source AI can contribute to an interactive browser experience.

[ADD YOUR ACTUAL AI IMPLEMENTATION HERE]

The AI component of the project is:

Model / Framework: [ADD MODEL OR FRAMEWORK]
What it does: [EXPLAIN THE AI FEATURE]
Why I chose an open-source approach: [EXPLAIN YOUR REASON]

The goal is to keep the experience accessible, avoid unnecessary paid services, and make it possible for developers to inspect, modify, and extend the project.

Open innovation gives developers the freedom to experiment with their own implementations instead of depending entirely on closed platforms.

🚀 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.
Connecting the GitHub repository to Render.
Deploying the generated website.
Sharing the live arcade URL.

This keeps the deployment simple and makes it easy for anyone to access the games.

Render Integration

The project is available here:

🔗 [ADD YOUR LIVE RENDER URL HERE]

💻 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.
Implementing reusable game components.
Developing game logic.
Working through TypeScript issues.
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.
Building reusable game components.
Managing keyboard and touch controls.
Working with GSAP animations.
Integrating Three.js into a Next.js application.
Deploying a static website.
Using AI-assisted development tools.

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.
Additional difficulty levels.
More achievements and unlockable content.
Improved mobile gameplay.
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.
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: [ADD YOUR RENDER URL HERE]

⭐ 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? 👻