回答編集履歴

テキスト追加

2021/12/05 16:02

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -8,7 +8,7 @@
 3. ジェネレータを使う案
-　　　3.1 ジェネレータを使ったコード例 (???? [サンプル](https://codepen.io/kilesa/pen/OJxyrPv?editors=1010) )
+　　　3.1 ジェネレータを使ったコード例 (???? [サンプル](https://codepen.io/kilesa/pen/OJxyrPv/right/) )
@@ -436,7 +436,7 @@
-- **サンプル** ???? [tera: 372199 - A Game with generator function](https://codepen.io/kilesa/pen/OJxyrPv?editors=1010)
+- **サンプル** ???? [tera: 372199 - A Game with generator function](https://codepen.io/kilesa/pen/OJxyrPv/right/)

テキスト追加

2021/12/05 16:02

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,3 +1,21 @@
+以下の順に回答します。
+1. 配列のシャッフルにより、COMの出す数字の配列を作る案
+2. ご質問にあるコードと同様のものを実装してみる案
+3. ジェネレータを使う案
+　　　3.1 ジェネレータを使ったコード例 (???? [サンプル](https://codepen.io/kilesa/pen/OJxyrPv?editors=1010) )
+# 1. 配列のシャッフルでCOMの出す数字の配列を作る案
 COMが1回目から13回目までの各セットに選択する数字の配列を、対戦開始時にあらかじめ作っておく、という方法が考えられます。この配列は1から13までの整数を1個ずつ含み、かつ並び順をランダムにしたもので、たとえば以下のようなものです。
@@ -98,9 +116,7 @@
-### 追記
+# 2. ご質問にあるコードと同様のものを実装してみる案
@@ -199,3 +215,247 @@
 selected_com_numの取り得る値の場合の数が高々13だから
 というやや曖昧というかざっくりな理由によるものなので、私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。
+# 3. ジェネレータを使う案
+最後に、ジェネレータを使うコードを紹介します。
+ユーザーの対戦相手であるCOM が備えるべき仕組みとして、以下のようなものを考えます。対戦の開始時点で、COM は以下のような配列を内部に持っています。
+- COM の内部にある配列の初期状態：
+```
+[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
+```
+第1セットに臨むにあたって、COMは上記の配列からランダムにひとつを選びます。例えば、6 が選ばれたとしましょう。これは、COMが内部にもつ配列から 6 が取り出されたことを意味します。
+- 第1セットで選ばれた数： 6
+このとき、COMの内部にある配列から、選ばれた6が削除されるような仕組みをCOMは持っているとします。そうすると、第1セット終了後のCOMの内部にある配列は以下になります。
+- 第1セット終了後のCOM内部の配列：
+```
+[1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13]
+```
+第2セットでCOMは上記の第1セット終了時の配列からランダムにひとつを選びます。例えば、11 が選ばれたとしましょう。以下のようになります。
+- 第2セットで選ばれた数： 11
+- 第2セット終了後のCOM内部の配列：
+```
+[1, 2, 3, 4, 5, 7, 8, 9, 10, 12, 13]
+```
+以降のセットも、COMは内部に持っている配列からひとつの要素をランダムに取り出して、それをユーザーとの対戦に使用します。取り出された要素は配列から削除されるようにすれば、13セット目の終了時には、以下のように空の配列になるはずです。
+- 第13セット終了後のCOM内部の配列：
+```
+[]
+```
+このような仕組みを持つCOMが実装されたオブジェクトが、`com` という変数に入るとしましょう。`com `が備えるべき要件は以下です。
+- `com` は初期状態で、`[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]`という配列を内部に持っている。
+- `com` には、次のセットで出す数字（またはその数字を持つオブジェクト）を得るためのメソッドがある。このメソッド名を仮に `com.next()` とする。
+- `com.next()` が返す数（あるいは、返すオブジェクトがあるプロパティとして持つ数）はCOMが次に出す数とする。これはそれまでに出した数のどれとも重複してはならない。
+- 上記の重複排除を実現するために `com.next()` するたびに内部の配列から、次に出す数に選ばれたものを削除する。
+- 初期状態では`com`は1から13までの13個の数を持っているので、`com.next()` で、COMの出す数として有効な数値が返されるのは13回目までで、14回目以降は（対戦に使える有効な）数を返さないように構成されている必要がある。
+このような`next`メソッドを持つ`com` を実装する方法として、何らかのクラスを自作してそれのインスタンスとして`com` を得ることもできるでしょう。けれども、もっと簡単な方法があります。それは[ジェネレータ関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators)を使って、これの返す値として`com`を得ることです。
+`com` を得るためのジェネレータ関数は以下のようなものになります。
+```javascript
+// 1以上n以下の整数をランダムな順序で各1回ずつ生成するジェネレータを返す。
+function* randomSequenceFromOneTo(n) {
+    const numbers = [...Array(n)].map((_, i) => i+1);
+    while (numbers.length > 0) {
+      const index = Math.floor(Math.random() * numbers.length);
+      const value = numbers[index];
+      numbers.splice(index, 1);
+      yield value;
+    }
+}
+```
+上記のジェネレータ関数`randomSequenceFromOneTo(n)`を使って、一対戦が13セットマッチに対応する`com`を得るには以下のようにします。
+```javascript
+const com = randomSequenceFromOneTo(13);
+```
+こうして得られた `com` を使って、COMが次に出す数を得るには以下のようにします。
+```javascript
+const { value, done } = com.next();
+```
+こうすると、変数`value` には次にCOMが出す数が、変数`done`にはtrueかfalseのブール値が入ってきます。`done` が true になっているときは、すでに`com`が内部にもつ配列`numbers`が空になっており、次に出せる数が無いことを意味しています。そのときの`value` はundefined になります。
+`randomSequenceFromOneTo(13)`で作った `com` が内部に持つ数字の配列は、初期状態で長さ13ですが、それが `com.next()`が呼ばれるたびに1ずつ減っていき、第13セットが終わったときには配列は空になります。その後にさらに`com.next()`を呼んでも、返されるオブジェクトとしては`done`がtrueで、`value`の無いものが返ってきます。
+### 3.1 ジェネレータを使ったコード例
+以下のリンク先は、先のジェネレータ関数`randomSequenceFromOneTo(n)` を使ってゲームを実装してみた例です。
+- **サンプル** ???? [tera: 372199 - A Game with generator function](https://codepen.io/kilesa/pen/OJxyrPv?editors=1010)
+このサンプルでは、
+- 初期表示では、全5セット対戦の第1セットを開始するところから始まります。
+- 5セット対戦なので、ユーザーもCOMも出せる数は1以上5以下の整数です。
+- 5セット目が終わると、ボタンが「総合成績を表示」になります。これをクリックすると全5セットの戦績が表示されます。
+- 総合成績が表示されると、画面最上部は再度の対戦を受けつける状態になります。
+- 再度の対戦では、対戦セット数を 5, 8, 13 の三通りから選べます。
+このサンプルの主目的はジェネレータ関数の使用例を示すことですので、ゲームを構成するデータ構造だったりロジックだったりは、リファクタリングの余地が多々あると思われます。そのような観点で参考にしていただければと思います。

テキスト追加

2021/12/05 10:56

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -186,7 +186,7 @@
-ですが、これはあまりいいやり方ではありません。たとえば、history_com_numが`[2, 8, 4]`だったとして、万が一、 `selected_com_num` が 2 か 8 か 4 のどれかであり続けると、while からbreakしません。それでも実用上は問題ないのは、
+ですが、これはあまりいいやり方ではありません。たとえば、history_com_numが`[2, 8, 4]`だったとして、万が一、 `selected_com_num` が 2 か 8 か 4 のどれかであり続けると、while からbreakしません。それでも実用上問題ないのは、
@@ -194,4 +194,8 @@
+という楽観的な見通しがほぼ間違いなく成り立つからです。しかし、実用上問題ないと言える根拠としては
+selected_com_numの取り得る値の場合の数が高々13だから
-という楽観的な見通しがほぼ間違いなく成り立つからです。しかしそれはselected_com_numの取り得る値の場合の数が高々13だから言える話でありますから、私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。
+というやや曖昧というかざっくりな理由によるものなので、私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。

テキスト追加

2021/12/04 12:05

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -116,7 +116,7 @@
-と同じ趣旨のコード例を挙げると以下です。
+と同じ趣旨のコード例を挙げると以下です。（`selected_com_num` が `history_com_num`に含まれていない値になるまで、`selected_com_num = getRandomNum(13) + 1` を繰り返す部分のみです。`history_com_num`にpushで追加する部分は割愛しています。）

テキスト追加

2021/12/04 11:49

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -194,4 +194,4 @@
-という楽観的な見通しがほぼ間違いなく成り立つからです。しかしそれはselected_com_numの取り得る値の場合の数が高々13だから言える話でありますから、度私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。
+という楽観的な見通しがほぼ間違いなく成り立つからです。しかしそれはselected_com_numの取り得る値の場合の数が高々13だから言える話でありますから、私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。

テキスト追加

2021/12/04 05:48

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -93,3 +93,105 @@
 console.log(comNumbers);  // => .e.g. [6,13,10,2,4,11,7,8,3,9,12,5,1]
 ```
+### 追記
+質問にある、
+> history_com_numの配列に選択したカードをpushで入れていき、
+for文で回してrandom関数で選択した数字と配列内の値が一致しない
+場合は抜ける、同じ場合は再取得というコード
+と同じ趣旨のコード例を挙げると以下です。
+```javascript
+let selected_com_num = getRandomNum(13) + 1;
+while (true) {
+  let index = -1;
+  for (let i=0; i < history_com_num.length; i ++) {
+    if (history_com_num[i] === selected_com_num) {
+      index = i;
+      break;
+    }
+  }
+  if (index === -1) {
+    break;
+  }
+  selected_com_num = getRandomNum(13) + 1;
+}
+console.log(selected_com_num);
+```
+全体の構造は、`while(true)` という無限ループです。ここから抜けるのは
+```javascript
+  if (index === -1) {
+    break;
+  }
+```
+という `break`です。ここで`break`されるのは、`index`が-1のときですが、`index`が-1のときというのは、selected_com_num が、配列history_com_numに含まれていないときです。含まれているときは、forループによって、一致したhistory_com_numの要素のインデクス`i`が `index` に代入されますが、それは0以上の整数です。
+index が 0以上だった場合は、whileループ本体の最後で、再び
+```javascript
+selected_com_num = getRandomNum(13) + 1;
+```
+を実行して、selected_com_num を取り直します。
+ですが、これはあまりいいやり方ではありません。たとえば、history_com_numが`[2, 8, 4]`だったとして、万が一、 `selected_com_num` が 2 か 8 か 4 のどれかであり続けると、while からbreakしません。それでも実用上は問題ないのは、
+そう多くない試行回数で、selected_com_num は、history_com_num に含まれない数になるはず
+という楽観的な見通しがほぼ間違いなく成り立つからです。しかしそれはselected_com_numの取り得る値の場合の数が高々13だから言える話でありますから、度私見としては正直あまりスッキリしないモヤモヤが残るコードという感じがします。