【タイピングゲーム 第2回】タイマーを設置する

タイピングゲームを作っています。

yushi-dev.hatenablog.com

今回は、タイマーを設置します。

タイマー機能

タイマーを設置して、「決められたテキストを、時間内に打ち込む」というゲームにアップグレードします。

タイマー機能は、setIntervalを利用しつつ、Composition APIで実装します。

import { ref, computed } from 'vue'

const INTERVAL_TIME = 10

export default function useTimer() {
  const startTime = ref(0)
  const intervalId = ref(0)
  const seconds = ref(0)
  const timerTime = ref(0)

  const currentTime = computed(() => {
    const value = seconds.value * 1000 - (timerTime.value - startTime.value)

    return value >= 0 ? value : 0
  })
  const currentTimeSeconds = computed(() => Math.ceil(currentTime.value / 1000))

  const start = (_seconds: number, callback = () => {}) => {
    seconds.value = _seconds
    startTime.value = Date.now()

    intervalId.value = setInterval(() => {
      timerTime.value = Date.now()
      if (currentTime.value === 0) {
        // タイムアップ.
        clearInterval(intervalId.value)
        callback()
      }
    }, INTERVAL_TIME)
  }

  return {
    seconds,
    currentTime,
    currentTimeSeconds,
    start,
  }
}

startメソッドでタイマーを開始し、終了したらcallbackを呼び出します。

呼び出し元はこんな感じです。

const timer = useTimer()

timer.start(TIMER_TIME, () => {
  timeUp()
})

使いまわせそうで、Composition APIの威力を感じますね。

画面

赤枠の箇所に、残り時間を表示しています。

Pull Request

https://github.com/nek0meshi/typing/pull/2

あとがき

久しぶりにリモート飲み会をしました。