どうも！LSSです！！
ゲームなどのプログラムを書く際、「あるタイミング」から「今現在」まで、どれだけの時間が経ったかを計算する必要が出てくるケースがあります。
「放置ゲー」と呼ばれるものや、スマホゲームによくある「スタミナ」システム、時間経過で作物が育つ農場系ゲームなどが特にそうですね。
計算するには「時間（時刻）」を数値に変換する事ができれば、あとは足し算引き算するだけで済みます。
また、最初の「あるタイミング」を記録するのも「数値」として記録するのがやりやすそうです。
という事で、今回はJavaScriptで時間を扱う方法について試してみる事にします。
1970年1月1日 午前0時からの経過ミリ秒
コード
<div id="gamen1"> </div>
<script>// <![CDATA[
t1=new Date().getTime();
gamen1.innerHTML=t1;
// ]]></script>
まず、
<div id="gamen1"> </div>
で表示するための場所を用意しておきます。
そしてscript内に、
t1=new Date().getTime();
として、経過ミリ秒数を代入します。
new Date() は「現在の日付オブジェクト」、つまりスクリプトが実行されたその瞬間の「時間」を現すモノとなります。
その「時間」に対し、 .getTime() をつけると、「1970年1月1日 午前0時」から何ミリ秒経過した時間なのか？を数値で返してくれます。
そして取得できた値を、
gamen1.innerHTML=t1;
最初に用意しておいた「表示するための場所」である、id="gamen1"と指定した<div>タグの中に書きこんで、画面上にその数字が出てくる事になります。
なお、
gamen1.innerHTML=new Date().getTime();
と変数t1を使わずに書いても動作しますが、なんとなく分けてみました。
ちなみに、「１ミリ秒」は「１０００分の１秒」です。
1970年1月1日 午前0時からの経過秒数
コード
<div id="gamen2"> </div>
<script>// <![CDATA[
t2=Math.floor(new Date().getTime()/1000);
gamen2.innerHTML="1970年1月1日 午前0時から、"+t2+"秒経過しました。";
// ]]></script>
ちょっとだけ分かりやすくするために、1000で割って「秒」にしましょう。
更に、いつからの秒数なのかも表示するという親切仕様^^
t2=Math.floor(new Date().getTime()/1000);
と、一気に計算していますが、内側から見ていくと、
new Date().getTime()
これは先ほど書いた「ミリ秒」ですね。
new Date().getTime()/1000
それを1000で割ると、秒単位の数値になります。
でもそのままでは「.123」のように小数が後ろにつく事になるので、
Math.floor(new Date().getTime()/1000)
小数点以下を切り捨てる関数、 Math.floor で囲んであげます。
1970年1月1日 午前0時からの経過日数
コード
<div id="gamen3"> </div>
<script>// <![CDATA[
t3=Math.floor(new Date().getTime()/1000/60/60/24);
gamen3.innerHTML="1970年1月1日 午前0時から、"+t3+"日経過しました。";
// ]]></script>
「秒」も結構大きい数字になるので、分→時→日まで一気に計算してしまいましょう！
t3=Math.floor(new Date().getTime()/1000/60/60/24);
まず、「ミリ秒」を1000で割って「秒」に直したのと同様に、
「秒」を60で割って「分」、
「分」を60で割って「時間」、
「時間」を24で割って「日」、
を算出してみました。
なお「日」まででストップしたのは、「年」だと「うるう日」を考慮するのが大変、「月」だともっと大変だからですｗ
あとがき
結局「getTime()を使ってみた」というだけの記事でしたｗ
これで得た「経過ミリ秒」の数値を例えば、
で解説した「WebStorage」に記録すると、いったんページを閉じて、後日開いた時にも
「前回の時に記録した時からどれだけ時間が経ったか」
を計算して、ゲームに反映させる事ができますね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
