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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

Q&A

解決済

1回答

748閲覧

counterが0になったそのタイミングで処理が実行されない原因を解決したい。

Yuki2

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2021/04/22 12:23

編集2021/04/22 12:26

数字が200以下でcounterが0の時にalert、赤画面を発火させたい。

ゲームオーバーの画面を実装するために行う。

counterが0になったその瞬間に処理が走らない。

ゲームをクリアできた時の処理は適切なタイミング(数字が200を超えたとき)に発動する。
ゲームに失敗したその瞬間に処理(アラートと赤画面)が走らない原因が不明。

js

1const massOne = Array.from(mass).map(a => { 2 a.addEventListener('click', function () { 3 if (a.textContent === '' && showNumber.textContent < 200) { 4 this.textContent = createNumber(); 5 this.style.backgroundColor = 'orange'; 6 calcNumber(); 7 lessCounter(); 8//consoleでcounterとshowNumberの内部が取得できていることを確認。// 9 console.log(counter); 10 console.log(showNumber.textContent); 11 } else { 12 alert('すでに選択されています。'); 13 } 14 }); 15 return a; 16}); 17 18function calcNumber() { 19 showNumber.textContent = randomNumber.reduce(function (a, b) { 20 return a + b; 21 }); 22 if (showNumber.textContent >= 200) { 23 bodyWrap.style.backgroundColor = 'green'; 24 title.textContent = 'Congratulations ????' 25 _fn(); 26//↓行いたい処理↓// 27 } else if (counter === 0 && showNumber.textContent < 200) { 28 alert('GAME OVER'); 29 bodyWrap.style.backgroundColor = 'red'; 30 } 31};

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>test</title> 9 <link rel="stylesheet" href="style.css"> 10</head> 11 12<body> 13 <h1 class="title" id="title">Get 200 or more score ????</h1> 14 <table> 15 <tr> 16 <td></td> 17 <td></td> 18 <td></td> 19 <td></td> 20 <td></td> 21 <td></td> 22 <td></td> 23 <td></td> 24 <td></td> 25 <td></td> 26 </tr> 27 <tr> 28 <td></td> 29 <td></td> 30 <td></td> 31 <td></td> 32 <td></td> 33 <td></td> 34 <td></td> 35 <td></td> 36 <td></td> 37 <td></td> 38 </tr> 39 <tr> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 <td></td> 48 <td></td> 49 <td></td> 50 </tr> 51 </table> 52 <div class="flex"> 53 <div class="text-box"> 54 <p class="text" id="show-number">0</p> 55 </div> 56 <div class="column"> 57 <p class="text">Counter: <span id="count-number">15</span></p> 58 <p class="text">HighScore: 0</p> 59 </div> 60 </div> 61 <script src="script.js"></script> 62</body> 63 64</html>

css

1* { 2 padding: 0; 3 margin: 0; 4} 5 6html { 7 font-size: 62.5%; 8} 9 10body { 11 font-family: "Gill Sans", sans-serif; 12 background-color: gray; 13} 14 15.title { 16 text-align: center; 17 margin-bottom: 3rem; 18 padding: 3rem; 19 font-size: 3.6rem; 20 font-weight: bold; 21 color: #efefef; 22} 23 24table { 25 display: flex; 26 justify-content: center; 27 margin-bottom: 5rem; 28} 29 30tbody { 31 padding: 2rem; 32 border-radius: 8px; 33 border: 5px solid #efefef; 34} 35 36td { 37 width: 60px; 38 height: 60px; 39 text-align: center; 40 font-size: 1.6rem; 41 font-weight: bold; 42 cursor: pointer; 43 color: #fff; 44 background-color: #fff; 45 transition: 0.3s; 46} 47 48td:hover { 49 background-color: #efefef; 50} 51 52.text-box { 53 width: 120px; 54 padding: 2rem; 55 border: 5px solid #faeded; 56 border-radius: 8px; 57} 58 59.text { 60 font-size: 1.8rem; 61 font-weight: bold; 62 text-align: center; 63 color: #efefef; 64} 65 66.flex { 67 display: flex; 68 justify-content: center; 69 align-items: center; 70 gap: 2rem; 71} 72 73.btn-wrapper { 74 text-align: center; 75 padding: 2rem; 76} 77 78.btn { 79 padding: 1rem; 80 border-radius: 8px; 81 font-size: 2rem; 82 font-weight: bold; 83 background-color: orange; 84 color: #efefef; 85 cursor: pointer; 86} 87 88.none { 89 display: none; 90}

js

1const bodyWrap = document.querySelector('body'); 2const title = document.querySelector('#title'); 3const mass = document.querySelectorAll('td'); 4const countNumber = document.querySelector('#count-number'); 5const max = 30, min = 1; 6 7const _fn = onceFun(); 8const randomNumber = []; 9const showNumber = document.querySelector('#show-number'); 10const div = document.createElement('div'); 11const button = document.createElement('button'); 12 13let counter = 2; 14 15const massOne = Array.from(mass).map(a => { 16 a.addEventListener('click', function () { 17 if (a.textContent === '' && showNumber.textContent < 200) { 18 this.textContent = createNumber(); 19 this.style.backgroundColor = 'orange'; 20 calcNumber(); 21 lessCounter(); 22 console.log(counter); 23 console.log(showNumber.textContent); 24 } else { 25 alert('すでに選択されています。'); 26 } 27 }); 28 return a; 29}); 30 31function createNumber() { 32 while (randomNumber.length < max) { 33 let r = Math.floor(Math.random() * max) + min; 34 if (randomNumber.indexOf(r) === -1) { 35 randomNumber.push(r); 36 return r; 37 } 38 } 39}; 40 41function calcNumber() { 42 showNumber.textContent = randomNumber.reduce(function (a, b) { 43 return a + b; 44 }); 45 if (showNumber.textContent >= 200) { 46 bodyWrap.style.backgroundColor = 'green'; 47 title.textContent = 'Congratulations ????' 48 _fn(); 49 } else if (counter === 0 && showNumber.textContent < 200) { 50 alert('GAME OVER'); 51 bodyWrap.style.backgroundColor = 'red'; 52 } 53}; 54 55function lessCounter() { 56 if (counter > 0) { 57 counter--; 58 countNumber.innerHTML = counter; 59 } else if (counter === 0) { 60 counter = 0; 61 } 62}; 63 64function onceFun() { 65 let executed = false; 66 return function () { 67 if (!executed) { 68 executed = true; 69 createButton(); 70 } 71 } 72}; 73 74function createButton() { 75 76 div.classList.add('btn-wrapper'); 77 button.classList.add('btn'); 78 button.innerHTML = 'Restart'; 79 document.body.appendChild(div); 80 div.appendChild(button); 81 82 button.onclick = function () { 83 initFn(); 84 } 85}; 86 87function initFn() { 88 counter = 15; 89 countNumber.innerHTML = counter; 90 91 bodyWrap.style.backgroundColor = 'gray'; 92 title.textContent = 'Get 200 or more score ????'; 93 showNumber.textContent = 0; 94 randomNumber.length = 0; 95 96 massOne.forEach(function (a) { 97 a.textContent = ''; 98 a.removeAttribute('style'); 99 }) 100}; 101 102// function gameOver() { 103// alert('GAME OVER'); 104// } 105 106 107 108 109if (showNumber.textContent < 200 && countNumber.textContent === 0) { 110 gameOver(); 111}; 112 113 114function gameOver() { 115 bodyWrap.style.backgroundColor = 'red'; 116};

試したこと

if文の条件式を左右交互に書いて優先順位の有無を確認した。
最下層に同様の条件式を書いて処理が的確に走るか試みた。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Javascript

1 function calcNumber() { 2 showNumber.textContent = randomNumber.reduce(function (a, b) { 3 return a + b; 4 }); 5 if (showNumber.textContent >= 200) { 6 bodyWrap.style.backgroundColor = 'green'; 7 title.textContent = 'Congratulations ????' 8 _fn(); 9 // counterは0ではなく1 10 } else if (counter === 1 && showNumber.textContent < 200) { 11 bodyWrap.style.backgroundColor = 'red'; 12 setTimeout(() => { 13 //アラートは優先されるので時差をつける 14 alert('GAME OVER'); 15 }, 1000); 16 } 17 };

投稿2021/04/22 19:13

Jon_do

総合スコア1373

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

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

Yuki2

2021/04/23 11:40

回答ありがとうございます。 setTimeOutを使って解決できるとは思っていませんでした。 そしてcounterを1にした理由、functionがクリックされた時に発火することを考えたらとても納得できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問