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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

DondokoPanda
DondokoPanda

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

126閲覧

投稿2022/09/22 12:05

編集2022/09/23 09:22

前提

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つ次の数字を消してしまうことが多いです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。