javascriptでのクラスの使い方。

ドットインストールというサイトを参考にして、タッチゲームを作成しています。

作りたいもの
「1月～12月」の英語を順にタッチしていくゲームで、
jsの一番下行の選択肢の配列を変えるだけで、さまざまな内容のものを順番でタッチできるゲームを作りたい。

詰まっているところ
①スタートを2回以上押す（Gameクラスのbtn.addEventListenerを実行する）と、Boardクラスで定義した「array」が空になる。
②Panelクラスで定義した「originalarray」が空になる。

javascript
1'use strict';
2
3{
4    //クラス１（Panelクラス）―――――――――――――――――――――――――――
5    class Panel {
6
7        constructor(game) {
8            this.game = game;
9            this.el = document.createElement('li');
10            this.el.classList.add('pressed');
11　　　　　　//↓ここが空になっています
12            this.originarray = game.gettheme();
13            this.el.addEventListener('click', () => {
14                this.check();
15            });           
16        }
17
18
19        getEl() {
20            return this.el;
21        }
22
23
24        activate(item) {
25            this.el.classList.remove('pressed');
26            this.el.textContent = item;
27        }
28
29
30        check() {
31            if (this.originarray[this.game.getcurrentnum()]=== this.el.textContent) {
32                this.el.classList.add('pressed');                
33                this.game.addcurrentnum();       
34                } 
35            } 
36        
37
38
39
40    //クラス２（Boardクラス）―――――――――――――――――――――――――――
41    class Board {
42
43        constructor(game) {
44            this.game = game;
45            this.panels = [];
46　　　　　　//↓ここが、btnを2回押すと空になっています
47            this.array = game.gettheme()
48            for (let i = 0; i < this.game.gettheme().length; i++) {
49                this.panels.push(new Panel(this.game));
50            }
51
52            this.setup();
53        }
54
55
56        setup() {
57            const board = document.getElementById('board');
58            this.panels.forEach(panel => {
59                board.appendChild(panel.getEl());
60            });
61        }
62
63
64        activate() {
65            let array =this.array;
66
67            this.panels.forEach(panel => {
68                const item = array.splice(Math.floor(Math.random() * array.length), 1)[0];
69                panel.activate(item);
70            });
71        }
72    }
73
74
75
76
77    //クラス３（Gameクラス）―――――――――――――――――――――――――――
78    class Game {
79        constructor(theme) {
80            this.theme = theme;
81            this.board = new Board(this);
82            this.currentnum = undefined;
83            
84            const btn = document.getElementById('btn');
85　　　　　　//↓下の処理が、スタートを押したときの処理です。
86            btn.addEventListener('click', () => {
87                this.start();
88            });
89        }
90
91
92            start(){
93                this.currentnum = 0;
94                this.board.activate();
95            }
96
97        
98       
99
100        addcurrentnum() {
101            this.currentnum++;
102        }
103
104        getcurrentnum() {
105            return this.currentnum;
106        }
107
108        gettheme() {
109            return this.theme;
110        }
111        
112       
113    }
114
115
116
117
118    //実行部分―――――――――――――――――――――――――――
119
120    const all = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
121
122    new Game(all);
123
124       
125}
126

クラスで書くメリットが正直わかりません...なにか勘違いをしているのかもしれません。

以下html、cssです。

html
1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5    <meta charset="utf-8" />
6    <title>タッチゲーム</title>
7    <link rel="stylesheet" href="css/touchgame.css" >
8</head>
9<body>
10    <div id="container">
11        <ul id="board">
12        </ul>
13
14        <div id="btn">スタート</div>
15    </div>
16
17    <script src="js/touchgamejs.js"></script>
18</body>
19</html>

css
1body
2{
3    background:#ccc;
4    color:#fff;
5    font-family:'Courier New',sans-self;
6    font-size:16px;
7    font-weight:bold;
8}
9
10#container {
11    width: 650px;
12    margin: 16px auto;
13}
14
15@media screen and (max-width: 650px) {
16    #container {
17        width:320px;
18        margin:16px auto;
19    }
20}
21
22
23#board{
24    list-style:none;
25    margin:0 0 8px;
26    padding:10px;
27    background:#fff;
28    border-radius:4px;
29    display:flex;
30    flex-wrap:wrap;
31}
32
33
34
35#board li{
36    background:#00aaff;
37    width:200px;
38    height:60px;
39    margin:5px;
40    cursor:pointer;
41    border-radius:4px;
42    line-height:60px;
43    text-align:center;
44    box-shadow:0 4px 0 #0088cc;
45}
46
47@media screen and (max-width: 650px) {
48    #board li {
49        width: 90px;
50        height: 50px;
51        line-height:50px;
52    }
53}
54
55
56
57#board li.pressed{
58    background:#ccc;
59    box-shadow:none;
60    margin-top:9px;
61    margin-bottom:1px;
62
63}
64
65#btn{
66    cursor:pointer;
67    user-select:none;
68    background:#f44336;
69    padding:8px;
70    border-radius:4px;
71    text-align:center;
72    box-shadow:0 4px 0 #d1483e;
73}
74
75#btn:active{
76    margin-top:12px;
77    box-shadow:none;
78}

よろしくお願いいたします。

m.ts10806

2021/07/20 20:59

＞クラスで書くメリットが正直わかりませんこれだけを聞きたいのでしたらそのまま調べれば出てくるようにも思います（「オブジェクト指向」が出てくるはず）まずはそのあたり調べてみては。

Nanmotsu

2021/07/20 21:51

返信ありがとうございます。おそらく記法を知らないという部分が強いように思いました。勉強します。

yambejp

2021/07/21 01:49

Panel クラスが閉じてないのでは？最低限文法エラーをなくしてください

行動規範の内容に同意します

回答1件

ベストアンサー

①スタートを2回以上押す（Gameクラスのbtn.addEventListenerを実行する）と、Boardクラスで定義した「array」が空になる。

いいえ、1回目で空になっています。

spliceは破壊的なメソッドなので、array自身にある要素を操作します。要素を削除した場合、array自身にある要素がなくなります。
mapなどのように結果を新しい配列として返すようなメソッドとは異なりますので、混同されているのではないですか？

Array.prototype.splice() - JavaScript | MDN

__②Panelクラスで定義した「originalarray」が空になる。 __

①と同じ理由です。

js
1this.originarray = game.gettheme()

とあり、

js
1    gettheme() {
2      return this.theme;
3    }

とありますから、中身はgame.themeですので、つまりboard.arrayと同じものです。

解決方法ですが、想定されている動作がよくわからないので想像になりますが、let array = [...this.array]としてコピーを取るのがいいのかもしれません。

投稿2021/07/21 05:12

編集2021/07/21 05:17

Lhankor_Mhy

総合スコア36115

Nanmotsu

2021/07/21 09:53

spliceは破壊的なメソッドなのですね。そのあたりを勘違いしていました。 let array = [...this.array]とコピーを置くことで解決しました。ありがとうございました。

Lhankor_Mhy

2021/07/21 13:10

お役に立てたようで何よりです

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javascriptでのクラスの使い方。

関連した質問