知ってた？ナルホド！
こんにちは！コーダーの平原です！
前回ご紹介した、FIZZBUZZ GAMEの作り方についてご説明したいと思います！
前回の記事はこちらです！
1. ソースコード
今回ご紹介した、FIZZBUZZ GAMEのプログラムの全体は以下の通りです。
const $btn = document.querySelectorAll('.button');
const $btn1 = document.querySelector('#button1');
const $now = document.querySelector('#now');
const $inner = document.querySelector('#inner');
const $retry_button = document.querySelector('#retry_button');
$retry_button.addEventListener('click', function () {
location.href = '';
});
for (let i in $btn) {
const $current_btn = $btn[i];
$current_btn.onclick = function (params) {
const $self = this;
let self_value = $self.value;
let now_value = parseInt($now.textContent) + 1;
if (!isNaN(self_value)) {
self_value = parseInt(self_value);
}
answer(self_value, now_value);
};
}
function answer(self_val, ans_val) {
let answer = fizz_buzz(ans_val);
if (self_val === answer) {
$now.textContent = ans_val;
ans_val++;
$btn1.value = ans_val;
}
else {
$inner.classList.add('gameover');
$retry_button.classList.add('isShow');
}
}
function fizz_buzz(num) {
if ((num % 3) === 0 && (num % 5) === 0) {
return 'FIZZBUZZ';
}
else if ((num % 3) === 0) {
return 'FIZZ';
}
else if ((num % 5) === 0) {
return 'BUZZ';
}
else {
return num;
}
}2. HTML要素の取得
まずはじめに、ボタンや黄色いリボンに表示されている数字などのHTML要素を、querySelectorメソッドと、querySelectorAllメソッドを使って取得します。
querySelectorは、指定されたCSSセレクタに該当する最初の要素を、HTML文書の中から取得するメソッドです。
querySelectorAllは、指定されたCSSセレクタに該当する全ての要素を、HTML文書の中から取得しNodeListで返すメソッドです。
指定方法は以下のようになります。
const $btn = document.querySelectorAll('.button');
const $btn1 = document.querySelector('#button1');3. value値の取得と整数化
次にクリックしたボタンの値を取得したいと思います。
まずquerySelectorAllメソッドで取得した、NodeListの要素をひとつずつ取り出します。
for (let i in $btn) {
const $current_btn = $btn[i];
}そしてボタンをクリックした際に、そのボタンのvalue値を取得し、その値が数値だった場合に、parseIntで値を整数化します。
if (!isNaN(self_value)) {
self_value = parseInt(self_value);
}4. 答えとなる数値の代入
このクリックイベントで、現在の数値(黄色いリボンの数字)の値も整数化し、答えとなる次の数値を変数に代入しておきます。
let now_value = parseInt($now.textContent) + 1;5. FIZZBUZZの判定結果を返す
FIZZ BUZZの判定結果を返す式は以下の通りです。
numが3と5で割り切れなかった場合は「FIZZBUZZ」、3で割り切れなかった場合は「FIZZ」、5で割り切れなかった場合は「BUZZ」、それ以外の場合はnumを返します。
function fizz_buzz(num) {
if ((num % 3) === 0 && (num % 5) === 0) {
return 'FIZZBUZZ';
}
else if ((num % 3) === 0) {
return 'FIZZ';
}
else if ((num % 5) === 0) {
return 'BUZZ';
}
else {
return num;
}
}6. 選択した答えの判定
選択した答えを受け取って判定する為の式を作成します。
まずは、FIZZBUZZの判定結果を返す為の関数に引数を指定し、変数に代入します。
let answer = fizz_buzz(ans_val);次にクリックしたボタンの値と、5で作成したFIZZ BUZZの判定結果が等しいかどうかを比較し、等しい場合の処理と、等しくない場合の処理に条件分岐します。
if (self_val === answer) {
$now.textContent = ans_val;
ans_val++;
$btn1.value = ans_val;
}
else {
$inner.classList.add('gameover');
$retry_button.classList.add('isShow');
}この判定式の関数の引数に、クリックしたボタンの値が代入された変数名と、現在の数値の次の数値が代入された変数名を指定し、実行します。
answer(self_value, now_value);最後にRetryボタンをクリックした時に、最初の状態に戻す為の処理を、イベントリスナーに登録します。
$retry_button.addEventListener('click', function () {
location.href = '';
});これでFIZZBUZZ GAMEの完成です！
完成したFIZZBUZZ GAMEはこちらの記事にてご紹介しております！
7. まとめ
今回ご説明したFIZZBUZZ GAMEでは、クリックしたボタンの値を取得し、その値とFIZZBUZZの判定結果を比較して条件分岐をし、処理を分けるということをしました。数値はparseIntで整数化することで、正常にFIZZBUZZの判定をすることができる為、このゲームを作成する上でのポイントとなっていると思います。
皆さんも是非色々なFIZZBUZZ GAMEを作成してみてください！
参考サイト :
