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

Flashでタイピングゲームを作ろう講座2−1
〜簡易タイピングソフトの基礎部分〜

完成例

2-1-1.テキストボックスのムービークリップの修正

まず最初に、今回の講座ではでてきたローマ字の文字列に対して、キーボードから打った文字が 正解だった時に入力用テキストボックスに文字を追加していくので、テキストボックスの ムービークリップを修正して、問題のローマ字を出力するテキストボックスと正解時に正解した アルファベットを入れるテキストボックスを作成しなくてはなりません。
出力用のテキストボックスの変数名は『rouma』、入力用のテキストボックスの変数名は 『input』という名前にして、作成します。 ムービークリップを修正すればインスタンスも同じになるのでインスタンスはそのままで 大丈夫です。(インスタンスは編集できません)。

2-1-2.テキストボックスに設定するスクリプト

前回までに使った機能が結構でてきます。まずは出力するローマ字の作成をしましょう。

word=new Array("TESUTO","AKACYANN","BOKU");

前回やった『配列』と同じなのでわかりますよね?わからない方は前回の講座をご覧ください。
次に出力した文字列を最後まで打ち終わった時に、新しい文字列を入れたいのですが、 現在打った文字列を削除しておかなければいけません。その文字列を削除する関数を作成しておきます

function empty(){
 this.rouma="";
 this.input="";
}

これも簡単ですね、テキストボックスに空文字を入れているだけです。
次は作成した文字列をランダムに選択して、出力用テキストボックス(this.rouma)に 出力する関数の作成をします。

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

最初にempty()関数を呼び出して、入力、出力用のテキストボックスを空にしています。
次のi=0ですがこの変数iは選択した文字列の何番目を指しているか?を表す為に使う変数です。
例えば、選択した文字列が『TESUTO』ならばiが1であったら、今『E』の文字を指していることになります。 最初の文字から見ていくので、iは0と初期化しておきます。
次の

choiseword=word[Math.floor(Math.random()*word.length)];

の部分ですが、前々回、ランダムに文字列の発生の講座で紹介した部分と少し違うところがあります。
それは

Math.random()*word.length

のところですが、ランダムな数値の発生上限がword.lengthとなっています。
これは前々回の講座では『5』という数字をいれていましたが、配列の要素数が増えると、 いちいち数を数えて数値を入れるのが大変です。
ならばその配列の要素を調べる 配列名.lengthを使おうということです。
配列名.lengthとすることでその配列の要素数を調べることができるのです。
そして最後に

this.output=choiseword

として選択した文字列を出力用テキストボックスに入れていますが、くっつけて、

this.output=word[Math.floor(Math.random()*word.length)]

としてもいいです。というかこちらの方がいいでしょうね。

さて、今回の講座のメイン部分、打ったキーが現在の文字(文字列のi番目)と同じだった時に、 打ったキーを入れるという処理を関数化したcheck()関数を作成しましょう。

function check(){
 if(String.fromCharCode(Key.getAscii()).toUpperCase()==this.rouma.charAt(i)){
  this.input=this.input+this.rouma.charAt(i);
  i++;
  //最後の文字まで打ち終わったらテキストボックスを空にして新しい文字列を入れる
  //関数wordput()を呼び出す
  if(i==this.rouma.length){
   i=0;
   wordput();
  }
 }
}

この関数が呼ばれた時に、最初にif文で判定しています。

if(String.fromCharCode(Key.getAscii()).toUpperCase()==this.rouma.charAt(i)){

の部分ですが、前回の講座でやった、キーボードから打ったキーをアルファベットの大文字 にするString.fromCharCode(Key.getAscii()).toUpperCase()と 出力している文字列のi番目の文字(this.rouma.charAt(i))を比較しています。
出力している文字列はthis.roumaなのでそのi番目を取り出す場合

charAt(i番目)

と指定すればできます。 これを比較して同じだった場合は次の処理(打ったキーを入力用テキストボックスに追加)に 進みますが、違う場合は何も処理をしません。

同じだった場合は、

this.input=this.input+this.rouma.charAt(i)

として打ったキーのアルファベットを入れるのですが、ここではthis.rouma.charAt(i)と なってます。実はこれ、

this.input=this.input+String.fromCharCode(Key.getAscii()).toUpperCase()

でもいいわけです。同じだからどっちでもいいってわけですね。

その後i++としてますが、今現在見ている文字が正解だったので、次の文字を指す為の処理です。

i=i+1;

と同じです。 さて次のif文、i(今見ている文字)がthis.rouma.length(出力した文字列の長さ)と同じ になった時、iを初期化して、新しい文字列を出力用のテキストボックスに入れるwordput()関数 の呼び出しを行っています。
これはi番目が最後の文字列の次の文字を指した時と出力した文字列の長さが一致した時 に実行されるのですが、『出力した文字列の長さ=出力した文字列の要素数+1』であることを お忘れなく。(要素の番号は0番目からなので)
これで関数作成などは完了しました。では初期化部分のonClipEvent(load){}部分を 作ってみましょう。

onClipEvent (load) {
 //出力するローマ字の一覧
 word=new Array("TESUTO","AKACYANN","BOKU");
 // テキストボックスを初期化する関数
 function empty(){
  this.rouma = ""; //問題のローマ字を入れるテキストボックスを初期化
  this.input=""; //キーボードから打ったキーが正解だった時入れるテキストボックスを初期化
 }
 //テキストボックスに新しい文字列を入れる関数
 function wordput(){
  empty(); //テキストボックスを空にしてくれる関数empty()の呼び出し
  i=0; //文字列の何文字目を指しているかを表す変数、初期位置は最初の文字に設定
  choiseword=word[Math.floor(Math.random()*word.length)];
  this.rouma=choiseword;
 }
 //打ったキーが現在見ている文字と同じかどうか判定して、処理をする関数
 function check(){
  if(String.fromCharCode(Key.getAscii()).toUpperCase()==this.rouma.charAt(i)){
   this.input=this.input+this.rouma.charAt(i);
   i++;
   //最後の文字まで打ち終わったらテキストボックスを空にして新しい文字列を入れる
   //関数wordput()を呼び出す
   if(i==this.rouma.length){
    i=0;
    wordput();
   }
  }
 }
 wordput();
}

これでインスタンスの初期化部分は完成です。
次はキーボードが押された時に、その打ったキーが現在見ている文字と同じかどうか判定する check()関数を呼び出すアクションを設定しましょう。
簡単です。

onClipEvent(keyDown){
 check();
}

これでキーが押された時にcheck()関数を呼び出すことができます。

2-1-3.完成

もうほぼできた感じですね・・、出力する文字列を増やしたりすればもう 簡易タイピングソフトとしてはできたんじゃないでしょうか?(どうかね・・)
次回は
2-2.簡易的なタイピングソフトの完成

です。次の講座でほぼ講座終わりです(謎)。

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

講座1−1ダウンロード

lzhで圧縮してあります。

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