Making a toy to practice Japanese together: Kana-gories! I made a small game to practice Japanese with your friends. Let's talk about that~
This project (Kanagories) will shut down by November 1, 2024. After that date, below links to the project may no longer be active or may be risky to visit. Proceed with caution!
This "insight" was originally published on May 03, 2022, and transferred here later.
Hey there!
This month's insight is a very special one— much like thinking of creative ways to look at what we learn, or experimenting with methods to make the study experience more enjoyable, I also like to make tools & fun little "things" that can help! Earlier in the year, I had the pleasure of making a little experimental game-like tool called Kana-gories. It is a work of love, & definitely one I'd like to continue improving throughout the year. I'd love to share it with you today!
What is Kana-gories, & how does it help me learn Japanese?
Okay, so first off, Kana-gories is a simple mini-game. It gives you prompts to think of Japanese words that start with a specific kana: hiragana, katakana, or even romaji if you haven't learned to read Japanese yet. It is based on timed rounds; & you can play it to study with your friends, or use it by yourself if you don't have any (yet?). It is basically a chance to practice your vocabulary, & potentially learn new words!
Behind the scenes (How it was made)
Like any bigger project I work on, I have to flesh out the plan first & foremost. I ask myself questions such as "What am I even trying to accomplish with this?", "How does this specific idea help me get closer to that goal?", or "What will be necessary to make this work in its smallest, most simplified shape?" Without diving into a psychiatric break-down of my thinking patterns & process, my goal was to just feel like I finished making something, & it had to be potentially useful for some of my Japanese-studying familiars out there. I didn't have too many big, lofty specifics; so I got let off the hook pretty easy with this project. 😂
With those questions in mind, I then make a whole bunch of lists about what features this project might need. I take note of any that might be better fit as a later addition to the project, & focus on the bare minimum of what is needed. For this project, it was actually inspired by a trivia game that already exists in English: Scattergories. I only ever got to play it once every few years as a kid, but it was one of my favourites! I wanted to have more opportunities to play something like it, but instead as a way to study & practice Japanese language. Because of that, the list of features for this was pretty short. The gameplay was a mostly known factor with exception to making it work best with Japanese alphabets for learners. I had to tweak things for that aspect of it, then consider how it might work digitally. This included things like thinking of a list of screens that one might see while playing, & then content that is relevant on each of those screens. Since this is a digital game instead of a boardgame, this also brings into consideration other factors like accessibility & supporting multiple device types.
Now so far, all of this may still seem like a lot to consider, but when you look at the project's functionality as a whole, it is a microscopic entity in the greater landscape of games & apps out there. If you ever make a project like this, it helps to keep that grounding fact in mind so it doesn't feel unrealistically daunting while you're working on it.
After I make all of those plans, then I start the fun stuff: drawing things! I make wireframes, mockups, & prototypes to SHOW how the screens & content could look & be interacted with. For Kana-gories, it was a simplified process since it originally had 3 screen concepts: A settings screen, A mid-game screen, & something to show the rules. I had to make sure the screens made sense to use on both desktop, tablet, & mobile devices. Later, I added a new requested feature of player management & scorekeeping to the game; that feature followed the same process.
Once the layouts were figured out, then I started coding it! Without boring you with the super in-depth minutiae of the programming side of things, I made a server that routed all of the site's URLS the one page you see, & made a plain ol' Vanilla JS single page application. The hard (moreso tedious) part of it was styling it with CSS. I got to play with animations, transitions, & modern CSS features like named variables & calculations. I did the best I could in the time I could, & was very proud once I pushed it to the hosting server so that people could view it online.
After I did that, I got some feedback from people. I was so pumped up that people were trying it out & interested in playing it! From that point, I have added a new feature for player management & scorekeeping. It also has an official URL now: https://www.kanagories.com
So what next?...
Right now, I am splitting my time with working, blogging, learning how to interact with people on the internet, studying, & making other Japanese language learning projects. However, I do have a list of things to consider or work on based on the feedback people have shared so far! Things like:
- Level distinctions to make it easier for beginners to use.
- Swipe support for rules on mobile devices
- PWA or App version for easier access to the game on mobile devices
If you want to play Kana-gories, or reach out with ideas to improve it helping your studies, please do too. It is always appreciated! You can say something in the comments section below, or say hi on my Twitter! I also started updating my Ko-fi, so there is that way too~
As for beyond Kana-gories, I am currently working on a digital card game for studying Japanese onomatopoeia. I'm calling it Onkaado~ If you want an invitation to try that when it is ready for its first private testers, give the Onkaado site a visit & join the mailing list! I am excited to make more things to help us study~ 💪😎✨ Also, check out this poster image I made for it:
Bonus facts:
- I didn't add the colour scheme for Kana-gories until the very end to coding it! I could not think of what I wanted, so everything was designed in greyscale at first, accounting for shades I wanted instead of hues. That was unusual, but neat!
- I learned how to do SVG animations directly in the markup with this project instead of doing it only in CSS. That was a fun discovery!
-
I take great joy in giving colours dumb names. Examples used in Kana-gories include
clown-lipstick-pink&sad-limp-teal. - Ultimately, I went with a web app over a mobile app for this. I almost always will too, but you never know~