5.コールバック

　前章では絵を少しずつ動かせるようになりましたが、 それをゲームにする準備として、 この節では自動的に繰り返しを行う処理を書きます。

5-a.タイマーを使用してみましょう

　JavaScript には、数秒後に指定した関数を実行するsetTimeoutという関数があります。 関数が関数を呼ぶというのもちょっとわかりづらいかも知れませんが、 慣れれば大丈夫です。とりあえずこれを使ってみましょう。 以下は、 「3-e. アンカーから入力してみましょう」 で解説されている基本系をベースにお読みください。
　さて、まずは変数宣言部分。

//------------------------------------------------ // コールバック初期設定 //------------------------------------------------ var timerID;

　次に関数宣言。gameBody を以下の形に変更します。

//------------------------------------------------ // コールバック関数(兼ゲーム本体) //------------------------------------------------ function gameBody() { clearTimeout( timerID ); // タイマークリア alert( "３秒経ちました！" ); }

　そして、gameStart 内で gameBody() として呼び出していた部分を、 以下の形で呼び出すように変更します。

// gameBody関数呼び出し alert( "ＯＫ押したら３秒待ってね" ); timerID = setTimeout( "gameBody()" , 3000 ); // タイマー設定

ちょっと解説

  1. setTimeout
    2. 　指定時間(第２引数)が経過したら、指定関数(第１引数)を呼び出すという関数です。 書き方はこんな感じです。

    変数名 = setTimeout( "関数名(引数…)" , 時間:1/1000秒単位 );

    　時間は 1/1000秒単位で指定します。 今回は３秒という意味で 3000 と書きました。
    　なお、呼び出す関数はどこかで定義しなければなりません。 この関数の事をコールバック関数と呼びます。

  2. clearTimeout
    3. 　タイマーの設定をクリアします。 setTimeout で呼ばれた関数の最初では、 必ずこれを行うのがお約束になっています。 変数名には、setTimeout で返ってきた値が入っている変数名を書きます。

    clearTimeout( 変数名:setTimeoutの返り値を保持したもの );

  3. 動作
    4. 　うまくいった場合、アンカー「ゲーム開始」を押すと、 「ＯＫ押したら３秒待ってね」 と表示され、 実際にＯＫを押すと、約３秒後に 「３秒経ちました！」 と表示されます。

5-b.タイマーを繰り返してみましょう

　自分で作った関数の中で、その関数を呼び出すとどうなるでしょう？ 先程の gameBody 関数の中身を変えて、 ちょっと実験してみましょう。

//------------------------------------------------ // コールバック関数 //------------------------------------------------ function gameBody() { clearTimeout( timerID ); // タイマークリア var f; f = confirm( "３秒経ちました！続けますか？" ); if ( f ) { timerID = setTimeout( "gameBody()" , 3000 ); // タイマーで自分を呼んでみる } }

ちょっと解説

  1. confirm
    　これはalertと同じようにメッセージを出す関数ですが、 その際に ＯＫ か キャンセル かを聞いて来るものです。 ＯＫなら true が、キャンセルなら false が confirm の戻り値に設定されます。

    変数名 = confirm( "質問メッセージ" ); if ( 変数名 ) { ＯＫの時の処理 } else { キャンセルの時の処理 }

結果

5-c.絵を動かしてみましょう

　それでは、絵を動かすプログラムと融合させて、絵をスムースに動かしてみましょう！
　ここまでの章と節で覚えたことで、絵をスムースに動かすことはもうできるはずです。 がんばって考えてみて下さい！！！

ヒント：うまくいかない方へ
　ここは４章と５章を融合させる必要があります。 両方をきちんと理解していないと結構大変かも知れません。 うまくいかない場合は、５章もそうですが、 ４章あるいは３章も含めて、何度も読み直してみてください。

テクニック

　下記に便利なテクニックを書いておきました。 ただしこれは使わなくてもできます。 余裕がある方は応用として読んでください。

  1. タイマー初期化
    　タイマーループは最初に、

    timerID = setTimeout( '' , 1 );

    　として timerID の初期設定をすると、 ループを開始しようとした時に gameBody() と書いて関数を呼ぶだけでループが実行できます。 同じことをいっぱい書かなくて済むちょっとしたコツですので、 利用してみてください。

  2. 有限ループ
    　今までの知識だけでプログラムすると無限ループにしかできません。 ボールがどこかに消えてしまっても動きつづけてしまいます(>_<) 不便な場合は有限ループ、 つまり何らかの条件で終了するようにすると良いでしょう。
    　その方法には色々あります。例えば ボールの座標を判定してある値をはみ出していたら終了する方法、 あるいは 変数でカウンターを定義し、ループの度にカウントアップし、 そのカウンターがある値を超えていたら終了する方法など。 なお、例えば ballx が 200 を超えているかどうかを判断する方法は、

    if ( 200 < ballx ) { … }

    と書きます。 このように数の大小を比較する条件は不等号(>や<)を使用して書きます。 カウンターの場合も同様です。
    　注意をひとつ。 上では「～したら終了」と書きましたし、 サンプルのプログラムもそういう形のif文です。 しかし 5-b.タイマーを繰り返してみましょう を見てもらえればわかるように、 終了する処理というのは無くて繰り返す処理をしないようにする必要があります。 つまりサンプルはそのままでは使えません。 ちょっとイジワルかも(^_^;
    　このように日本語とプログラムが合致しない場合もありますが、 工夫してうま～くプログラムしてください。

5-d. アンケート

　前章「4.絵とレイヤー」までを理解された方で、 本章「5.タイマーコールバック」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「5-a.タイマーを使用してみましょう」～「5-c.タイマーで絵を動かしてみましょう」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
既に知っていました
１週間以内でだいたい理解できました
１ヶ月以内でだいたい理解できました
１年以内でだいたい理解できました
１年以上かかりましたがだいたい理解できました
理解できそうに無いのですぐあきらめました
１週間やってみましたがあきらめました
１ヶ月やってみましたがあきらめました
１年やってみましたがあきらめました
１年以上やってみましたがあきらめました
コメント欄：
※コメント欄にはご意見やわかり辛かった部分の指摘等がありましたらお願いします。 (なお質問についてはは掲示板までお願いします)
　ご協力ありがとうございます。
目次へ戻る