JavaScript Maniax

■タイマー■

マウス位置取得同様、JavaScriptでゲームを作成するには基本的なテクニックです。

画面上に常に更新、または値確認などを行うような処理が必要な場合に使える技術がsetTimeoutです。

window.setTimeout(処理, 時間(ミリ秒))

本来、この行を読み込んでから指定時間後に処理を実行する、というための記述ですが、上記を関数内におき、その関数自身を呼び出すことで、一定時間ごとに同じ関数を繰り返すという処理をさせることが出来ます。
ゲーム等のように、常に各変数の値やイベント発生などがおきる毎に何らかの処理を施す必要がある場合に欠かせない技術です。
また画面上に時計を表示させるなどの場合にも使えます。

//--sample--
function main(){
    objDate = new Date();
    h = objDate.getHours();
    m = objDate.getMinutes();
    s = objDate.getSeconds();
    document.f.t.value = h + ":" + m + ":" + s;

    window.setTimeout("main()",10)
}
//--sample--

処理の部分には、処理させたい内容を文字列として記載する点に気をつけてください。
例えば10秒後にアラートを表示させる方法は、

window.setTimeout("alert('１０秒！')",10000)

です。

上記の時計は桁数がそろっていません。

if (h < 10) { h = "0" + h; }

などの記述を追加し、桁数をそろえた方が見た目が良くなります。

応用編

時間の取得方法は前述のとおりですが、日付の取得方法はなぜか一手間かかります。

年 = objDate.getYear();
月 = objDate.getMonth() + 1;
日 = objDate.getDate();
時 = objDate.getHours();
分 = objDate.getMinutes();
秒 = objDate.getSeconds();

なぜか月の取得は、0〜11の値が返るので1を加算する必要があります。
また、時計表示のようにオブジェクトを現在時刻から作成している場合は関係ありませんが、過去の日付を取得する際に気をつけなければならないのは、2000年問題です。
getYearで返す値が2000年より前だった場合、2桁の値が帰りますので、1900を加算する必要があります。

if (dy < 2000) { dy += 1900; }

今回は短い上に基本的なテクニックばかりで物足りないかもしれませんが、実際のところ簡単な四則演算の他には「入力判定と指定位置への文字＆画像表示、タイマー」さえ使えれば（グラフィックに拘ったり音楽を鳴らしたりしない限り）大抵のゲームは製作できます。

[sample] [DL]

[top] [index]