キーボード入力を早くする、タイピングゲームを作ろう

2017年02月07日 17時00分更新

文● 加藤兄　プログラム作成･監修●松下浩則

●登場人物

尾地定数（おじ･さだかず）自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい）尾地のめいで、近所に住む中学生。

おじ　週刊アスキーで始まった連載記事『日曜プログラマー大歓迎　JavaScriptの部屋』、今回はタイピングゲームを取り上げました。
めい　上から文字が降ってきて、下に着くまでにキーボードで同じ文字を打ち込むってゲームだったね。短い単語なら簡単なんだけど、文章になるとパニくっちゃって……。
おじ　松下師匠が話してくれたポイントは覚えてる？
めい　たしか……スタイルシートで画面を作って、文字の「TOPプロパティ」とかいうのをプログラムで変えると表示位置を動かせるって話だった。
おじ　そうそう、アクションゲームなんかでキャラクターを動かすのも同じ方法でできるんだ。
めい　スタイルシートのプロパティを変えて動かすってことね。

おじ　実は誌面の都合で省略しちゃったけど、このプログラムではほかにもいろんなテクニックが使われていて。
めい　ちょっと話かけないで！今やってるとこだから！　間違えちゃうから！
おじ　正しく打ち込んだ文字は緑色に変わって、間違っている文字は赤色に変わるようになってるんだよね。ほら、vのところがbになってる。
めい　うるさいってば！
おじ　問題文の文字列を正解か否かによって1文字ずつ色を変えるほか、テキスト入力フォームに入力した文字を1文字ずつ取り出したりと、結構凝ったことをやってるんだよ。
めい　あ、あ、下まで行っちゃった……。
おじ　プログラムを載せておくので、読者のみなさんは、ぜひ打ち込んで遊んでみてくださいね。

めい　あと、今のままだと、上から降りてくる問題が毎回同じなので、自分が練習したい単語とかにプログラムを変えてもいいかも。
おじ　改造するなら、問題文をたくさん用意してランダムに降ってくるようにしてもいいな。
めい　ぎゃー、また入力前に下まで行っちゃった。……終わった。スコアは、12万8000点だって。全然上達してないー。
おじ　オレみたいにキーボード見ないで打てるようになると、かっこいいけどな。
めい　ふん、私、スマホならおじさんより早く文章が打てるもん。
おじ　ぐぬぬ。
めい　この連載では、読者のみなさまからのプログラムの投稿を募集しています。100行程度の短さで面白いプログラムができた人は、次のウェブページからぜひ投稿してくださいね！