My first game

iloveferrets — Tue, 15 Apr 2025 09:49:11 +0000

My First Web Game — How I Built a Flag Quiz with Angular (and What I Learned)

It all started with a random idea: could I build a small game using only Angular?

I'm currently a UX/UI design student, but I've been getting more and more into frontend development — especially with Angular. While most tutorials focus on CRUD apps or dashboards, I wanted to create something that felt a bit more fun and interactive. Something I could share with friends and say: "Hey, I made this!"

That’s how I ended up building my first little web game: a flag quiz.

🧠 The concept: minimal, fast, fun

The idea was simple: show a flag, let the user choose the correct country from four options, and give immediate feedback.

My goals were:

Make it fast and responsive (mobile-friendly too)
Randomize questions every round
Keep track of the score
Add animations for smoother transitions
Keep it fully frontend — no backend for now

I sketched a quick wireframe and started breaking the UI down into components.

⚙️ Building it with Angular

I created a new Angular app with:

ng new flag-quiz

Then I made a FlagService to handle core logic — loading a static list of countries, shuffling flags, and preparing randomized answers.

My Country interface looks like this:

interface Country {
  name: string;
  flagUrl: string;
}

The QuizComponent subscribes to the current flag and options. When a user selects an answer, it checks correctness, shows feedback, and after a short delay, moves to the next flag.

I used Angular’s built-in tools for routing, component state, and animations via @angular/animations.

🎨 Styling and user experience

I wanted the game to feel clean and satisfying. No flashy UI, just simple and smooth.

A few things I focused on:

Feedback on selection: correct/incorrect classes and short delay
Responsive layout: works well on mobile with flex and grid
Subtle transitions: fading flags in/out between questions
Accessible UI: big buttons, color contrast, keyboard-friendly

I used only vanilla CSS with variables and custom properties to keep things lightweight.

💡 Challenges & lessons learned

Some things I ran into along the way:

Coordinating *ngIf with animations was tricky — I had to delay hiding/showing content
Keeping logic inside the service made the component much easier to manage
It’s easy to overthink state management — simple flags and booleans worked just fine here
Even a tiny game benefits a lot from polish like sound effects or feedback

🚀 Try the game!

I deployed the game using Firebase Hosting with one command:

ng deploy

And it worked like a charm.

👉 Play it here: https://quizbandiere.it

(No login, no ads — just a 2-minute geography challenge!)

📌 What’s next?

There’s a lot more I’d like to explore:

Adding difficulty levels (e.g., just Europe or Africa)
A timer and leaderboard
Multilingual labels
Dark mode (why not?)

But for now, I’m just happy I made it. This was a super fun way to apply Angular outside the typical use case.

💬 Let’s chat!

Have you ever made a game in Angular (or any frontend framework)?

Got tips or ideas for improvement?

Drop them in the comments — I'd love to hear them!

Thanks for reading 🙌

DEV Community: iloveferrets