質問編集履歴

2

文字の追加/コード修正

2022/10/05 10:10

投稿

koala.engineer
test CHANGED
File without changes
test CHANGED
@@ -2,22 +2,30 @@
2
2
  `this`を使用する意義と使用方法について理解を深めたいです。
3
3
 
4
4
  ### 前提
5
- javascriptでタイピグゲームの作成に挑戦しており、
5
+ javascriptでスロットマシンの作成に挑戦しており、
6
6
  その過程でクラスについて学習しています。
7
7
 
8
8
  お手本のコードは以下です。
9
9
  ```js
10
+ 'use strict';
11
+
12
+ {
10
13
  class Panel { //クラス
11
- constructor() //コンストラクタ
14
+ constructor() { //コンストラクタ
12
15
  const section = document.createElement('section');
13
16
  section.classList.add('panel');
14
17
 
15
18
  this.img = document.createElement('img');
16
- this.img.src = 'img/seven.png';
19
+ this.img.src = this.getRandomImage();
20
+
21
+ this.timeoutId = undefined;
17
22
 
18
23
  this.stop = document.createElement('div');
19
24
  this.stop.textContent = 'STOP';
20
25
  this.stop.classList.add('stop');
26
+ this.stop.addEventListener('click', () => {
27
+ clearTimeout(this.timeoutId);
28
+ });
21
29
 
22
30
  section.appendChild(this.img);
23
31
  section.appendChild(this.stop);
@@ -26,12 +34,36 @@
26
34
  main.appendChild(section);
27
35
  }
28
36
 
29
- //インスタンス
37
+ getRandomImage() {
30
- const panels = [
38
+ const images = [
39
+ 'img/seven.png',
40
+ 'img/bell.png',
41
+ 'img/cherry.png',
42
+ ];
43
+ return images[Math.floor(Math.random() * images.length)];
44
+ }
45
+
46
+ spin() {
47
+ this.img.src = this.getRandomImage();
48
+ this.timeoutId = setTimeout(() => {
49
+ this.spin();
50
+ }, 50);
51
+ }
52
+ }
53
+
54
+ const panels = [ //インスタンス
31
55
  new Panel(),
32
56
  new Panel(),
33
57
  new Panel(),
34
58
  ];
59
+
60
+ const spin = document.getElementById('spin');
61
+ spin.addEventListener('click', () => {
62
+ panels.forEach(panel => {
63
+ panel.spin();
64
+ });
65
+ });
66
+ }
35
67
  ```
36
68
 
37
69
 

1

記号の付け忘れ

2022/10/05 09:57

投稿

koala.engineer
test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,5 @@
1
1
  ### 実現したいこと
2
- thisを使用する意義と使用方法について理解を深めたいです。
2
+ `this`を使用する意義と使用方法について理解を深めたいです。
3
3
 
4
4
  ### 前提
5
5
  javascriptでタイピングゲームの作成に挑戦しており、