Learning Game Development with AI: My Journey Building Custom 404 Games for Every Site

Turning Error Pages Into Playgrounds

What if every broken link on your website wasn’t annoying, but fun? That’s the question that kicked off my game development journey. Instead of boring “Page Not Found” messages, I’ve been building custom mini-games for each of my sites’ 404 pages.

It started as an experiment. Now it’s become my favorite way to learn game development.

My Background: From Bootcamp to Game Dev

Four years ago, I completed a full-stack software engineering bootcamp at Avion School here in the Philippines. The curriculum covered HTML, CSS, and JavaScript for front-end development, plus Ruby on Rails for back-end work. It gave me solid fundamentals, but I never explored game development during that time.

Fast forward to today: I’m running multiple WordPress sites, working with PHP to build custom solutions, and I’ve even created an anti-spam filter that sanitizes comments – catching Binance spam links and other garbage before they hit my comment sections.

But the most fun I’ve had coding? Building games for 404 pages.

Why 404 Pages?

Think about it. When someone hits a broken link, they’re already frustrated. Why not give them something entertaining instead of just an apology?

Plus, 404 pages are perfect learning projects because:

• Low stakes – if something breaks, it’s just an error page
• Creative freedom – no client requirements, just experimentation
• Manageable scope – simple games that don’t need months of development
• Real deployment – actual users will see and play them
• Portfolio pieces – shows personality and technical skills

Each site I run gets its own custom game that matches its vibe.

My 404 Game Portfolio

EngineeredAI.net – Tic-Tac-Toe

engineeredai.net/404

This one’s special because it’s a full-circle moment. During my bootcamp at Avion School, one of my first projects was building a JavaScript tic-tac-toe game. I remember struggling with:

• Understanding game state management
• Figuring out how to check for win conditions
• Managing player turns
• Making the DOM update properly

Four years later, I rebuilt it with AI assistance for this site’s 404 page. But this version is different – it’s not just player vs player anymore. Now you play against an AI opponent. This time around, I understood why everything worked, plus I learned how to implement basic game AI logic.

What I learned:

• How to structure game logic cleanly
• Efficient win-condition checking (rows, columns, diagonals)
• Event delegation for handling clicks
• Resetting game state properly
• Implementing AI opponent logic – making the computer make strategic moves

The game evolved from my bootcamp project: instead of two people taking turns, you now play against the computer. It taught me the basics of game AI – how to make the computer block your wins, try to create its own winning moves, and play strategically.

QAJourney.net – Bug Squash (Whack-a-Mole)

qajourney.net/404

For my QA testing blog, I wanted something that fit the theme. What’s more QA-appropriate than squashing bugs?

This whack-a-mole style game taught me completely different concepts from tic-tac-toe:

• Random timing – bugs appear at unpredictable intervals
• Score tracking – keeping count of successful hits
• Countdown timers – racing against the clock
• CSS animations – making bugs pop up and disappear smoothly
• Hit detection – ensuring clicks register properly

Technical challenges I solved:

• Preventing the same position from spawning twice in a row
• Making the game responsive on mobile (touch events vs clicks)
• Balancing difficulty – too easy is boring, too hard is frustrating
• Adding visual feedback when you miss

The game is deceptively simple: bugs appear randomly, click them before they disappear, get as many as you can before time runs out.

MomentumPath.net – Rocket Turtle Sidescroller

momentumpath.net/404

This was my first attempt at a platformer-style game, and honestly, it kicked my ass (in a good way).

A 2D sidescroller involves way more moving parts than I expected:

• Character jumping – timing and height control
• Gravity simulation – what goes up must come down
• Collision detection – hitting obstacles
• Auto-scrolling background – creating the illusion of forward movement
• Game loop – constantly updating and rendering

Right now it’s in “simple mode” – the rocket turtle auto-runs forward and you control the jumping to avoid boxes that appear on the ground. That’s it. No platforms, no enemies, just you, the floor, and boxes to jump over. Think Chrome’s dinosaur game but with a rocket turtle.

What made this hard:

• Getting the physics to feel right (jump height, gravity strength)
• Detecting when the turtle hits a box
• Making the auto-scrolling smooth
• Spawning obstacles at the right intervals

This project taught me that game development is mostly tweaking numbers until things “feel” right. That perfect jump arc? Took like 30 tries.

HealthyForge.com – The Duck

healthyforge.com/404

Sometimes you just need something simple and delightful. For my health and wellness site, I added a duck that rocks back and forth.

Why a duck? Because I love ducks. That’s it. That’s the whole reason.

I wanted it to move across the screen, but honestly? The rocking motion is way cuter. Sometimes the simpler choice is the better one.

But even a simple rocking duck taught me:

• CSS animations – creating smooth rocking motion
• Transform properties – rotating elements naturally
• Animation timing – making it feel organic, not robotic
• Simple can be better – not everything needs to be complex

It’s not a “game” in the traditional sense, but it makes people smile when they hit a broken link. And that’s worth something.

RemoteWorkHaven.net – Tetris (Coming Soon)

Planning stage

My next challenge: building a Tetris-style game for my remote work site. This one’s going to be complex because Tetris involves:

• Piece rotation – handling all the different shapes
• Row clearing – detecting and removing completed lines
• Increasing difficulty – speeding up as you progress
• Score calculation – rewarding strategic play
• Piece preview – showing what’s coming next

I haven’t started yet, but I’m excited about the challenge. Tetris is a masterclass in grid-based game logic.

My Learning Method: Break, Fix, Rebuild

Here’s my approach to learning game development with AI:

Step 1: Get a Working Example

I ask AI (usually Claude) to build a basic version of what I want. Not because I’m lazy, but because I learn best by seeing working code first.

Step 2: Break Everything

I start changing values:

• What if gravity is negative?
• What happens if I remove this function?
• Can I make particles explode instead of fall?

Breaking things teaches you what each piece actually does.

Step 3: Fix What I Broke

This is where real learning happens. When something breaks, I have to understand why. I can’t just undo – I need to figure out the logic.

Step 4: Add My Own Features

Once I understand the core mechanics, I add something new. Maybe a power-up, a different control scheme, or a scoring system. This forces me to apply what I learned.

Step 5: Rebuild From Scratch

After I’ve messed with the code enough, I try rebuilding it without looking at the original. This proves I actually understand it.

Tools I Use

Claude (AI Assistant)

My go-to for getting working examples and asking “why does this work?” questions. It’s like having a patient tutor available 24/7.

Bolt.new

Perfect for rapid prototyping. I can spin up a project, test ideas quickly, and iterate without setting up a whole development environment.

GitHub

Everything I build goes into my repo at github.com/jarencudilla/engineeredai-tools. It’s my learning journal – WordPress plugins, games, experiments, all documented.

WordPress + PHP

Since I’m running these games on WordPress sites, I’ve learned how to wrap JavaScript games in PHP templates so WordPress knows how to handle them.

What I’ve Learned About Game Development

1. Games Are Just Loops

Every game is basically:

while (game is running) {
  - Get user input
  - Update game state
  - Render everything
  - Repeat
}

Once you understand this pattern, every game makes more sense.

2. Feel Matters More Than Code Quality

A perfectly coded game that feels sluggish or unresponsive is worse than hacky code that feels great. Players don’t care about your elegant algorithms – they care if the jump feels right.

3. Start Smaller Than You Think

My sidescroller ambitions were too big at first. Starting with a moving character taught me more than trying to build a full game immediately.

4. Debugging Games Is Different

Traditional bugs throw errors. Game bugs make things “feel weird” or behave unexpectedly. You need to think in terms of game state, not just code logic.

5. Every Game Teaches Different Skills

• Tic-tac-toe = logic and state management
• Whack-a-mole = timing and randomness
• Sidescroller = physics and collision
• Animation = rendering and frame timing

You can’t learn everything from one project.

Is Using AI “Cheating”?

I get this question a lot. Here’s my take: AI is a tool, not a replacement for learning.

I’m still:

• Writing code
• Debugging when things break
• Understanding the logic
• Making design decisions
• Pulling my hair out over physics bugs

AI just speeds up the “getting stuck on syntax” part. It’s like having Stack Overflow that can have a conversation with you.

Would you say using Google to look up documentation is cheating? Using a framework instead of writing everything from scratch? Learning from tutorials?

AI is just another resource. What matters is whether you understand what you’re building.

What’s Next

I’m currently exploring:

• Parallax scrolling effects – adding depth to 2D games
• Advanced particle systems – explosions, fire, weather effects
• Procedural generation – randomly generated levels
• Mobile optimization – making games work smoothly on phones

And of course, that Tetris game for RemoteWorkHaven.net.

Tips If You Want to Try This

Start With Your 404 Page

Seriously. It’s the perfect sandbox. No pressure, low stakes, and it’s a nice surprise for visitors.

Pick Simple Games First

Don’t try to build Fortnite. Build Pong. Build Snake. Build tic-tac-toe. Simple games teach fundamental concepts.

Use AI as a Learning Partner

Get working code, then break it and fix it. Don’t just copy-paste and move on.

Deploy Your Games

There’s something motivating about knowing real people might play what you built. Even if it’s just your 404 page.

Document Your Journey

I keep everything in GitHub. It helps me see progress and gives me code to reference later.

Don’t Worry About Perfect Code

Your first game will be messy. That’s fine. You’ll refactor it later when you know more.

The Real Lesson

These 404 games aren’t just about learning JavaScript or game development. They’re about:

• Experimentation – trying things without fear of failure
• Iteration – improving gradually instead of seeking perfection
• Joy – remembering that coding should be fun
• Personality – adding character to technical projects

That tic-tac-toe game on my 404 page represents more than just code. It’s a full-circle moment from bootcamp to now. It’s proof that learning never stops. It’s a small way to make the web a little more delightful.

And honestly? When someone tweets about finding a game on a 404 page instead of complaining about a broken link, that feels pretty good.

Try It Yourself

Check out my games:

• engineeredai.net/404 – Tic-Tac-Toe
• qajourney.net/404 – Bug Squash
• momentumpath.net/404 – Rocket Turtle
• healthyforge.com/404 – The Duck

And if you’re learning game development too – with or without AI – I’d love to hear about your journey.

Find all my projects at github.com/jarencudilla/engineeredai-tools.

What game should I build next? Let me know in the comments, or better yet, show me what you’ve built for your own 404 page!

Jaren Cudilla / Chaos Engineer
Avion School Batch 6 -> built custom 404 games for 5+ sites.
This article documents real learning-by-breaking using Claude as a study partner, not a code generator.

Learning path: Break working code → fix it → understand why → rebuild from scratch.
From tic-tac-toe remakes to sidescrollers to anti-spam filters, if it breaks, I learn from it.
Check the repo: EngineeredAI Tools

🎮 Live 404 games: Tic-Tac-Toe • Bug Squash • Rocket Turtle • Duck

🔗 About • 💼 LinkedIn • ☕ Support the Work, or help me get an Asus Flow Z13