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

Flashでタイピングゲームを作ろう講座1−3
〜ダイナミックテキストにキーボードで打った文字を入れる〜

完成例

1-3-1.テキストボックスの初期化

前回のスクリプトでは決められた文字列の中からランダムに文字列を選んでテキストボックスに 入れるということをやりましたが、
今回はキーボードから打った文字(アルファベッドの大文字)をテキストボックスに追加していくという ことをしようと思います。

今回新しく使う技は、『テキストボックスの初期化』、『キーボードが打たれた時に発生するアクション』、『打ったキーボードのキーのアスキーコード取得』、 『取得したアスキーコードをアルファベットの大文字に変換』です。 前回のFlashファイルを活用してもいいですが、前回のスクリプトは使ってません・・ テキストボックスとボタンはちょっと変えて使ってますが
テキストボックスの範囲がわかりやすいように、テキストボックスのサイズに合わせて、 背景をつけ、ボタンはテキストボックス内の文字を削除する時に使用する為、ボタンに表示されている 文字を『消去』に変更しました。
では前回のスクリプトのonClipEvent(load)アクション(初期化時などに使う)部分を

onClipEvent(load){
 this.output=""; //テキストボックスを空にする
}

とします。これで、テキストボックスの初期文字『最初の文字』というのが消去され、 インスタンスが表示される前にテキストボックスが空になります。

1-3-2.キーボードから入力された文字をテキストボックスに入れる

さて、それでは今回の講座のメイン部分に入ります。
まず、キーボードが押された時に発生するアクションonClipEvent(keyDown){}を使います。
キーボードが押されて離された時に発生するonClipEvent(keyUp){}というアクションもありますが、 タイピングゲームを作る時には使えません・・・、メモ帳などにキーボードから文字を入力してみて ください。わかりましたか?キーボードが押された時点で文字が出るんです。
なのでキーボードを押して離した時に発生するアクションではタイピングは実現できません(たぶん)

とりあえずは今回記述したスクリプトを書いて、説明します。

onClipEvent (keyDown) {
 this.output = this.output+String.fromCharCode(Key.getAscii()).toUpperCase();
}

わかりましたか?今までよりかなり複雑でわからないと思います。
わたしもちょっとわからなかったり・・(謎)
まずスクリプトが一行で書かれていますがこれを分割して書くとわかると思います。

this.output      //テキストボックスの変数名
String.fromCharCode() //アスキーコードをアルファベットに変換
Key.getAscii()    //打ったキーボードのキーのアスキーコードを取得する
toUpperCase()    //アルファベットを大文字に変換する

というそれぞれの機能をいっぺんに一行で書いてあるのでわかりづらいのです。
アスキーコードは文字をコードで表していますとしかわかりません。詳しくないので・・
よってさきほどの一行のスクリプトを解読していくと、まずは

String.fromCharCode(Key.getAscii())

という部分、これは前回打ったキーボードのキーのアスキーコードをアルファベットに変換する ということですね。
次に、

String.fromCharCode(Key.getAscii()).toUpperCase()

はさきほどの打ったキーのアスキーコードをアルファベットに変換したものを、大文字に変換する と解読できます。

実はKey.getCode()という前回打ったキーボードのキーコードを取得するというのもあるのですが、 大文字と小文字をそれぞれ判断したいという時はKey.getAscii()でないとできませんので、 Key.getAscii()を選択しました。そういう風に作りたいという場合、直すのが大変ですから・・。
今回の場合、アルファベットの小文字を大文字、大文字の場合はそのままなので、全部大文字で テキストボックスに入れることになります。つまりKey.getCode()と同じことになりますね。

で、最後に

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

とありますが、これは、右辺(=の右側)のthis.outputはテキストボックスに入っている文字列 (まぁいわば今まで入力した文字郡)でこれにさきほどの、
打ったキーのアスキーコードをアルファベットに変換したものを、大文字に変換したものをたすことで 前回までに打った文字の後ろに、今打ったキーをたすことができます。
それを左辺(=の左側)のthis.outputに入れてます。
this.outputというのが一行にふたつも出てきてこんがらがる人もいるかと思いますが、 実行する順序が右辺から左辺の順番なので、できるのです。
右側が古い、左側が新しいと思えばいいでしょうね。
それでもわからないという人は、一行じゃなく分割してみましょう。

mojiretu=this.output+String.fromCharCode(Key.getAscii()).toUpperCase();
this.output=mojiretu;

これでわかりましたか?テキストボックス内の文字列の後に今打った文字を追加して、 変数mojiretuに入れておいて、それをまたテキストボックスに入れるという作業を、 一行でしただけなんです。
これで、ほぼ完成しました。

1-3-3.消去ボタンに設定するスクリプト

前回のボタンに設定したスクリプトを変更する前に、テキストボックスのインスタンスに設定した スクリプトに少し追加します。

function textdelete(){
 this.output="";
}

これは、ボタンからのテキストボックス内の文字列の消去(初期化)命令を実行する関数です。
テキストボックスの範囲を超える文字入力をした時、文字が追加されないのでいちおう。
ボタンには
on(release){
 _root.textclip.textdelete(){
}

これでボタンをクリックした時に、インスタンスに記述してある関数textdelete()を呼び出します。

1-3-4.完成

どうでしょうか?タイピングゲームに近づいて来ましたね。
でもまだいっぱいやることがあるんです、くじけずがんばりましょう!
次回は

2-1.簡易的なタイピングソフトの基礎部分

です。かなりタイピングゲームに近づきますね。

1-3-5.flaファイルのダウンロード

講座1−1ダウンロード

lzhで圧縮してあります。

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