JavaScriptでタッチナンバーゲームを作ってみる

bubudoufu

3年前

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります

概要
数字がタッチされた時の処理
タイムを測定する

概要

数字を1から順に20までをタッチをしてタイムを競うゲームです。

数字がタッチされた時の処理

数字部分はdiv要素で作成し、イベントリスナーを設定しています。タッチされるとclickNumber関数が実行されます。
※以下からのコードは直接的に関係ない属性・変数名は省略しています。コード全体はgithubにあります。

count = 1; // タッチする数字を保持

// 数字がタッチされた時の処理
function clickNumber() {
  if (Number(this.textContent) === count) {
    number.forEach((value) => {
      value.className = "number";
    });
    this.className = "touched";
    count++;

    if (count > 20) {
      end();
      return;
    }
  }
}

count = 1; // タッチする数字を保持

// 数字がタッチされた時の処理

function clickNumber() {

if (Number(this.textContent) === count) {

number.forEach((value) => {

value.className = "number";

});

this.className = "touched";

count++;

if (count > 20) {

end();

return;

}

タッチされたdiv要素のtextContentプロパティとcount変数の値が同じだった場合は正解と判定をし、クラス属性を付け替えCSSで青丸に塗りつぶしています。count変数が20になるとend関数が実行されゲーム終了となります。

タイムを測定する

ゲームがスタートするとtimer関数が実行されタイムの計測が始まります。

// スタートボタンが押された時の処理
function start() {
  startTime = Date.now();
  timer();
}

let startTime; // 測定開始時間
let timeoutId;

// ストップウォッチ
function timer() {
  const d = new Date(Date.now() - startTime);
  const s = String(d.getSeconds()).padStart(3, "0");
  const ms = String(d.getMilliseconds()).padStart(3, "0");
  time.textContent = `${s}.${ms}`;
  timeoutId = setTimeout(() => {
    timer();
  }, 10);
}

// ゲーム終了
function end() {
  clearTimeout(timeoutId);
}

// スタートボタンが押された時の処理

function start() {

startTime = Date.now();

timer();

}

let startTime; // 測定開始時間

let timeoutId;

// ストップウォッチ

function timer() {

const d = new Date(Date.now() - startTime);

const s = String(d.getSeconds()).padStart(3, "0");

const ms = String(d.getMilliseconds()).padStart(3, "0");

time.textContent = `${s}.${ms}`;

timeoutId = setTimeout(() => {

timer();

}, 10);

}

// ゲーム終了

function end() {

clearTimeout(timeoutId);

}

startTime変数にはスタートボタンが押されたタイミングの時間をDate.now()メソッドで取得し保持しています。timer関数はsetTimeoutを使い10ミリ秒おきにDate.now()メソッドで時間を取得してstartTime変数の時間との差分を経過時間として表示させています。ゲームが終了するとend関数が実行されclearTimeoutを使いsetTimeoutを終了してタイマーを止めています。

最後までお読みいただきありがとうございました。