初めて作ったWEBアプリ
僕が初めて作ったwebアプリがこのタイピングゲームでした。
最初はyoutubeでタイピングゲームを作る動画を見て最低限の動作をするものを作り、そこから自分の欲しい機能やアニメーションをどんどん追加していった形です。
初めてのwebアプリ制作という事で非常に苦労したことを覚えています。
特にsafariには苦労させられた・・・今でもですがw
やりたくなるタイピングゲームとは
タイピングゲームと言えば有名なのは「寿司打」ですが、プレイしていて感じたことが
- 打鍵していて気持ちいい
- ミスしたときに不快にならない
- どのキーをどのくらいミスした(自分の苦手なキー)かがもっと分かり易いと嬉しい
- プログラミングで頻出する用語を練習したい
打鍵していて気持ちいいのは、音とアニメーションが工夫されているからでしょう。
ミスした時に不快にならないというのは、ブザー音などが大きすぎない事が大事だと思います。
「e-typing」はミスした時の音でちょっとドキッとしちゃうんですよね。
自分の苦手なキーが一目で分かるようには、どうしたらいいだろう？
プログラミング用語は英語なので色々とめんどくさい日本語(HU=ふ、FU=ふどちらでも正解にしなければならないとか)よりは楽だし、作ることで自分の勉強になるから良いな。
打鍵していて気持ちいいものを目指す
僕がタイピングゲームでプレイしていて気持ちいいと感じたものの共通点は、「打鍵音がついている」というものでした。
よくできたタイピングゲームでも打鍵音がないと寂しく感じてしまう。
タイピングゲームの目的は練習ですが、やはりゲームとしての爽快感がないと続ける気持ちになれないものです。
という事で音はつけるにしても、どんな音がいいだろう？
音源のフリーサイトを隅々まで見て、打鍵の一瞬でも成立して気持ちいい音を探しました。
いろいろ実際に音を当てて試してみて、結局「キーボードを打鍵した時の音(エンターキーを押したときの音)」を採用しました。
ひねりはないですがそれが一番良かったんだから仕方ない。
次の単語へ行くときの音は「電話の受話器を置いた音」を使っています。
苦手なキーが一目で分かるアニメーションとは
「寿司打」では打ち間違いは表示されるが苦手なキーは表示されない、「マイタイピング」や「e-typing」は苦手なキーは結果発表で数字が表示されるけど、もっと印象に残る表示の仕方は出来ないだろうか。
そうなると、間違えた回数が表示されるだけでなくもっと視覚的に大きくなる方がいい。
ミスしたキーがあればその瞬間に表示し、それ以降ミスするたびにどんどん大きくなるようにしたい。
最初は棒グラフの様に並べて高くなるようにしようかと考えたが、それだと少し事務的な感じがするのでもっと遊びが欲しい。
という事で、風船や泡のように丸いもの(以下バルーン)がランダムな場所に出現して膨らんでいくようにしようと決めました。
特定のスタイルを持つ要素(div)を生成するには、あらかじめCSSでスタイルを当てたクラス名を持つ要素を、topとleftにmath.random()％の位置を持たせてappendChildすればいい訳です。
問題はそのバルーンに表示されるべき文字です。初回はその文字を持った要素を作ればよいのですが、次回以降は新しいバルーンは作らず、すでにあるバルーンを大きくする必要があります。
- その文字のバルーンはすでにあるか、ないか
- あるならその文字は何回ミスしたものか
を知る必要があります。いや、もしかしたら2つ目は必要ないかも知れませんが、今回はそんな感じで作りました。
つまり配列を作ってそこにオブジェクト(文字、ミス回数)を格納する必要があるわけですが、アルファベットや役物の配列を全部最初から用意しておくのはスマートではない気がします。
なので空配列を用意しておき、初めてのミスでその文字のオブジェクトを配列に格納して同時にバルーンを作り、バルーンとオブジェクトを結びつける必要があります。
- ミスタイプを検出する
- findを使い、すでに配列にオブジェクト(キーと回数)が存在するかを確認する
- あるなら回数をインクリメントし、要素のスタイルをscaleで大きくする
- ないなら配列に新しいオブジェクトを格納し、バルーンを生成する
という処理にしました。
バルーンの生成位置
バルーンは上述した方法でランダムな位置に生成するわけですが、このままだと問題文のある中央付近にも生成されてしまい、ちょっと邪魔です。
最初はまあいいか…と思っていましたが、時間制限バーなど色々と機能を追加していくうちに気になってしまいました。
とはいえ、math.random()の範囲を狭めるというシンプルな方法では、topとleftで組み合わせると中心だけ省くことは出来ません。中心以外を省くのならできるんだけどね。
二次元配列でマップを組んでそこから選ぶのは記述が長くなるし…
ということで中心を除いた部分を4分割(上辺、下辺、それ以外の左右)してランダムに選び、その範囲からさらにランダムに座標を決めるという手法を採用しました。
バルーンのアニメーションの追加
ランダムで生成されるバルーンは時に被ってしまう。大きくなればなおさら。
なので、クリックするとバルーンが破裂するアニメーションを追加しました。
ついでにホバー時にミスの回数を表示するようにしてあります。
それらのアニメーションはappendChildで生成する際に仕込んであります。
他にもいろいろあったけど
他にもgoogle fontsを利用するとロード時に起こるチラつき(FOUT)やiosで起きた諸問題もありますがそれらはまた今度別の記事にしようと思います。
それでは。
コメント