TOP サイトマップ お小遣い タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

Flashでタイピングゲームを作ろう講座2−2
〜簡易タイピングソフトの完成〜

完成例

2-2-1.スクリプト修正前のムービークリップなどの作成

今回の講座はいきなりですが、難しいです。↑の完成例を見てもらえればわかるとおり。
正解数、間違え数、時間、結果画面の作成などが前回のスクリプトに加えられてます。 前回はアルファベットの文字列だけを出していましたが、今回は日本語も表示してます。

では、まずアルファベットなどのテキスト郡が入っていたムービークリップを日本語を表示する テキストボックスを追加し『nihongo』という変数名をつけます。
次に、正解数、間違え数を表示するムービークリップを作成し、それぞれ『seikai』、『machigai』 という名前のテキストボックスの変数名をつけておきます。
最後に、時間の経過を表示するムービークリップを作成し、テキストボックスの変数名を 『time』と付けておきます。
詳しくは述べませんが、Flashファイルを見てもらえばわかると思います。 というか、前回までの講座を理解した人ならばわかると思いますが、テキストボックス郡の ムービークリップを作成しているだけなので・・・

2-2-2.前回のアルファベットなどを表示していたスクリプトの修正

前回のFlashファイルを開いてください。
前回のスクリプトは正解した時に、その文字を入力用テキストボックスに表示していましたが、 今回は正解時に正解数を+1、間違い時に間違い数を+1する処理と、その他もろもろ を追加します。

saidaimondaisuu=10; //出題数
mondaisuu=0; //出した問題数

今回のソフトは出題数saidaimondaisuu分問題を出したら、結果画面に移動するので、その為に、 出題数を10、出した問題数を0としています。

nihongoword=new Array("テスト","赤ちゃん","僕");

前回のローマ字の文字列を配列に入れた処理と同じです。日本語をローマ字と同じ順番で nihongowordという配列に入れておきます。

テキストボックスを空にするempty()関数には日本語を表示するテキストボックスの初期化をする 文を追加しておきます。

function wordput(){
 empty(); //テキストボックスを空にしてくれる関数empty()の呼び出し
 i=0; //文字列の何文字目を指しているかを表す変数、初期位置は最初の文字に設定
 randomchi=Math.floor(Math.random()*word.length);
 this.rouma=word[randomchi];
 this.nihongo=nihongoword[randomchi];
}

問題を出力する関数wordput()は前回のスクリプトを少し改造し、ランダム値発生と テキストボックスに文字列を入れる部分を離しています。
これは発生したランダム値の番号のローマ字文字列と日本語文字列を入れたい為です。

正解か間違いか判断するcheck()関数は、前回の正解時の処理の部分に、

_root.param.seikaihenkou(); //正解数を増やす関数seikaihenkou()の呼び出し

と追加します。(正解、間違い数を表示しているインスタンス名を『param』としてます)
正解だとわかったらすぐに、正解数を増やす関数seikaihenkou()を呼び出します。 また出題数分、問題を出したら結果画面に行きたいので、

if(mondaisuu>=saidaimondaisuu){
 _root.param.end(); //結果表示に行く前にパラメータを変数に入れる関数end()の呼び出し
 _root.mondaisuu=saidaimondaisuu;
 _root.gotoAndStop("result");
}

というif文を追加しています。
問題数が最大出題数と同じ以上になった時、今回は10になった時に、 正解、間違いを表示しているインスタンス『param』にend()関数の呼び出しを依頼しています。
end()関数は、現時点での正解数と間違い数を結果表示の時に使うルートの変数(_root.seikai、_root.machigai) に入れる処理をするだけです。

_root.mondaisuu=saidaimondaisuu

は後で使うと思ってましたが、使ってませんので削除してもOKです(-"-;A ...アセアセ
そして、

_root.gotoAndStop("result")

でルートのラベル名『result』(結果画面があるところ)に飛ぶようにして、結果画面へと移動します。
前回は間違えた時に何も処理をしていませんでしたが、今回は間違えた数を表示しているので、

_root.param.machigaihenkou()

という文をelse文内に追加しています。
『param』に設定されているmachigaihenkou()関数は、間違い数を+1する関数です。

これでこのインスタンスに設定しているスクリプトの修正は終わりです。

2-2-3.正解、間違いを表示しているインスタンスのスクリプトの作成

onClipEvent(load){
 this.seikai=0; //正解数を初期化
 this.machigai=0; //間違い数を初期化
 //正解数を1プラスする関数
 function seikaihenkou(){
  this.seikai=this.seikai+1;
 }
 //間違い数を1プラスする関数
 function machigaihenkou(){
  this.machigai=this.machigai+1;
 }
 function end(){
  _root.seikai=this.seikai;
  _root.machigai=this.machigai;
 }
}

これは2-2-2の説明で出てきたのと、難しいことはしてないのでわかると思います。

2-2-4.時間の表示をしているインスタンスのスクリプトを作成

これが一番わけわからんことしてます・・・、見た感じがどうでもいいって場合は 必要ないところもありますけどね

onClipEvent(load){
 tempbyou=0;
 tempfun=0;
 tempjikan=0;
 this.time="00:00:00";
 inittime=getTimer();
}
onClipEvent(enterFrame){
 tempbyou=Math.floor((getTimer()-inittime)/1000);
 //時間を随時ルートの変数_root.timeに入れておく
 _root.time=getTimer()-inittime;
 //以下は時間を表示の為の設定
 tempfun=Math.floor(tempbyou/60);
 tempjikan=Math.floor(tempfun/60);
 tempbyou=tempbyou-(tempjikan*60*60)-(tempfun*60);
 if(String(tempbyou).length==1){
  tempbyou="0"+tempbyou;
 }
 if(String(tempfun).length==1){
  tempfun="0"+tempfun;
 }
 if(String(tempjikan).length==1){
  tempjikan="0"+tempjikan;
 }
 this.time=tempjikan+":"+tempfun+":"+tempbyou;
}

まずonClipEvent(load){}の部分ですが、秒、分、時間を分ける時に使うtempbyou、tempfun、tempjikan を0と初期化していますがあまり意味はありません(謎)
次に時間を表示しているテキストボックスthis.timeに初期値『00:00:00』を入れています。
そして次の

inittime=getTimer()

ですが、getTimer()関数はFlashが起動してからの時間を返しますが単位ミリ秒です。
秒数を得るにはgetTimer()/1000、分を得るにはgetTimer()/(60*1000)になります。
ここではこの時間を表示するクリップが表示された瞬間のgetTimer()を記録しておきます。
これがタイピングが始まった時の時間になります。
なぜこれが必要になるか?それはonClipEvent(enterFrame){}内で随時時間をテキストボックスに いれてますが、getTimer()関数から得た時間をそのまま入れるとFlashから起動した時からの 時間になってしまうからです。この場合は時間表示のテキストボックスが表示された時、 つまり、タイピングを要求し始めた時からの時間を表示しなくてはならない為です。

さてonClipEvent(enterFrame){}内にいきます。
最初の
tempbyou=Math.floor((getTimer()-inittime)/1000);

ですがgetTimer()-inittimeでタイピングが始まってからの時間を得て、それを1000で割ることで、 秒数を得て、Math.floor()で小数点以下を切り捨て秒数をtempbyouに入れています。

_root.time=getTimer()-inittime;

は結果表示する時に使います。現在のミリ秒を_root.timeに入れています。

tempfun=Math.floor(tempbyou/60);
tempjikan=Math.floor(tempfun/60);
tempbyou=tempbyou-(tempjikan*60*60)-(tempfun*60);

これはさきほど得た秒数から『分』と『時間』を得るための処理です。
秒数は60秒を超えて100秒とかなっていきますので、それを60で割ったものを『分』に入れ、 その『分』をさらに60で割ったものを『時間』に入れて、『秒』から『分』と『時間』を 割り出しています。
この時の『秒』は総時間で、『分』と『時間』を含んだものなので、最後に

tempbyou=tempbyou-(tempjikan*60*60)-(tempfun*60)

として、総時間から『分』と『時間』を引いたものを上書きして、本当の『秒』を作成しています。
if(String(tempbyou).length==1){
 tempbyou="0"+tempbyou;
}
if(String(tempfun).length==1){
 tempfun="0"+tempfun;
}
if(String(tempjikan).length==1){
 tempjikan="0"+tempjikan;
}

さてこれは何をしているのでしょうか?
実はこれ『6』秒だったとしたら『06』秒に変える処理です。同じように『分』と『時間』 も行っています。
これは表示した時の見た目の問題です。
tempbyou、tempfun、tempjikanはそれぞれ数値なので、それをString()関数で文字列に変換したもの の文字数を.lengthで取得しそれが『1』だった時、つまり一文字だった場合は、
最初に『0』という数字をつけて、それぞれ上書きをしています。

『秒』、『分』、『時間』を作成したので、最後に

this.time=tempjikan+":"+tempfun+":"+tempbyou;

と形を作って時間表示テキストボックスthis.timeに入れています。

2-2-5.結果表示インスタンスに設定するスクリプトの作成

この結果表示の部分かなり怪しいです・・・(T▽T)アハハ!

onClipEvent(load){
 juppun=10*60*1000;//10分間に予想できるタイプ数、時間によって変更してください20分なら20*60*1000
 ippuntype=_root.seikai/(_root.time/60/1000); //一分間の予想タイプ数
 trueparsent=Math.floor((_root.seikai/(_root.seikai+_root.machigai))*100);
 //10分を超えなかった時だけ予想時間を表示
 if(_root.time<10*60*1000){
  this.typesokudo=Math.floor(10*ippuntype);
 }else{
  this.typesokudo="計測不能";
 }
 this.seikairitu=trueparsent;
 //得点化、お好きなように得点法を変えて試してみるのもいいですね
 this.tokuten=Math.floor(ippuntype*10+trueparsent*10-(_root.machigai*100));
}

さて結果画面のインスタンスに設定するスクリプトですが、まず最初に ミリ秒を分に変えて、それを10分にしたものをjuppunという変数に入れてますが、 これも使わなかったようです・・・
次に
ippuntype=_root.seikai/(_root.time/60/1000);

としてますが、これは一分間にタイプできる数の予想数値を作成しています。
正解した数/(終了までの時間/60/1000)です。
わたし自身、この文で一分間にタイプできる予想数値が取得できるかは怪しいのですが・・、 間違ってる可能性もあり。
次に正解率を作りましょう

trueparsent=Math.floor((_root.seikai/(_root.seikai+_root.machigai))*100);

(正解数/総タイプ数)×100で正解率を出しています。

if(_root.time<10*60*1000){
 this.typesokudo=Math.floor(10*ippuntype);
}else{
 this.typesokudo="計測不能";
}

10分以内に終了した時は10分間に予想できるタイプ数を出しますが、10分を超えた場合は、 計測不能と表示することにします。

最後に、今までの結果から得点法を適当に作って、

this.tokuten=Math.floor(ippuntype*10+trueparsent*10-(_root.machigai*100));

として、得点を表示するテキストブロックに入れてます。
得点法はいろいろ考えてみるといいですね。

2-2-6.完成

また詳しく説明してますが・・・、省くところは省きました。
ちょっと難しいかもしれませんが、わからない時は掲示板へ質問どうぞ
今回のスクリプトは怪しい部分もあります。
ついでに言ってしまうと、Flashが起動してからすぐにタイピングが始まっているので、 そこは次回の講座で修正していきます。
次回は
2-3.簡易タイピングソフトにアクセサリを追加
です
ほぼタイピングソフトとしては完成してるのですが、それを公開できるようにちょこっと 修正を入れていくという講座です。タイピングじゃない部分になるかも?

2-2-7.flaファイルのダウンロード

講座1−1ダウンロード

lzhで圧縮してあります。

前に戻る 講座のTOPへ戻る 次に進む