JavaScriptを使ってHit＆Blow（ヒットアンドブロー）を作ってみる。

bubudoufu

3年前

このページではソースコードの一部分を簡単な解説をしています。

※以下からのコードは直接的に関係ない属性・クラス名は省略しています。コード全体はgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

概要
コンピュータが選んだ数字を作成する
HitとBlowの判定
入力された数字のバリデーション

概要

コンピュータが選んだ数字を当てるゲームです。

コンピュータが選んだ数字を作成する

makeNumber関数はランダムな数字を作成して必要な桁数だけ返す関数です。

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let level;
// 問題作成
function makeNumber(array) {
  // Fisher–Yates shuffleアルゴリズムでシャッフル
  let a = array.length;
  while (a) {
    let j = Math.floor(Math.random() * a);
    let t = array[--a];
    array[a] = array[j];
    array[j] = t;
  }
  return array.slice(0, level);
}

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

let level;

// 問題作成

function makeNumber(array) {

// Fisher–Yates shuffleアルゴリズムでシャッフル

let a = array.length;

while (a) {

let j = Math.floor(Math.random() * a);

let t = array[--a];

array[a] = array[j];

array[j] = t;

}

return array.slice(0, level);

}

Fisher–Yates shuffleアルゴリズムを使用して、０～９の数値が入ったarray配列をシャッフルしslice()メソッドで必要な桁数分切り出し、正解の数字を作成しています。変数levelにはゲームのスタート画面で選択された数字が入っています。

HitとBlowの判定

is_same関数は桁と数字が同じ時にはHit、桁の位置は違うが数字が同じ時はBlowの数を返す関数です。

// 答え合わせ
function is_same(answer, secretNum) {
  let hitBlow = {
    hit: 0,
    blow: 0,
  };
  secretNum.forEach((value, index) => {
    if (secretNum.indexOf(answer[index]) !== -1) {
      if (answer[index] === value) {
        hitBlow.hit++;
      } else {
        hitBlow.blow++;
      }
    }
  });
  return hitBlow;
}

// 答え合わせ

function is_same(answer, secretNum) {

let hitBlow = {

blow: 0,

};

secretNum.forEach((value, index) => {

if (secretNum.indexOf(answer[index]) !== -1) {

if (answer[index] === value) {

hitBlow.hit++;

} else {

hitBlow.blow++;

}

});

return hitBlow;

}

第一引数にはユーザーが予想した数字、第二引数にはコンピュータが選んだ数字が入っています。indexOf()メソッドでユーザーが予想した数字を一つずつコンピュータが選んだ数字の中にあるか比較し、あった場合はindexの位置を比較して同じ場合はHit違う場合はBlowとしています。

入力された数字のバリデーション

selectNumber関数はユーザーから数値が入力された時の処理をしています。

// 数字が押された時の処理
function selectNumber(e) {
  if (numDisplay.textContent.length === level - 1) {
    choiceNum.forEach((value) => {
      value.classList.add("disable");
      btn.style.pointerEvents = "auto";
      return;
    });
  }
  if (numDisplay.textContent.length < level) {
    numDisplay.textContent = numDisplay.textContent.concat(
      e.target.textContent
    );
    e.target.classList.add("disable");
  }
}

// 数字が押された時の処理

function selectNumber(e) {

if (numDisplay.textContent.length === level - 1) {

choiceNum.forEach((value) => {

value.classList.add("disable");

btn.style.pointerEvents = "auto";

return;

});

}

if (numDisplay.textContent.length < level) {

numDisplay.textContent = numDisplay.textContent.concat(

e.target.textContent

);

e.target.classList.add("disable");

}

数字以外が入力されないように数字の入力はクリックされた要素のtextContentプロパティを利用しています。数字の重複入力を防ぐためにクリックされた要素はcssのpointer-eventsプロパティをnoneにしてクリックできないようにしています。必要な桁数が入力されたら送信ボタンを押せるようにして、桁数が足りないのを防いでいます。

最後までお読みいただきありがとうございました。
コード全体はgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。