Handling Japanese Romaji Input in a Browser Typing Game: Lessons Learned
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…
Building a Japanese typing game, such as 寿司打 (Typing Sushi Lab), reveals the complexities of handling Japanese input. One challenge is that a single kana can have multiple valid spellings. For example, しんぶん can be spelled as shinbun, sinbun, shinnbunn, or sinnbun. Similarly, つ can be typed as tsu or tu, ち can be typed as chi or ti, and じゃ can be typed as ja, jya, or zya.
To avoid frustrating players who use different romaji systems, it's best to store each word as a sequence of kana rather than a romaji string. Create a table mapping each kana to its possible romaji patterns. As the player types, filter these patterns based on the prefix they've entered so far.
Another tricky aspect is the ん (n) sound. It can be typed as a single n when the following kana doesn't start with a vowel, y, or n. For instance, in かんい, you must type nn, but in しんぶん, a single n before b is acceptable. To handle this, accept the single n and check if the next keystroke would make it ambiguous.
The small tsu (っ) doubles the next consonant. In きって, it's pronounced kitte, so the っ is represented by doubling the first consonant of the next kana. To accommodate players who type the small kana explicitly, also accept ltu or xtu.
Feedback should be instant to prevent input lag. Instead of re-rendering the entire word for each keystroke, update only the typed and remaining spans. On mobile devices, maintain a hidden input element to keep the virtual keyboard open without causing layout jumps.
Finally, make the game fun rather than just a test. Adding elements like a time pressure (in this case, sushi plates moving along a conveyor) engages players and encourages them to improve their typing speed. Displaying keys-per-second and miss counts after each round provides a clear goal for players to strive towards. To see these rules in action, you can play 寿司打 in any browser without installing anything.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
