Check out our site here!

Inspiration

We were inspired by Cool Math Games because we love arcade games and most of the members on our team are pretty experienced with creating games. In addition, one thing we all weirdly had in common was that we’re all somewhat into anime so we decided to create classic games that were anime-themed.

What it does

North Arcadia is a collection of classic arcade games with an anime inspired twist. Our featured games include:

  • Bulbasaur Adventure - a Pokemon themed Chrome Dino game
  • Flappy Happy - essentially Flappy Bird
  • Haikyuu Pong - single player Pong
  • My Snake Academia - it’s just Snake

We decided on a minimalist website design, which also features a dark mode.

How we built it

We created our site from scratch using HTML and CSS, and used Bootstrap to format and align the features. In addition, we brought our games to life using JavaScript, as well as the p5.js library to create graphics and implement smooth user interaction. We coded using a variety of platforms, some of which included Glitch, a p5.js editor, and finally Repl.it to combine our creations together. We included a cartoon/anime twist on it to make it more personal for us, as it’s something we all enjoy.

Challenges we ran into

On the website side, we had many difficulties figuring out the dark mode feature (specifically how to store the states after a page reload). This was also our first time using Bootstrap and jQuery, so we had to research these two libraries. Another challenge we faced was formatting multiple elements within a page.

On the games side, we also ran into little issues that caused us glitches such as one side not completely working in the pong game, and implementing a retry/restart button on the birds game. We had some trouble with graphics as well.

Accomplishments that we're proud of

We’re really happy that we managed to create a clean website with fully functional games in less than 36 hours! We’re also proud of the fact that we tried new things during this hackathon, even though we may not have had any experience or knowledge in the languages/libraries/design.

What we learned

We were able to improve our frontend skills and learn to communicate more effectively, especially since we’re all online and constantly making simultaneous changes. We were also able to get creative with some of our favourite classic games and learn to implement them in our own way. This project also provided us with many opportunities to learn new aspects of the languages we used to work on this project. One of the members in charge of the games learned some new things about p5.js and collision detection.

What's next for North Arcadia

There are a few bugs we didn’t get around to fix (e.g. the dark/light mode toggle storing states in the gallery page but not in other pages, sizing issues of the games), so we would like to fix these in the future. We’d also like to add on to our current games to improve their quality and add new ‘old’ games and remake them in our own way.

Earlier in our brainstorming stage, we thought of adding a multiplayer option to all our games (maybe using Node), so in the future we’d like to add this feature.

Built With

Share this project:

Updates