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

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

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

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

Q&A

解決済

1回答

866閲覧

もぐら叩きゲームでゲームストップ後にもクリックできてしまう

Overrun

総合スコア18

JavaScript

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

0グッド

0クリップ

投稿2021/11/18 01:22

JavaScriptでもぐら叩きゲームを作成しています。

画像表示やクリック挙動などは記述できたのですが、
フラグ管理がうまく行かずスタートボタン押した後だと
ゲームストップした後でも画像クリックができてしまいます。

ゲームストップした後にスタートボタンを押す前の挙動に戻したいですがどうすればよいでしょうか?

JavaScript

1const main = document.querySelector("main"); 2const startButton = document.createElement("button"); 3startButton.textContent = "スタート"; 4const mogurazone = document.querySelector(".mogurazone"); 5const stopButton = document.createElement("button"); 6const score = document.querySelector("#tensu_hyoji"); 7let point = 0; 8let goukei = 0; 9stopButton.classList.add("stop"); 10stopButton.textContent = "止める"; 11 12//乱数定義 13let ransu = 0; 14const ransuCount = 1000; 15 16let stopFlag = false; //ゲームを止めるフラグ 17let touchFlag = true; //クリックに関するフラグ 18 19main.append(startButton); 20main.appendChild(stopButton); 21stopButton.style.visibility = "hidden"; 22 23//画像データ 24const data = ["https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A", "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A"]; 25 26//画像タグ生成 27const createItem = (src) => { 28 const imageFile = document.createElement("img"); 29 imageFile.src = src; 30 imageFile.className = "image_file"; 31 return imageFile; 32}; 33 34//画像タグまとめてHTMLに記載 35const initToolList = (data) => { 36 const fragment = document.createDocumentFragment(); 37 data.map((src) => { 38 const itemDOM = createItem(src); 39 fragment.appendChild(itemDOM); 40 }); 41 mogurazone.appendChild(fragment); 42}; 43initToolList(data); 44 45//HTMLに記載された画像タグを配列化 46const mogura = [...mogurazone.children]; 47 48//スタートボタンの挙動 49startButton.addEventListener("click", () => { 50 stopFlag = false; 51 touchFlag = true; 52 point = 0; 53 score.innerHTML = point; 54 startGame(); 55 stopButton.style.visibility = "visible"; 56}); 57 58//ストップボタンの挙動 59stopButton.addEventListener("click", () => { 60 stopGame(); 61 stopButton.style.visibility = "hidden"; 62}); 63 64//ゲームスタート 65const startGame = () => { 66 if (stopFlag) { 67 touchFlag = false; 68 return false; 69 } else { 70 startButton.style.visibility = "hidden"; 71 for (let i = 0; i < mogura.length; i++) { 72 if (touchFlag === true) { 73 mogura[i].onclick = () => { 74 mogura[i].src = "https://placehold.jp/a644fc/ffffff/150x150.jpg?text=B"; 75 point += 1; 76 score.innerHTML = point; 77 setTimeout(modosu, 1000, i); 78 } 79 }; 80 setTimeout(hiddnImg, ransuNum(ransuCount), i); 81 } 82 setTimeout(stopGame, 5000); 83 } 84}; 85 86//ゲームを止める 87const stopGame = () => { 88 mogura.forEach((el) => (el.style.visibility = "visible")); 89 stopFlag = true; 90 touchFlag = false; 91 startButton.style.visibility = "visible"; 92 stopButton.style.visibility = "hidden"; 93}; 94 95//クリックした画像を元に戻す 96const modosu = (i) => { 97 mogura[i].src = "https://placehold.jp/3d4070/ffffff/150x150.jpg?text=A"; 98 //touchFlag = true; 99}; 100 101 102//乱数生成 103const ransuNum = (e) => { 104 ransu = Math.random() * 3 * e; 105 return ransu; 106} 107 108//モグラを表示させる 109const visible = (i) => { 110 if (stopFlag) { 111 return false; 112 } else { 113 modosu(i); 114 mogura[i].style.visibility = "visible"; 115 setTimeout(hiddnImg, ransuNum(ransuCount), i); 116 } 117}; 118 119//モグラを非表示にさせる 120const hiddnImg = (i) => { 121 if (stopFlag) { 122 return false; 123 } else { 124 mogura[i].style.visibility = "hidden"; 125 setTimeout(visible, ransuNum(ransuCount), i); 126 } 127};

HTML

1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 </head> 8 <body> 9 <main> 10 <h1 align="center">モグラたたき</h1> 11 <div class="mogurazone"></div> 12 <div align="center"><span id="tensu_hyoji">0</span>点</div> 13 <script type="module" src="/src/mogura.ts"></script> 14 </main> 15 </body> 16</html>

CSS

1main { 2 width: 480px; 3 margin: 0 auto; 4 padding: 30px 30px 50px; 5 box-shadow: 0 0 10px 0 lightgray; 6} 7.mogurazone { 8 display: flex; 9 flex-wrap: wrap; 10 justify-content: center; 11 width: 100%; 12} 13 .mogurazone img { 14 width: 130px; 15 padding: 10px; 16 cursor: pointer; 17 }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

mogura[i].onclick が動きっぱなしなのが問題な気がします。
その中で「stopFlag が真だったら何もしない」というコードを足すのはいかがでしょうか。

投稿2021/11/18 01:43

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Overrun

2021/11/18 01:57

ご回答ありがとうございます! 助言通りに記述したら思い通りに動きました。 一点質問良いでしょうか? mogura[i].onclickの前に if (touchFlag === true)で制御できていない理由って何かおわかりになりますか? お時間あればでよいのですが、ご回答いただけますと幸いです。
int32_t

2021/11/18 02:01

「if (touchFlag === true)」は、「onclick ハンドラを登録するかどうか」のチェックであって、登録後の動作には関係ありません。onlickハンドラは一度登録されたら登録が解除されるまで有効です。
Overrun

2021/11/18 02:06

なるほど!! ありがとうございます!助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問