はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(仕上げ)

JavaScriptへの最初のダイブ - ウェブ開発を学ぶ | MDN

正解のときとゲームオーバーの時の処理を仕上げます。setGameOver();の中身を書いていきます。

if (userGuess === randomNumber) {
lastResult.textContent = 'おめでとう! 正解です!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!ゲームオーバー!!!';
setGameOver();

コードです。

function setGameOver() {
 guessField.disabled = true;
 guessSubmit.disabled = true;
 resetButton = document.createElement('button');
 resetButton.textContent = '新しいゲームを始める';
 document.body.appendChild(resetButton);
 resetButton.addEventListener('click', resetGame);
}

まず、実行されると、入力欄に入力できないようになります。

guessField.disabled = true;
guessSubmit.disabled = true;

JSBinで試してみましょう。変数の取得、JavaScript、Outputを表示させて、それぞれ該当部分の高度を書きます。JavaScriptのコードは最初はコメントアウトしてみましょう。

右側のOutPutで入力欄、ボタンは自由に使えることを確認したら、コメントアウトを解除して有効にしてみると、表示が薄くなり、触っても反応しなくなります。

次のコードです。このコードを実行された場合は新しくボタンが表示されるようになります。

resetButton = document.createElement('button');
resetButton.textContent = '新しいゲームを始める';

やってみましょう！

変数とコードを書区ことでボタンができています。

リセットボタンとしては最後の命令

resetButton.addEventListener('click', resetGame);

これはボタンを押した時に関数"resetGame"を実行できるようにします。

それでは関数"resetGame"です。

function resetGame() {
 guessCount = 1;
 const resetParas = document.querySelectorAll('.resultParas p');
 for (let i = 0 ; i < resetParas.length ; i++) {
   resetParas[i].textContent = '';
 }
 resetButton.parentNode.removeChild(resetButton);
 guessField.disabled = false;
 guessSubmit.disabled = false;
 guessField.value = '';
 guessField.focus();
 lastResult.style.backgroundColor = 'white';
 randomNumber = Math.floor(Math.random() * 100) + 1;
}

これで最初の設定に戻します。

guessCount = 1;

まずカウントを戻します。そして、

const resetParas = document.querySelectorAll('.resultParas p');

では以下に表示していた値を取得しまし、変数に代入します。この時は配列になっています。

<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>

そして、forループでresetParas[i]一つずつ取り出し、

for (let i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}

値を""(空欄)にしていきます。

resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;

リセットボタンを"removeChild"で取り除きます。あと入力欄も入れられなくなり、ボタンも押せなくなります。

guessField.value = '';
guessField.focus()

guessField.value の値を空欄として、guessField.focus()入力欄にフォーカスします。

そして背景を'white';"白"にして再開します。

lastResult.style.backgroundColor = 'white';

これで、ゲームが終わってもリセットボタンを押すことで初期化して、次のゲームに移行ができるようになりました。