JavaScript には、数秒後に指定した関数を実行するsetTimeoutという関数があります。 関数が関数を呼ぶというのもちょっとわかりづらいかも知れませんが、 慣れれば大丈夫です。とりあえずこれを使ってみましょう。 以下は、 「3-e. アンカーから入力してみましょう」 で解説されている基本系をベースにお読みください。
さて、まずは変数宣言部分。
|
|
|
|
|
自分で作った関数の中で、その関数を呼び出すとどうなるでしょう? 先程の gameBody 関数の中身を変えて、 ちょっと実験してみましょう。
//------------------------------------------------ // コールバック関数 //------------------------------------------------ function gameBody() { clearTimeout( timerID ); // タイマークリア var f; f = confirm( "3秒経ちました!続けますか?" ); if ( f ) { timerID = setTimeout( "gameBody()" , 3000 ); // タイマーで自分を呼んでみる } } ちょっと解説
- confirm
これはalertと同じようにメッセージを出す関数ですが、 その際に OK か キャンセル かを聞いて来るものです。 OKなら true が、キャンセルなら false が confirm の戻り値に設定されます。
変数名 = confirm( "質問メッセージ" ); if ( 変数名 ) { OKの時の処理 } else { キャンセルの時の処理 } 結果
ということで、いかがでしたでしょうか? OKを押し続ける限り、繰り返し実行されているのが確認できたかと思います。
こういう繰り返しができるのがプログラムの特徴と言えます。 上から下に順番通りに実行するだけなら HTML とあまり変わりませんからね。
という訳で、ここまでマスターできれば、 もう JavaScript のプログラミングの大事な部分はマスターしています。 動くゲームはもう作れたも同然ですね。
それでは、絵を動かすプログラムと融合させて、絵をスムースに動かしてみましょう!
ここまでの章と節で覚えたことで、絵をスムースに動かすことはもうできるはずです。 がんばって考えてみて下さい!!!
ヒント:うまくいかない方へここは4章と5章を融合させる必要があります。 両方をきちんと理解していないと結構大変かも知れません。 うまくいかない場合は、5章もそうですが、 4章あるいは3章も含めて、何度も読み直してみてください。
テクニック
下記に便利なテクニックを書いておきました。 ただしこれは使わなくてもできます。 余裕がある方は応用として読んでください。
- タイマー初期化
タイマーループは最初に、として timerID の初期設定をすると、 ループを開始しようとした時に gameBody() と書いて関数を呼ぶだけでループが実行できます。 同じことをいっぱい書かなくて済むちょっとしたコツですので、 利用してみてください。
timerID = setTimeout( '' , 1 );
- 有限ループ
今までの知識だけでプログラムすると無限ループにしかできません。 ボールがどこかに消えてしまっても動きつづけてしまいます(>_<) 不便な場合は有限ループ、 つまり何らかの条件で終了するようにすると良いでしょう。
その方法には色々あります。例えば ボールの座標を判定してある値をはみ出していたら終了する方法、 あるいは 変数でカウンターを定義し、ループの度にカウントアップし、 そのカウンターがある値を超えていたら終了する方法など。 なお、例えば ballx が 200 を超えているかどうかを判断する方法は、と書きます。 このように数の大小を比較する条件は不等号(>や<)を使用して書きます。 カウンターの場合も同様です。
if ( 200 < ballx ) { … }
注意をひとつ。 上では「~したら終了」と書きましたし、 サンプルのプログラムもそういう形のif文です。 しかし 5-b.タイマーを繰り返してみましょう を見てもらえればわかるように、 終了する処理というのは無くて繰り返す処理をしないようにする必要があります。 つまりサンプルはそのままでは使えません。 ちょっとイジワルかも(^_^;
このように日本語とプログラムが合致しない場合もありますが、 工夫してうま~くプログラムしてください。
前章「4.絵とレイヤー」までを理解された方で、 本章「5.タイマーコールバック」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「5-a.タイマーを使用してみましょう」~「5-c.タイマーで絵を動かしてみましょう」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
ご協力ありがとうございます。