Inspiration

Looking at the Hacktoon logo, one thing in particular came to mind. Specifically, the Naruto run, and this meme of a guy doing a Naruto run during the Storm Area 51 shenanigans:

Meme reference

After researching the origins of naruto, anime plotlines, ridiculously long anime titles, and various memes, "Is it too late to revert to old commits?" was born.

What it does

Join Narooto as he quests for ramen noodle soup.

It is a website consisting of sequential interactive segments of minigames featuring several references and memes which together form the storyline of "naruto breaks into area 51".

Enjoy this chaotic and whimsical experience as we present the most ambitious crossover since endgame.

How we built it

We also wanted to challenge ourselves to learn javascript in a fun way. We challenged ourselves to use a different tech for each of the pages on the site.

We also built it while listening to various anime and cartoon theme songs as well as meme music. Definitely a key factor.

Challenges we ran into

  • Creating video games in vanilla html, css and js despite having not even used the canvas element previously
    • The html canvas did not support gifs, only loading the first frame of a gif drawn onto it rather than animating the gif, which was not ideal.
    • We made a custom renderer so that our code knew which frame of the gif to render in the canvas
    • Additionally we also had to figure out the mechanics for the infinitely scrolling bridge and how to place stationary items on the bridge
  • There were a number of issues with setting up Matter.js, especially with trying to figure out how to add our own custom images to the objects.
    • We tried several things from trying to write a custom renderer from scratch to trying to integrate psj5 into the code to use a renderer found in a tutorial. Eventually after several hours of digging through the documentation we finally found the solution.
  • For Amelia it's my first time checking out the domain name registration
  • It was also our first time coding with YAML files, and it took a bit of getting used to
    • We initially had some trouble with formatting issues with the YAML files when we were diving into RenJS
  • We had trouble trying to get Linode to work with our vanilla web app as we only had experience following a tutorial to host a flask app previously. We had to dig and find tutorials that could specifically host our vanilla application.
    • eg for vanilla it does not have an app.py we can simply launch the app from
      • In the end we resorted to hosting on github temporarily
      • Finally our working solution was to upload everything into a Linode Bucket and allow Read access to the files which allows our website to be viewed online

Accomplishments that we're proud of

  • We actually managed to learn quite a bit of javascript
  • We had a lot of fun coming up with the plot and figuring out how to make each of the scenes interactive
  • We managed to complete all the scenes in season 1
  • Managing to learn multiple libraries in such a short period of time
  • We also created a good portion of the art by hand. It was fun learning to use the piskelapp.com website to create sprites, backgrounds and animations

What we learned

  • It was our first time working with libraries such as Matter.js, RenJS, tailwindcss, Javascript text to speech, and so on, meaning we had to dig through the documentation as we'll as several dozen Youtube videos
  • How to build a side scrolling game using pure vanilla JS
  • How to build a point and shoot game in vanilla
  • Learned how to use Object Storage in Linode. It was challenging at first as this was our first time using object storages. Fortunately, we were able to get it to work and sucessfully launch our website with Linode's Object Storage

What's next for our project

  • Season 2! Filled with even more meme's references, and more advanced games and complex level design. (Where season 1 mostly serves as an introduction to javascript for us)
  • Want to explore more javascript packages to create more visually appealing animations
  • Want to dive deeper into Matter.js and create more fun minigames with it
  • Leaderboard for things like highest score, most fails
  • A way to save and share all these moments experienced in the game.

What do you think? Does our project pass the vibe check?

Try it on our github site here or on our domain site here

Built With

Share this project:

Updates