前提
Html,Css JavaScriptで初級向け課題としてスロットマシンを作成し、応用パターンを作っているのですが息詰まっています。
スタート、3つの数字を表示するボックスとそれぞれの数字リールをストップさせるボタンがある簡易的なスロットは正常に動作しています。
ここから、最初に左でストップされた数字は配列から削除し、真ん中と右のリールからは消える**(=絶対に一致させない)スロット**を作ろうとしています。
実現したいこと
アドバイスが欲しいのは(2)のステップです
1) スタートボタンを押したときは配列numsにある[1,2,3,4,5,6,7,8]からMath.Randomでシャッフル表示
2) ストップを左から右に順番に押していくとき、左で表示された数字を配列numsから削除する
3) 3つの数字が一致しないスロットができる
発生している問題・エラーメッセージ
stop1を押してslot1(左のリール)からspliceで削除することはできても
stop2では真ん中から狙い通りにspliceで削除することができないことが50%頻度で発生しています。特に配列の1つ次の数字を消してしまうことが多いです。
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で削除しても、配列ズレが発生することがあります。1つ次の数字を消してしまうことが多いです。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/09/23 09:16