Hello World! I’ve been hard at work on a kanji puzzle game website called Kananji for many months now, and I’m excited to finally share it with you today. The website can be accessed from any device with an internet connection at kananji.com
Kananji is a Japanese kanji and vocabulary review tool / puzzle game that can be used as an unofficial companion app for WaniKani. Kananji is free (donations welcome) but requires a WaniKani subscription beyond level 3.
The game has three main sections:
- A grid of kanji to select from
- An input for full word kana translations
- A list of vocabulary to solve
The goal of the game is to solve all of the listed vocabulary words. To solve a word you need to select the kanji used by the word in the correct order and then type the full word in kana.
The catch is that not all kanji are enabled. Only kanji that border an empty cell on the horizontal, vertical, or diagonal axis are enabled, and only enabled kanji can be selected to solve words. In the beginning of the game a single center cell of the kanji grid will be empty and all 8 neighboring kanji will be enabled. As words are solved, additional empty cells will replace kanji that are no longer used by unsolved words.
Kananji Mobile on Stats Tab
- The tabs on the right-hand side of the page show the same information, but with different levels of detail. You can use the tabs to adjust the difficulty of the game to match your skill level and preferences. You can even look at the answers, assuming you know how to read kana. Play however you like.
- Clicking on the English meanings for a vocabulary word will open the corresponding WaniKani page.
- Ctrl + Clicking on a kanji in the grid will open the corresponding WaniKani page.
- If a level is loaded with all cells enabled, then you won the lottery…the algorithm failed to rearrange kanji to make the game solvable. This happens very rarely, but if it does you can decide whether to play an easy game or click the Reset Level button to generate a new game.
- If the game has you feeling down because it is difficult, just remember that the game is meant to be a challenge even for WaniKani veterans. Each puzzle you solve is an amazing accomplishment. You are awesome.
- If you want a quick gameplay demo, then add ?dev to the end of the URL. This will enable special development features such as Auto Solve and Instant Win.
I am not affiliated with WaniKani or Tofugu LLC. I just really like them and decided to give back to the community by developing an unofficial 3rd party WaniKani companion app that displays WaniKani data in an interesting puzzle format.
I have taken special precautions to ensure that WaniKani/Tofugu copyright is not infringed:
- The app will only ever show data that is exposed by the WaniKani public API (so no mnemonics)
- The app requires a WaniKani API Key beyond the levels that are free on WaniKani anyway
- Clicking on vocabulary links back to WaniKani
See the Technical Details section for a summary of the open source technologies that were used to build this app.
It is up to you to decide how and when to use Kananji so that you do not interfere with, or even harm, your WaniKani progression.
Examples of when you might want to use Kananji:
- To study ahead when you have a lot of time and WaniKani is too slow for you
- You are a WaniKani graduate with a ton of burned/deactivated words that you are starting to forget
- You want to practice translating English to Japanese instead of Japanese to English
This app was created using open source technologies. Mainly React for the User Interface (UI) and Mobx/Mobx-State-Tree for state management. Ant Design, a React UI library, was used to build a good looking and feature-rich UI quickly. WanaKana, a mobile-friendly and lightweight Japanese Hiragana and Katakana IME, was used to build the kana input.
This is a responsive single page Progressive Web Application (PWA). Responsive means that the app is mobile friendly and can respond to screen-size/window-size changes to make the best use of available space. PWA means that the web app complies with the latest web standards for performance, security, accessibility, etc. PWAs cache files for an improved offline experience and can be installed on mobile devices so that they appear to be native mobile apps with an icon on the home screen and a hidden URL bar.
The app does not use a dedicated server or database. The API Key provided by you and the kanji/vocabulary requested from WaniKani are stored in your own web browser (via localStorage). Data is never sent or stored elsewhere. This keeps things simple, but means that you will have to re-enter your API Key if you clear your browser history or click the Reset App button.
Your progress on the current level is saved to localStorage in real time, so you can close the tab at any time and resume later as long as you do not clear your browser history. Progress is not saved between levels, so navigating to a different level and then back again will clear your progress.
What's a Kananji?
Kananji is just a made up word. I picked it because it was short and catchy. It kind of sounds like “kana n’kanji” if you say it quickly. Also, ji means character/letter in Japanese, so Kananji could be interpreted as conundrum of characters since this is a character puzzle game.
Thanks for checking it out! It would be really cool to hear your feedback.
- Added solved words to the beginning of the completed vocab list instead of the end
- Set lang=“ja” attribute on the kanji grid to make sure that kanji are rendered with the correct font
- Added “Solvable Words” tab that only shows words for which all kanji are enabled
- Moved correct/incorrect answer notifications from the bottom-left to the bottom-right of the page
- Prevented “Auto focus input” from scrolling the page in Chrome/Firefox
- Updated Game Preferences so that “Auto focus input” and “Keep kanji in view” default to OFF
- The Reset App button in the Settings menu will now:
- Reset the app (including API key, game progress, etc.)
- Clear localStorage (app state, cached level data)
- Force the ServiceWorker to update its cache (after which you still need to close and reopen all Kananji tabs). FYI, a ServiceWorker runs in the background and maintains its own cache of files so that the app can stay semi-functional even when you have a bad internet connection or go offline.
- 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)
- 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”
Updates not showing up for you?
If you don’t see the updates in your own browser, then it may be because your browser cached an old version of the website. Closing all Kananji browser tabs before reopening them usually fixes the issue.