[mootools] Ajaxでタイピングゲームを作る

motoolsでタイピングゲーム。名前はmooTypingだよ!(安直)
ゲームっぽくなってきたのでテスト中画面を晒してみる。

製作中デモ置き場▼
View Demo »

解説ページ▼
View Document »

IE6は未対応(っていうか未確認)です。表示が残念な事になると思う。
時間とTypespeed,Complete,Option,Help、ゲームの終了は未実装。

画面レイアウト、画面デザイン、問題が変更可能。
デフォルトは画像が横ワイドですが、CSS変えれば縦にもできます。

東方projectのZUNさんの「音楽聞いてもらうためにゲームつくった」って話がありますが
それと似たような感じで、見せたい画像使って問題作れるので
何か人に見てもらいたいものがあるなら中々いいツールになるんじゃないかな~~。って妄想。

ゲーム中は画像見れねぇだろ、ってツッコミは無しでw

よもやま話

作る上で絶対欲しかったのは、問題の自作・画面レイアウトの変更・入力方法の設定。
画面レイアウトの変更はAjaxならCSS使えばOKなのでいいとして、問題の自作は結構面倒。

問題はAjaxらしくJSON形式にすることで落ち着く。
表示文章+変換用ひらがなよみ+画像 のセットで1問。追加上限は無し。
出題時は配列をシャッフルして先頭から表示。random()使うの止めたのは結構偏りがあったからです。
全ての問題をクリアしたらシャッフル。で、永久ループが可能。

入力方式は、自分に変な癖があるので設定が必須だと思った。
で、設定が必要となるとローマ字変換をひらがなから自動でやらなくちゃいかんのですが、
これが探してもいいのが無かったから結局自作
出力結果が配列形式になるのは問題の処理が何かと楽だからです。
クラスはprototypeとかjQueryとかでも書き換えが出来ると思う。面倒だからやらんけどw

処理の流れは巷にあるタイピングゲームとそんなに変わらない。
得点とかはタイピングマニアを超参考にした。
入力速度は分速予定。結果表示でミスの多いキーベスト5とかやれたらいいなー。

mootoolsのEventメソッドのevent.keyとevent.codeはシフト使う入力に対応してないっぽいので
!とか?などは内部で処理してます。

対応ブラウザはFirefox,Chrome,Opera,Safariで、IEをどうするか迷い中。
問題なのはアルファチャンネルとレイアウト誤差くらいだから吸収出来なくもないけど、
レイアウト変更でCSS弄るときにIEの癖知らないと困りそうだな、という懸念が…。

エフェクト使いまくりだから低スペックマシンだとすごいもっさりするかもしれない。(未検証)

Leave a Comment.