技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

JavaScriptでじゃんけんゲームを作る2

[関数version]JavaScriptでじゃんけんゲームを作る2

lhiroki1205.hatenablog.com

こちらで作成したじゃんけんゲームをJavaScriptの関数を使ってリファクタリングしたいと思います。

関数にする箇所

(自分)じゃんけんの手を入力する -> getHumHand関数に変更

(CP)CPのじゃんけんの手を取得 -> getComHand関数に変更

(自分)どちらが勝ったかの判定 ->  getResult関数に変更

(CP)結果を表示 -> getResulrMsg関数

こんな感じで関数に変更していきましょう

(自分)じゃんけんの手を入力する -> getHumHand関数に変更

  // ジャンケンの手の番号を設定
  var GU    = 1;
  var CHOKI = 2;
  var PA    = 3;
  
  /* 関数定義 ************************/
  // 人間に手を入力してもらう機能
  function getHumHand() {
    var hum = prompt('半角数字で1~3の数字を入力してください。\n\n' + GU + ':グー\n' + CHOKI + ':チョキ\n' + PA + ':パー');
    hum = parseInt(hum, 10);
    if (hum !== GU && hum !== CHOKI && hum !== PA) {
      return undefined;
    } else {
      return hum;
    }
  }

(CP)CPのじゃんけんの手を取得 -> getComHand関数に変更

  // コンピュータの手を決める
  function getComHand() {
    return Math.floor(Math.random() * 3) + 1;
  }

(自分)どちらが勝ったかの判定 ->  getResult関数に変更

  // 結果の判定
  function getResult(com, hum) {
    if (hum === com) {
      return '結果はあいこでした。';
    } else if ((com === GU && hum === PA) || (com === CHOKI && hum === GU) || (com === PA && hum === CHOKI)) {
      return '勝ちました。';
    } else {
      return '負けました。';
    }
  }

(CP)結果を表示 -> getResulrMsg関数

  // 最終的な結果のメッセージ
  function getResultMsg(com, hum) {
    return getResult(com, hum) + 'コンピュータの出した手は「' + getHandName(com) + '」でした';
  }

まとめ

関数化することに成功しました。 関数化することの最大のメリットは複雑な手順をまとめることが出来ることです 例えばじゃんけんゲームを一つの関数「janken」にまとめると。janken()だけでじゃんけんゲームを呼び出すことができます。

BEFORE関数化

// ジャンケンの手の番号を設定
var GU    = 1;
var CHOKI = 2;
var PA    = 3;

// ジャンケンの入力ダイアログボックスを表示
var hum = prompt('半角数字で1~3の数字を入力してください。\n\n' + GU + ':グー\n' + CHOKI + ':チョキ\n' + PA + ':パー');
hum = parseInt(hum, 10);

// 入力値のチェック
if (hum !== GU && hum !== CHOKI && hum !== PA) {
  // 入力値が不適切な場合
  alert('入力値をうまく認識できませんでした。ブラウザを再読み込みすると、もう一度挑戦できます。');
} else {

  // コンピュータの手を決める
  var com = Math.floor(Math.random() * 3) + 1;

  // コンピュータの手の名前
  var comHandName = '';
  switch (com) {
    case GU:
      comHandName = 'グー';
      break;
    case CHOKI:
      comHandName = 'チョキ';
      break;
    case PA:
      comHandName = 'パー';
      break;
  }

  // 結果の判定
  var msgResult = '';
  if (hum === com) {
    msgResult = '結果はあいこでした。';
  } else if ((com === GU && hum === PA) || (com === CHOKI && hum === GU) || (com === PA && hum === CHOKI)) {
    msgResult = '勝ちました。';
  } else {
    msgResult = '負けました。';
  }

  // 最終的な結果の表示
  msgResult = msgResult + 'コンピュータの出した手は「' + comHandName + '」でした';
  alert(msgResult);
}

AFTER 関数化

function janken () {
  /* 変数定義 ************************/
  // ジャンケンの手の番号を設定
  var GU    = 1;
  var CHOKI = 2;
  var PA    = 3;
  
  /* 関数定義 ************************/
  // 人間に手を入力してもらう機能
  function getHumHand() {
    var hum = prompt('半角数字で1~3の数字を入力してください。\n\n' + GU + ':グー\n' + CHOKI + ':チョキ\n' + PA + ':パー');
    hum = parseInt(hum, 10);
    if (hum !== GU && hum !== CHOKI && hum !== PA) {
      return undefined;
    } else {
      return hum;
    }
  }
  
  // コンピュータの手を決める
  function getComHand() {
    return Math.floor(Math.random() * 3) + 1;
  }
  
  // コンピュータの手の名前を取得
  function getHandName(num) {
    switch (num) {
      case GU:
      return 'グー';
      case CHOKI:
      return 'チョキ';
      case PA:
      return 'パー';
    }
  }
  
  // 結果の判定
  function getResult(com, hum) {
    if (hum === com) {
      return '結果はあいこでした。';
    } else if ((com === GU && hum === PA) || (com === CHOKI && hum === GU) || (com === PA && hum === CHOKI)) {
      return '勝ちました。';
    } else {
      return '負けました。';
    }
  }
  
  // 最終的な結果のメッセージ
  function getResultMsg(com, hum) {
    return getResult(com, hum) + 'コンピュータの出した手は「' + getHandName(com) + '」でした';
  }
  
  /* 実行する処理 ************************/
  var hum = getHumHand();
  if (!hum) {
    alert('入力値をうまく認識できませんでした。ブラウザを再読み込みすると、もう一度挑戦できます。');
  } else {
    var com = getComHand();
    alert(getResultMsg(com, hum));
  }
}

janken();

参考書籍

Amazon CAPTCHA