Skip to content

A mini flag game built with Vue.js and Sass/SCSS. Choose the correct color to paint the flag and recognize all these 24 tricolors. 🚩

Notifications You must be signed in to change notification settings

wentingliuu/flag-quiz-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Flag Quiz Game

This is my very first SIDE PROJECT that designed & developed by myself!!! βœ¨βœ¨βœ¨πŸ‘πŸ‘πŸ‘

When I was thinking about the topic for my side project, I found out that there's lots of national flag designed with tricolour. Wow, that would be great, if there's a mini game designed for recognizing all these tricolour flags. Yap, that's how I started my first side project! πŸ‘€

🌟 Click Here to have a try!!!

🌟 This project is built with Vue.js javascript framework and Sass/SCSS stylesheet language.

🌟 I also keep notes on Medium (written in Chinese).

🌟 Feel free to leave messages to me on Medium, if you get more cool ideas for this project.

FEATURES & HOW TO PLAY

STYLISH LANDING PAGE

Yes, I designed a landing page with simple animation for this mini game! Just click "START" to play.

landing page

PANIT THE FLAG

Click the colors on color palette, and those 3 blocks would be filled with the selected color in order. The PURPLE border indicates which block you are painting now. After colored the flag, click "SUBMIT" to see whether you have the correct answer or not.

paint the flag

CHOOSE THE BLOCK YOU WANT TO PANIT

Even though I have set the step 1 to 3 for you, you still could choose the block you want. When clicking the block, no matter it's filled or not, the block color would be reset. Thus, you could paint the block again.

choose the block

TAKE THE ELEVATOR TO WHATEVER LEVEL

There's totally 24 levels for this mini game. If you don't want to go through each level, just wanna see the FINISHED scene. Click "LEVEL" button on top-right, and you could go to all levels. (And I putted flag emojis in LEVEL page, it could be a hint for you!)

level

RESPONSIVE WEB DESIGN

Of course, there's different design for mobile phone, tablet & desktop.

rwd

About

A mini flag game built with Vue.js and Sass/SCSS. Choose the correct color to paint the flag and recognize all these 24 tricolors. 🚩

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published