Handling Japanese Romaji Input in a Browser Typing Game: Lessons Learned

#javascript #gamedev #webdev #japanese

Japanese typing games look simple: a word appears, you type it, you score. But anyone who has built one quickly finds that Japanese input is full of edge cases. While working on 寿司打 (Typing Sushi Lab), a free browser typing game where you type words before the sushi plates roll away, we ran into most of them. Here's what we learned.

1. One kana, many valid spellings

The word しんぶん can be typed as shinbun, sinbun, shinnbunn, or sinnbun. つ can be tsu or tu, ち can be chi or ti, and じゃ can be ja, jya, or zya. If your game only accepts one spelling, players who learned a different romaji system get frustrated fast.

The fix is to store each word as a sequence of kana, not a romaji string, and keep a table of accepted romaji patterns per kana. On every keystroke, filter the candidate patterns for the current kana by the prefix the player has typed so far.

const table = {
  "し": ["shi", "si", "ci"],
  "つ": ["tsu", "tu"],
  "ち": ["chi", "ti"],
  "ん": ["nn", "n'", "xn", "n"],
};

2. The tricky ん (n)

A single n is valid for ん only when the next kana doesn't start with a vowel, y, or n. So in かんい you must type nn, but in しんぶん a single n before b is fine. We resolve this lazily: accept the single n, and when the next keystroke arrives, check whether it would make the previous n ambiguous.

3. Small tsu (っ) doubles the next consonant

きって is kitte: the っ is typed by doubling the first consonant of the following kana. You also need to accept ltu / xtu for players who type the small kana explicitly.

4. Keep feedback instant

Players notice even small input lag. We avoid re-rendering the whole word each keystroke; instead we update only the typed and remaining spans. On mobile, a hidden input element keeps the virtual keyboard open without layout jumps.

5. Make it fun, not a test

Mechanics matter more than polish. A time pressure element (in our case, plates of sushi moving along a conveyor) turns drilling into a game, and showing keys-per-second and miss counts after each round gives players a reason to try again.

If you want to see these rules in action, you can try 寿司打 in any browser, no install needed. I'd love to hear how others handle IME-style input or multi-spelling matching in their own projects.

DEV Community