Kananji - A Kanji Puzzle Game


Note that if you don’t see the below mentioned updates in your own browser, then it may be because your browser cached an old version of the website.

  • Added on/off switch to auto-focus input
  • Added on/off switch to keep kanji grid visible on screen even when scrolling the page down
  • Changed kana input placeholder text from “translation in kana” to “full word in kana”



I started using a trick to deal with this a while ago, so I didn’t have to tell clients to refresh their cache all the time :grin:

I usually have a template engine like JSP or Jinja at my disposal, so what I do is set a variable “version” equal to “?v=(version_number)” and then add that to the end of any CSS or JS URLs that I use. Then I increment the version number before every public deployment.

Having the URL parameter in the URL has no effect server-side when retrieving static files, but the browser includes it in the cache lookup key, so the incrementation will make the browser retrieve the file from the server again.


Neat caching trick. I’ll have to look up how to do that with my tech stack :+1:


It’s great! Now I just need to figure out how to get it to increment automatically so I don’t have to remember to do it, lol


Just wanted to say I tried it out and it is a fun way to practice. And first couple of times I played, I only focused on the kanji and tried to figure out which words I knew with the available kanji. Then I read your instructions more clearly and tried with highlighted vocab to go Eng-Jap. Either way works as practicing. (The others have had good points, but they’re already covered. :slight_smile: )


This actually might be at least part of what is missing for me in wanikani. Application! An actual application that applies the kanji taught in wanikani. Nice.
One thing that was annoying me, apart from the extra clicking which you say you’ve fixed. But that may have been fixed by that also… It was the fact that the answers would appear right in front of the text box making it impossible to move on until it passed or you made an extra click to close it. I guess that’s an issue with squeezing so much on a page though and not sure where else you’d put that popup.


This is an awesome way to gamify the principle behind kaniwani even further!

Just a nerd question, what did you use to program your game? What is your programming experience?


I like it! I think I will find this a more fun way to revise older vocab than the app I have previously been using (not very often because it’s not so much fun!)


The playthrough was fun! Just a minor suggestion: it could accept n as ん like wanikani does automatically at the end of words so you don’t have to write nn unecessarily. That’s just a nitpick though, I had a blast playing the first two levels.


Really great work on this game, and thanks for sharing it with us! It’s been a fun way to blow pretty much my entire Sunday :smile:

One thing I noticed that I don’t think I saw anyone else mention: that trash can that clears the kanji selection. Could it also clear out the kana text box?


I’d prefer they were kept separate.


I can look into moving the answer notification to the top-left of the page. I’ll have to try it out and see how I like it.

I have a Technical Details section in the Settings menu of my website. You can get to it by clicking the white vertical dots in header. I also have the same info under the screenshots of my initial post on this thread (need to click to expand). To summarize, it’s a JavaScript/ES6 React app with a bunch of cutting edge open source technologies.

I have about 4.5 years of experience as a professional web developer. JavaScript and Computer Science in general are constantly changing, so there’s always more to learn. This app was an opportunity for me to learn new technologies and catch up with the latest trends.

It would be easy to implement and it would be nice, but it might also be annoying for users that don’t expect that behavior. I figured the simplest thing to do for now is to keep them separate.


When you can’t remember that one word.


Haha! You picked a nice name for the screenshot btw. 範囲, the kanji individually emphasize that the example is surrounded (by empty cells).


Ah, I didn’t. My computer is in Japanese, so that’s just the default name for screenshots where I selected an area. From the number behind, you can probably guess that I don’t often bother to rename those :stuck_out_tongue:

Also, I just came to the forum because I suddenly realized what the reading of that word was. It’s obviously 堤!
Edit: つつみ. I converted to check, and didn’t convert back somehow.


I’m going blind maybe but I can’t see the switch for this.
EDIT: It popped up after I reset the app, so all good now.


this is a lot of fun ^^ I would like the selected kanji to be marked clearer. I did notice that small pink corner, but it’s sometimes hard to see. If they were displayed in a different color it would be clearer ^^.

I have already bookmarked it, and will come back to it =) thanks for making that!


Thanks! I can make the selection icon bigger. That should help for levels with a lot of kanji. I made the icon pink to match the font color of the selection circles and I made those pink to match WaniKani’s kanji color to make it clear that you selected kanji and not stand-alone single kanji words.



  • Added auto-conversion of trailing ‘n’ to ‘ん’ to match WaniKani
  • Added on/off switch to increase kanji size
  • Increased selection icon size
  • Hid Desktop only settings for small screen sizes (Tablet/Mobile)


I am having so much fun with this :slight_smile: It’s kind of addictive and I can’t wait to level up now so that I have more levels to go through. ^^ Amazing work!