teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

プログラム追加

2019/08/09 01:48

投稿

yxt003
yxt003

スコア184

answer CHANGED
@@ -3,4 +3,42 @@
3
3
  ```
4
4
  上記の処理でtimeLimitがミリ秒から秒に、またstring型に変わっているようです。
5
5
  timeLimitをテンプレート側で表示させたいからだと思いますが、計算に使うtimeLimitは
6
- ミリ秒かつnumberを保持する必要があるので、計算用の変数をもう一つ用意すればどうでしょうか
6
+ ミリ秒かつnumberを保持する必要があるので、計算用の変数をもう一つ用意すればどうでしょうか
7
+
8
+ ```JavaScript
9
+ data() {
10
+ return {
11
+ words: [
12
+ 'apple', 'orange', 'banana'
13
+ ],
14
+ word: '',
15
+ location: 0,
16
+ score: 0,
17
+ miss: 0,
18
+ timeLimit: 3 * 1000,//表示用
19
+ timeLimitForCalc: 0,//計算用
20
+ startTime: 0,
21
+ isPlaying: false,
22
+ }
23
+ },
24
+ methods: {
25
+ updateTimer: function () {
26
+ const timeLeft = this.startTime + this.timeLimitForCalc - Date.now();
27
+
28
+ this.timeLimit = (timeLeft / 1000).toFixed(2);
29
+ const timeoutId = setTimeout(() => {
30
+ this.updateTimer()
31
+ }, 10)
32
+ if (timeLeft <= 0) {
33
+ clearTimeout(timeoutId);
34
+ }
35
+
36
+ },
37
+ startGame: function () {
38
+ this.isPlaying = !this.isPlaying
39
+ this.startTime = Date.now()
40
+ this.timeLimitForCalc = this.timeLimit //初期値をセット
41
+ this.updateTimer()
42
+ },
43
+ //以下略
44
+ ```