The Wanicomets tutorial screen. It is an image that displays how to play the game, a screenshot of the base UI, and general tips.

Wanicomets

A game I made using Tofugu's Wanikani mascot and API to help players study their kanji. It is a glorified flashcard game. In this game, a user has to save the world from the kanji comets that fall from the sky by guessing what the kanji means.

Important Links

Why?

I wanted to learn web development, and also use the Wanikani API to make a game. Nobody had done that at the time yet, so it would have been impressive to that community. Much time has passed, so I am sure many others have followed in my footsteps.

Screenshot of a reenactment of Wanicomets game. The Wanikani is in its attack animation, shattering a comet assunder with a mouth laser.

Relevant contributions

  • Frontend web development
  • Art & Animation
  • Audio

Major tools

Frontend:

  • jQuery
  • HTML
  • CSS
  • Wanikani API

Creative:

  • Adobe Flash
  • Audacity

Process

I winged this one. I just wrote down the gist of the game idea, and went to work learning jQuery and coding it in tandem. I made the graphics earlier in the process, & the sound effects later in the process. Other than that, it was so long ago that I really don't remember much about the specifics.

The idle animation for the Wanikani. He just bobs back and forth on his crabby legs The attack animation for the Wanikani when the user submits an correct answer. He stretches his neck out and opens his mouth to shoot a laser. The miss animation for the Wanikani when the user submits an incorrect answer. He sulks with a frowny face.

Hurdles

What did I learn?

I have learned a TON about web programming since I made this game, but this was my initial foray into it. I owe a lot to this baby~

My biggest takeaways were:

  • jQuery
  • About APIs
  • Adding sound to a webpage.
Screenshot of a reenactment of Wanicomets game. The Wanikani is in its loss animation, sulking because the player sucked this time.

What would I improve if I did it again?

This was my first real web development project. There are so many ways I would improve it compared to what I know now.

These are only a few:

  • A better, more readable tutorial that isn't just a JPG.
  • Add a scoreboard, as per the suggestion of the Wanikani community.
  • Use vanilla Javascript.
    • jQuery was only useful for the comet explosion effect & making simple API calls back then.
  • Use the Canvas API to render it.
Screenshot of a reenactment of Wanicomets game. The Wanikani is in its idle animation, staring at a comet hurdling toward the city.