This is a submission for Frontend Challenge - Halloween Edition, CSS Art.
Play it only big screen
Demo
My Journey Creating GHOSTFIELD
How I Built This Game in 8 Days
Eight days ago, I had a simple idea: what if I made a game where you run through a haunted mansion, dodging ghosts and collecting glowing orbs?
That idea became GHOSTFIELD.
For 8 straight days, I worked on this game. Some days were tough when things didn't work right. Other days were amazing when I finally got the ghosts to chase you properly or when the neon lights started glowing just right.
I'm really proud of what I created. GHOSTFIELD is more than just a game to me. It's proof that I can turn an idea into something real.
Welcome to Ghostfield Manor, a cursed mansion where ghosts roam free. This place exists between our world and theirs. It's dangerous, it's mysterious, and it's your only way out.
Your goal is simple: collect 10 mystical orbs scattered around the mansion. These orbs hold special energy, and getting all of them is your ticket to escape.
But here's the problem: you're not alone. Ghosts live here. Some just wander around, trapped forever. But others... they know you're here. And they're coming for you.
You have one weapon: a flashlight. It can stun ghosts for a few seconds, giving you time to run. Use it wisely because your time is limited.
Can you collect all the orbs and escape Ghostfield alive?
How to Play
Moving Around:
- On Computer: Use WASD or Arrow Keys to move
- On Phone: Use the joystick on your screen
- Flashlight: Hold SPACEBAR (or tap the 🔦 button on mobile)
- Pause: Press ESC or P key (or tap the pause button)
What You Need to Do:
Find and collect all 10 green glowing orbs before time runs out. Don't let the ghosts catch you!
The Ghosts:
- Purple Ghosts 💜 = Walking around randomly
- Red Ghosts 🔴 = DANGER! They spotted you and are chasing you!
- Yellow Ghosts 💛 = Stunned by your flashlight (safe for now)
- If a ghost touches you: lose 10 health
Special Power-Ups:
Sometimes you'll find helpful items:
- ❤️ Health = Get back 30 health points
- ⚡ Speed = Run faster for 5 seconds
- ⭐ Shield = Ghosts can't hurt you for 5 seconds
Your Screen:
- Health Bar = Don't let it hit zero!
- Orb Count = Shows how many you collected (X/10)
- Score = Try to beat your high score
- Timer = Shows how much time you have left
- Mini Map = Small map showing where everything is
The Rules you need to Follow
How to Win:
✅ Collect all 10 orbs before time ends = YOU WIN!
How to Lose:
❌ Health hits zero = Game Over
❌ Time runs out = Game Over
Pick Your Difficulty:
- Easy = 3 ghosts, 4 minutes (good for first time)
- Medium = 5 ghosts, 3 minutes (more challenging)
- Hard = 8 ghosts, 2 minutes (super hard!)
How Points Work:
- Collect orb: +100 points
- Stun ghost: +50 points
- Grab power-up: +50 points
- Leftover time at the end: +10 points per second
Tips to Help You Win
If You're New:
- Start with Easy mode to learn how ghosts move
- Look at the mini map a lot
- Only use your flashlight when ghosts get close
- Stay near the edges, so ghosts can't surround you
For Better Players:
- Remember where orbs are located
- Watch how ghosts move and predict where they'll go
- Don't use power-ups right away, save them for emergencies
- On Hard mode, plan which orbs to get first
For Speed Players:
- Grab orbs in a circle pattern
- Use flashlight only when you have to
- Speed boosts are your best friend
- Try to finish with 1 minute left for bonus points
The Truth About Making GHOSTFIELD
My 8-Day Story
I want to be honest with you about how I made this game.
Days 1-2: I came up with the idea. Player runs around, ghosts chase, collect orbs to win. I wanted it to look cool with neon colors and feel scary but fun.
Days 3-4: This was the hardest part. Making the ghosts smart enough to chase you, but not impossible to beat. I spent hours testing and fixing this.
Days 5-6: Making it look good. The glowing effects, the particles flying around, the flashlight beam. I wanted every second to look exciting.
Day 7: Getting it to work on phones. GHOSTFIELD needs to work for everyone.
Day 8: Testing everything one more time, making sure it's balanced and fun.
Being Honest About AI Help
I made GHOSTFIELD with help from AI. I need to be clear about this:
The game idea, the design, how it should feel, how hard it should be - that's all from me. But I used AI to help me write the code faster, fix bugs, and make things work better.
Think of it like this: I'm the artist who knows exactly what painting I want to create. AI is like having really good brushes and paints that help me create it. The vision is mine. The tools helped me build it.
I'm proud of this. I think using AI as a helper is smart, and I wanted to be honest with you about it.
What's Inside
Made With:
- HTML5 Canvas (for drawing everything)
- JavaScript (for making it work)
- CSS3 (for making it look good)
- Works on phones and computers
Cool Features:
✨ Ghosts that actually hunt you down
✨ Particles and glowing effects everywhere
✨ Mini map so you know where things are
✨ Three difficulty levels
✨ Live health bar and score
✨ Touch controls for phones
✨ Can pause, restart, or quit anytime
✨ Win and lose screens with your final score
Thank You
Thanks to everyone who supported me during these 8 days. And thank you for playing GHOSTFIELD. I hope you have fun!
Now... the field is waiting. Ready to enter? 👻⚡
— — — — — — — — — — — — — — — — — — — — — — —
Did you learn something good today?
Then show some love. 🫰
© Muhammad Usman
WordPress Developer | Website Strategist | SEO Specialist
Don’t forget to subscribe to Developer’s Journey to show your support.
Available for freelance projects on Upwork
Top comments (1)
I want you to play it in full desktop / laptop screen for better experience.