知ってた?ナルホド! BLOG

2019.07.01

FIZZBUZZ GAMEの作り方

WRITTEN BY

 | 

HIRAHARA NATSUMI

FIZZBUZZ GAMEの作り方

こんにちは!コーダーの平原です!
前回ご紹介した、FIZZBUZZ GAMEの作り方についてご説明したいと思います!
前回の記事はこちらです!

  1. ソースコード
  2. HTML要素の取得
  3. value値の取得と型の変換
  4. 答えとなる数値の代入
  5. FIZZ BUZZの判定結果を返す
  6. 選択した答えの判定
  7. まとめ

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を作成してみてください!

参考サイト :

PAGE TOP