JavaScriptを使ってオリジナルの単語タイピングゲームを作っていきます。

単語タイピングゲーム作りを通してリアルタイム入力、文字列の操作、タイマーによるプログラムの自動実行、簡単なアニメーションなど実践的なプログラミング技術を学んでいきます。

「JavaScriptでプログラミング入門」の応用編になりますので、まだ終えてない方はそちらを先にご覧ください。

今回はタイピングゲーム作りの大まかな流れだけを説明したいと思います。

画面中央を英単語が左から右へと移動している間にその単語をタイピングしてもらうみたいなタイピングゲームを作ります。

英単語の長さによってレベル分けをして背景もそのレベルに応じて変化させていきます。

とこんな感じです。

では、こちらを作るにあたってポイントを書き出してみます。

・問題をランダムに出題

・キーボードからの入力の受け取り

・一文字ずつの入力判定

・問題部分の横移動とその制限

・背景画像の定期的な切り替え

こんなトコロですかね・・・。

主なところを見ていきましょう！

問題をランダムに表示するには乱数を使います。

例えば

var mondai = ["apple","bag","cat","day","eleven","face"];

こんな感じで問題を入れた配列を用意して、この配列の添え字に乱数を使う事によって問題をランダムに出題できるようにします。

今回作るタイピングゲームの肝の部分ですね。

これができれば８割完成したようなモノです。

まず一文字だけのタイピングゲームの場合はキーボードから入力された文字の文字コードと問題の文字コードを照らし合わせるだけなので簡単にできます。

しかしながら、今回は英単語を判定できるようにするので少し工夫が必要になります。

例えば

[apple]

という問題だとすると

１・これを一文字ずつに分解

[a][p][p][l][e]

２・さらにそれぞれを文字コードに変換します。

[97][112][112][108][101]

これで一文字ずつを切り離して判定できるようになるので、一文字判定して次の文字、一文字判定して次の文字、というように一つ一つ判定していきます。

これはタイマーとDOMを使って表現していきます。

一定時間ごとに指定した関数を実行する「setInterval」関数を使って問題を横移動させる関数を一定時間ごとに実行し続けます。

そして「css」によって座標を絶対配置した問題部分を動かすことによって移動を実現します。

では次回より実際にプログラムを組んでいってみましょう！

2日目 一文字タイピングゲーム