ドットインストール - 3分動画でマスターできるプログラミング学習サービス

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
//javaScriptで数字タッチゲームを作成する
//class構文で処理をひとまとまりにして管理する
//classはBoardクラスとPanelクラスを作成して処理を分けて考える※チーム開発する上で役割を決めておく
//Boardクラスは4つ持ったボードを表している
//Panelクラスはパネルがどのように配置するか担っている。Panelクラスはパネルの内に責任をもつ
class Panel {
  //インスタンスした際の初期化処理
  constructor(game) {
    this.game = game;
    //li要素を生成
    this.el = document.createElement('li'); //プロパティをthis.el
    this.el.classList.add('pressed') //pressedクラスを付与
    this.el.addEventListener('click',() => {
      this.check();
    })
  }
  getEl() {
    return this.el
  }
  //パネルクラスを外してパネルにランダムで数字を入れる
  activate(num) {
    this.el.classList.remove('pressed');
    this.el.textContent = num
  }
  //panelボタンを押す際に0から押すようにif分で条件分岐する
  check() {
    if(currentNum === parseInt(this.el.textContent, 10)) {
      this.el.classList.add('pressed')
      currentNum++
    }
    if(currentNum  === 4) { //currentNumが総パネル数と同じになったらタイマーを止める
      clearTimeout(timeoutId)
    }
  }
}
class Board {
  //インスタンスの初期化設定
  constructor(game) {
    this.game = game
    //各パネルを配列に格納するための空の配列を作成
    this.panels = [];
    //空の配列にパネルを格納するためにfor分でループを回す
    for(let i = 0; i< 4; i++) {
      this.panels.push(new Panel(this.game)) //Panelクラスでパネルを用意する
    }
    this.setup()
  }
 setup() {
  const board = document.getElementById('board');
  this.panels.forEach(panel => {
    board.appendChild(panel.getEl())
  })
 }
 //btnをクリックした際にboardの中のパネルのメソッドを呼び出す
 activate() {
  const nums = [0,1,2,3]; //パネルにつける番号を配列で保持
  
  this.panels.forEach(panel => {
     const num = nums.splice(Math.floor(Math.random() * nums.length),1)[0];
     panel.activate(num);
   })
 }
}
// const panel = new Panel();
class Game {
  constructor() {
    this.board = new Board(this);
    //ボタンのクリック時に今、どのボタンが押されているかを管理するための変数
    this.currentNum = undefined
    
    //タイマー処理を実装
    this.startTime = undefined
    
    //タイマーを止める変数
    this.timeoutId = undefined
    
    
    //ボタンクリック操作でパネルを押す処理
    //ボタン要素を取得
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
     this.startClick()
    })
  }
  startClick() {
    this.board.activate();
    
    this.currentNum = 0;
    if(typeof this.timeoutId !== 'undefined') {
       clearTimeout(this.timeoutId)
    }
    this.startTime = Date.now()
    this.runTimer()
  }
  runTimer() {
    const timer = document.getElementById('timer')
    this.elapsedTime = ((Date.now() - this.startTime) / 1000).toFixed(2);
    timer.textContent =this.elapsedTime;
    this.timeoutId = setTimeout(() => {
      this.runTimer()
    },10)
  }
}
new Game()
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX