πŸ”— Demo

Find our project hosted over at https://mr.mouse-needs-cheese.co/ thanks to GoDaddy for the domain and Linode for hosting!

πŸ’‘ Inspiration

We all know that playing games is super fun. But what about programming? Programming is fun, but daunting to newcomers. Thus, we decided to change things up, and help you learn programming with our fun little HTML5 game.

🏑 What it does

The game starts with you being introduced to Mr. Mouse, a mouse that wants only one thing in life–cheese! However, to communicate with the mouse, you'll need to use JavaScript. For level 1, you learn how to output using the prolific console.log. Continuing on that, the second level helps you practice what you've learnt, and introduces the notion of walls in the game. When it comes to the 3rd level though, things jump to a new level! It's night, and you can't see the cheese anymore. That's when the player learns to use the power of variables πŸ’ͺ

πŸ”¨ How we built it

Mr. Mouse is and HTML5 game built with vanilla HTML5, CSS3 and ES2019 JavaScript. For the code editor, we used the popular CodeMirror library, and used art in the public domain for our game elements. For the domain, we used a free domain offered by the GoDaddy registry, and hosted our site using Linode.

😒 Challenges we ran into

We ran into so many challenges that it would be impossible to list them all here πŸ˜‚. However, here's a few:

  • Animations: Did you know how difficult it is to get an item moving from one css grid cell to another? Finally, we realized that animations were taking a bit too much time and decided to settle for a simpler version for the time being.
  • Executing synchronous code, but with a delay: Once the user enters the code, we didn't want it to be instantaneous - that would mess up how the gameplay proceeded. This was solved with a hack that you can find on line 252 in script.js :P
  • Stale DNS Cache: As usual, hosting the site was not straightforward, with DNS cache issues making things slow.

πŸ† Accomplishments that we're proud of

  • Overall, we're pretty proud of how the game levels turned out to be.
  • With this game, we feel like we're making an actual difference and helping people with programming :)

πŸ“– What we learned

  • We learnt how to use a css grid for the game with all the new properties that modern css brings.
  • We learnt to manage some sort of internal state in the game so that switching levels could be done without a refresh of the page.
  • This was the first time we used Linode, we learnt how to deploy and provision an instance on Linode to host our website.

πŸš€ What's next for Mr. Mouse

This is definitely not the end for Mr. Mouse. We plan on adding crisper animations, more levels with advanced topics, so that the player can learn in a fun but meaningful way!

Share this project:

Updates