落ちゲーアプリ作成14（残り秒数カウント導入）

当初、人にゲームをやってもらった時に「終わっちゃったんだけど。」と言われまして、10秒間しかないゲームですからやった感がだいぶ薄いんだろうなとは思っていました。せめて30秒くらいはいるかなと思っていましたが、まだ実装まではいきません。

しかし、残り秒数のカウントを入れることにより、元々10秒しかないんだとわかってもらうことができるので導入しました。

結果、本の記述を参考にして

const totalTime = 10000;

const oldTime = Date.now();

const timerId = setInterval(() => {

const currentTime = Date.now();

const diff = currentTime - oldTime;

const remainMSec = totalTime - diff;

const remainSec = Math.ceil(remainMSec/1000);

let label = `${remainSec}`

if (remainMSec <= 0) {

clearInterval(timerId);

label = '0';

}

document.querySelector('#last_time_s').innerHTML = label

},1000);

を導入し、10秒のカウントダウンの表示に成功しました。

setInterval と最後の列で1秒ごとに中身を繰り返しているようで、最初の時間 (oldTime) を関数式の外に定義することにより、現在時間 (currentTime) だけが進んでその差を利用して残り時間を表示するという形をとっています。

残り秒数は .ceil を利用して切り上げています。

clearInterval で0秒以下になった場合は、関数式を繰り返さないように指定しています。

以下の投稿を参考にしています。

【JavaScriptの基本】setTimeoutとsetIntervalによる関数スケジューリング | ワードプレステーマTCD

表示の結果は、左上の秒数カウントダウンです。

制限時間10秒だから本当は小数点以下を表示した方が良いかもしれません。

引き続き頑張っていきたいと思います。