はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(実行する関数)

実際に実行させる心臓部、関数です。

JavaScript の最初の一歩 - ウェブ開発を学ぶ | MDN

例えばということで以下が例示されています。実行すると、ブラウザからアラートが表示されます。

function checkGuess() {
 alert('ここに好きな文字を入れてください');
}

今回実行する関数としては以下となります。

それぞれ、HTMLは

 document.querySelector()

で取得しています。

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

他、ランダムの数字を得る変数などを定義しています。

let randomNumber = Math.floor(Math.random() * 100) + 1;

そして初回の予想かどうかの判定。

let guessCount = 1;

ゲームが終わったときにリセットして新しくゲームができるようにするボタンを作ります。

let resetButton;

変数全部です。

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

いよいよ関数ですが、JavaScriptでは関数は

function(){}

で定義します。checkGuess()関数を作ります。

"function checkGuess() {}"です。

function checkGuess() {
 let userGuess = Number(guessField.value);
 if (guessCount === 1) {
   guesses.textContent = '前回の予想: ';
 }
 guesses.textContent += userGuess + ' ';
 }

checkGuess()が実行された時には、まず、

let userGuess = Number(guessField.value);

で入力した文字が数字に変換されて、

guessCount === 1

の場合(初回入力の場合)は

guesses.textContent = '前回の予想: ';

guesses.textContent には'前回の予想: 'と文字が代入されて、ついで以下の命令で

guesses.textContent += userGuess + ' ';

"userGuess"(入力値)を先ほどの"guesses.textContent "に追記します。文字としては

前回の予想:　入力値

という感じになします。

次からの命令は"if"により条件で処理を選択します。

if (userGuess === randomNumber) {
   lastResult.textContent = 'おめでとう! 正解です!';
   lastResult.style.backgroundColor = 'green';
   lowOrHi.textContent = '';
   setGameOver();
 } else if (guessCount === 10) {
   lastResult.textContent = '!!!ゲームオーバー!!!';
   setGameOver();
 } else {
   lastResult.textContent = '間違いです!';
   lastResult.style.backgroundColor = 'red';
   if(userGuess < randomNumber) {
     lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ;
   } else if(userGuess > randomNumber) {
     lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。';
   }
 }

userGuess === randomNumber

正解の数字 randomNumberと入力の数字userGuessを比較していきます。

userGuess === randomNumber

同じ時は正解！です。

不正解な場合は'間違いです!'ということで、

lastResult.textContent = '間違いです!';

背景を赤くして、

lastResult.style.backgroundColor = 'red';

正解の値が大きいか小さいかを指摘します。

if(userGuess < randomNumber) {
lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ;
} else if(userGuess > randomNumber) {
lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。';
}

間違いの時の全文です。

else {
lastResult.textContent = '間違いです!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ;
} else if(userGuess > randomNumber) {
lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。';
}
}

if文が終わった時点で以下に進みます。

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

guessCount++;

guessCountを"1"増やします。

guessField.value = '　';

そしてguessField.valueを空欄にします。

guessField.focus();

入力欄にカーソルを移動します。

関数全文です。

function checkGuess() {
 let userGuess = Number(guessField.value);
 if (guessCount === 1) {
   guesses.textContent = '前回の予想: ';
 }
 guesses.textContent += userGuess + ' ';
 
 if (userGuess === randomNumber) {
   lastResult.textContent = 'おめでとう! 正解です!';
   lastResult.style.backgroundColor = 'green';
   lowOrHi.textContent = '';
   setGameOver();
 } else if (guessCount === 10) {
   lastResult.textContent = '!!!ゲームオーバー!!!';
   setGameOver();
 } else {
   lastResult.textContent = '間違いです!';
   lastResult.style.backgroundColor = 'red';
   if(userGuess < randomNumber) {
     lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ;
   } else if(userGuess > randomNumber) {
     lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。';
   }
 }
 guessCount++;
 guessField.value = '';
 guessField.focus();
}

そして最後にこの関数が実行される処理を変数guessSubmitに紐ずけます。

guessSubmit.addEventListener('click', checkGuess); 

これでゲームが成立します。がもう少し手を加えた方がゲームらしくなりますので、次回に続けます。