【タイピングゲーム 第6回】"っ"に対応する

タイピングゲームを作っています。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

• Vue.js3
• Vite

今回は、"っ"に対応します。

"っ"の対応

小さい"っ"の入力は、例えば「って」と入力したい時に、

1. ltute
2. tte

の2種類の入力方式があります。

「1. ltute」の入力方式は、他の文字の入力と変わらないですが、
「2. tte」は、次のひらがなに応じて入力文字が変わるのが難しいです。

今回は、下記のように対応しました。

入力可能文字列一覧

入力可能文字列一覧のcomputed propertyがありますが、下記のように実装しました。

  const textAlphabetArray = computed(() => textArray.value
    .map((letter) => parse(letter))
    .map((letter, index) => {
      switch (letter) {
        case 'っ':
          if (textArray.value.length >= index) {
            // 次の文字の、最初のアルファベット.
            return [
              parse(textArray.value[index + 1])[0][0],
              ...parse(letter)
            ]
          }
      }

      return parse(letter)
    })

ポイントはparse(textArray.value[index + 1])[0][0]の箇所で、これは次のひらがなの最初の文字を取得しています。
例えば、残りの入力ひらがなが「っこ」の場合は、この頭の"k"を入力できるような判定としています。

入力時の処理

実際の文字入力時（前の例の"k"）の処理は、下記のようになっています。

    switch (textArray.value[inputIndex.value]) {
      ...
      case 'っ':
        if (
          inputCurrentLetter.value === ''
          && key !== 'l'
          && textAlphabetArray.value.length >= inputIndex.value + 1
          && textAlphabetArray.value[inputIndex.value + 1].map((item: string) => item[0]).includes(key)
        ) {
          inputCurrentLetter.value = key
          goNextChar()
          reserved.value = textAlphabetArray.value[inputIndex.value].filter((item: string) => item.startsWith(key))
          return true
        }
        break
    }

単純にいうと、"kko"のうち"k"の入力がされたときに、即座に「こ」の入力に移る、
というような処理です。

Pull Request

https://github.com/nek0meshi/typing/pull/6

あとがき

先日29歳になりました。20代ラストイヤーも頑張ります。