ルーレットで既出の数字を配列から削除する方法(初心者向けスロット課題)

Question

前提

Html,Css JavaScriptで初級向け課題としてスロットマシンを作成し、応用パターンを作っているのですが息詰まっています。

スタート、３つの数字を表示するボックスとそれぞれの数字リールをストップさせるボタンがある簡易的なスロットは正常に動作しています。

ここから、最初に左でストップされた数字は配列から削除し、真ん中と右のリールからは消える**(=絶対に一致させない)スロット**を作ろうとしています。

実現したいこと

アドバイスが欲しいのは(2)のステップです

1)　スタートボタンを押したときは配列numsにある[1,2,3,4,5,6,7,8]からMath.Randomでシャッフル表示
2) ストップを左から右に順番に押していくとき、左で表示された数字を配列numsから削除する
3) ３つの数字が一致しないスロットができる

発生している問題・エラーメッセージ

stop1を押してslot1(左のリール)からspliceで削除することはできても
stop2では真ん中から狙い通りにspliceで削除することができないことが50%頻度で発生しています。特に配列の１つ次の数字を消してしまうことが多いです。

 stop1.addEventListener("click", () => {
        var slot1 = document.getElementById("slot1").innerHTML;
        var slot1num = Number(slot1);
        nums.splice(slot1num - 1, 1);
        stop1.disabled = true;
        clearTimeout(setTimeoutId1);
        statusCheck();
      });

      stop2.addEventListener("click", () => {
        var slot2 = document.getElementById("slot2").innerHTML;
        var slot2num = Number(slot2);
        nums.splice(slot2num - 2, 1);
        stop2.disabled = true;
        clearTimeout(setTimeoutId2);
        statusCheck();
      });

数字配列の中のどの数字が削除対象か、直前までのslot1の値に左右されているのでslot2から具体的にspliceで指示することもできず、他に良い配列から順番を指定し削除する方法を知りたいです。

 stop1.addEventListener("click", () => {
        var slot1 = document.getElementById("slot1").innerHTML;
        var slot1num = Number(slot1);
        nums.splice(slot1num - 1, 1);

slot1のリールはこの3行でで適切に配列から出た値を削除できています。

該当以外のScriptコード

配列、スタートボタンは以下のように書いています。

   const nums = [1, 2, 3, 4, 5, 6,7,8];

     slot1.textContent = nums[Math.floor(Math.random() * nums.length)];
      slot2.textContent = nums[Math.floor(Math.random() * nums.length)];
      slot3.textContent = nums[Math.floor(Math.random() * nums.length)];

  function setNum1() {
        slot1.textContent = nums[Math.floor(Math.random() * nums.length)];
        setTimeoutId1 = setTimeout(() => {
          setNum1();
        }, 100);
      }

      function setNum2() {
        slot2.textContent = nums[Math.floor(Math.random() * nums.length)];
        setTimeoutId2 = setTimeout(() => {
          setNum2();
        }, 100);
      }

      function setNum3() {
        slot3.textContent = nums[Math.floor(Math.random() * nums.length)];
        setTimeoutId3 = setTimeout(() => {
          setNum3();
        }, 100);
      }

試したこと

If,else文を使い、細かくslot2の数字をpopやshiftで削除しても、配列ズレが発生することがあります。１つ次の数字を消してしまうことが多いです。

Answer 1

spliceを使うのであれば、splice の第1引数に渡す削除対象のインデクスとしては、配列 nums における slot2num と等しい要素のインデクスを与えればよいので、

var slot2num = Number(slot2);
- nums.splice(slot2num - 2, 1);
+ nums.splice(nums.indexOf(slot2num), 1);

とするとよいのではと思います。

ちなみにslot2numが nums の中にない値のときはnums.indexOf(slot2num) は -1 を返します。この場合、nums.splice(-1, 1) が実行されることになり、このときは（何も削られないのではなく）numsの末尾の要素が削られます。

補足

本題とは関係ありませんが以下の2行

var slot2 = document.getElementById("slot2").innerHTML;
var slot2num = Number(slot2);

で 数字の文字列を slot2 に取ってきてそれを数値にしているのだと思いますが、そうだとすると、slot2 にいったん文字列で受けることなく、以下の1行で済みます。(documentの前に +を追加します。)

var slot2num = +document.getElementById("slot2").innerHTML;

Comments

[DondokoPanda]

補足とのところ、推測の通り数値にするためにしていましたが、+追加でできるのは知りませんでした。ありがとうございます！！

Answer 2

nums.splice(slot1num - 1, 1)

spliceを使わずにfilterを使うといいですよ。

nums = nums.filter(num => num != slot1num);

slot2でも同様に。

Comments

[DondokoPanda]

spliceで一つの配列から削除し続けるのではなく、一つの配列にフィルターを通して使い回すということですね。
それだと３つ目のリールではslot1かslot2のフィルター配列になると思って使用していませんでした。今試してみます！ありがとうございます。

[shiracamus]

spliceで削除する場合、slot1numを削除したあと数字の位置がずれるので、slot2numがどの位置にあるのか探さないといけませんよ。
filterなら位置がどこか気にしなくて済みます。

[DondokoPanda]

おっしゃる通り、数字がずれたのでslot2から苦戦していました。filterで通すとうまくslot3までマッチしないものが作れました。
ありがとうございました！