FinancialFun

a SUPER DUPER FUN RPG game where you make financial choices to travel somewhere fun!!

Comment

Inspiration ⋆.˚🦋༘⋆ 🥊 🤍🎀🧸🌷🍭

We LOVE WealthSimple and use it daily hehe. With WS being the sponsors we wanted to see what their challenge was. LUCKILY FOR US, THEIR CHALLENGE WAS SUPER AWESOME!! We both have taught youth boxing for the past 8 years now and are fully passionate about empowering the next generation of youth. Mychaela also is co-president of her club at McMaster called McMaster Start Coding where they teach kids in grades 4-8 how to code in underprivileged areas, because learning to code and having exposure is a right that everyone deserves! This tied perfectly well with the challenge of exposing youth to financial literacy more as too many youth now a days really don't know anything. In fact, 4/5 Canadians say that they wish they learned more in school. But what's better than learning in school, PLAYING GAMES to learn yayaya!! Mychaela has worked with building games with youth, all of which have been RPG state games that have been largely successful. Taking from this, we decided to build an RPG game where players make choices to save money for a destination of their choice. They can earn money through chores, as many kids do now a days and learn the value of money, saving, budgeting and spending. Overall, we drew our inspiration from a passion of empowering youth and our game is very colourful and fun, something even as adults now we find very fun and playful!

What it does ❓

  • Players pick a real-world "Dream Destination" -This gives them a tangible financial goal to work toward, teaching them that money is a tool to _help _ achieve their dreams.
  • split your initial money into SAVINGS and SPENDINGS and RAINY DAY

Polly 🪙

  • AI Financial Tutor that we integrated
  • named Polly the coin who serves as the player's personal math tutor and advisor for any of their questions
  • she challenges players to calculate their new totals after earning money (e.g., "You had $50 and earned $10. How much is in your wallet now?")
  • users can also ask Polly questions like "What is interest?" or "Why should I save?" and get instant, age-appropriate answers

Budgeting System 💰

  • players must split their initial allowance into three distinct jars
  • Savings: For their dream trip. 💖
  • Spendings: For fun items in the game 🎮
  • Rainy Day: For unexpected emergencies 🌧️

Adventure Hub 🧹🪣

Shopping and Arcade 🛍️👾

  • teaches about SPENDING
  • where players face the temptation of spending their money
  • smart vs impulse spending since players can buy cool swag, but they have their money leave
  • gacha machine is a random prize game that teaches the risks of gambling. Sometimes you win big, but often you lose money, teaching a valuable lesson about risk vs. reward

** Garden **🪴

  • teaches about INVESTMENTS
  • pay to plant seeds, the longer you wait, the more money you get
  • passive income learned as players can pay to plant seeds
  • if they are patient and let them grow over time, they can harvest them for a larger profit than the seed cost
  • teaches that waiting (delayed gratification) pays off!

*Chores * 🧹🪣

  • teaches MAKING MONEY
  • players learn the value of hard work
  • by cleaning up messes (scrubbing the sink, taking out the trash), they earn an immediate wage
  • this simulates active income where they are trading time and effort for money

** Airport ** ✈️

  • final stop!
  • once a player has saved enough money in their savings to afford their trip ticket, they can head to the airport to win the game. -this celebrates the joy of achieving a financial goal! 🏆

How we built it💻

  • we chose not to use game engines like Unity or frameworks like React since we wanted to keep it simple and not overcomplicate things with things we weren't super strong in. So instead, we made the entire game using pure HTML, CSS, and Vanilla JavaScript.
  • we integrated the Google Gemini API to power "Polly," our AI financial tutor
  • we wanted a cohesive, fun visual style that would appeal to kids so we utilized Adobe Firefly to generate unique, high quality assets and images

Challenges we ran into🤜🤛

  • too many 😭
  • Deciding on an idea since there is SO many ways you can make a game and ideas, brainstorming the perfect idea was a CHALLENGE
  • our code was A BIG BLOB OF MESS for the longest time (still is but a lot better)
  • getting the API to work since we both didn't have too much familiarity with APIs and using them
  • "camera" tracking and d-pad movement for the chore game was a challenge for mychaela since she was familiar with godot engine movement that made movement a lot easier, whereas here there is no camera and she had to utilize moving the background image
  • to conquer this she watched a great youtube video that explained how to do a top down character movement in html, css and JS that helped loads and broke down the math to calculate it all
  • mychaelynn worked on the hard part of synching everything and the gameflow of when do we go where and at what cost which rattled her brain
  • breaking things down step by step and drawing helped visualize this and made things easier for her

Accomplishments that we're proud of 😎👌🔥

  • submitting 💪
  • working as a twin slayful duo! We are at different schools so hardly get to work together like this, but being able to bring something to life in one weekend together was truly something we're both proud of
  • getting the API to work, since we thought it would be a scary challenge that would be hard but was relatively straightforward and not bad
  • persevering through tough times when we wanted to sleep
  • conquering the cold to commute

What we learned 📚

  • using AI context and wrappers -we learned how to build chat wrappers for the Google Gemini AP -we discovered how to maintain "state" and "persona" so that Polly doesn't just answer random questions so that she remembers the context of the game (like your current wallet balance) and stays in character as a helpful financial tutor.
  • pushing CSS to its limits as we learned that its capable of much more than just styling websites and that it can be a game engine renderer! -we gained a deep understanding of CSS Transforms, keyframe animations, and pixel art rendering
  • we learned how to handle complex layeringto create depth between the character, the map, and the UI overlays.
  • we learned more about DOM manipulation as a game engine building a game without a canvas or engine forced us to truly understand the DOM -we learned how to manipulate DOM elements in real-time (60 frames per second) to handle collision detection and camera movement. -this gave us a fundamental understanding of how browsers render elements and how to optimize JavaScript for performance.

What's next for FinancialFun ⏩

  • integrating more advanced financial concepts
  • as players master the basics, we plan to introduce deeper financial topics: -- Inflation: add a time machine feature where kids travel to different decades to see how the price of a chocolate bar changes over time, visually teaching them about inflation and purchasing power -- RESPs: add a school fund that is a specialized long term quest where players learn about Registered Education Savings Plans. We want to show how government grants work and why saving early for education is a necessity -- grow the Adventure Hub into a booming economy by adding more jobs, Beyond kitchen chores, we want to add a maybe a lemonade stand (entrepreneurship) and a newspaper route (salary). -- More interactive games --> gamify ! : Incorporating more interactive complex games for users to stay engaged!

Demo Link shorter version

https://youtu.be/eDqw5swKvVQ

Built With

Share this project:

Updates