技術ブログ

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

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

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

JavaScriptの条件分岐を活用してじゃんけんゲームを作成

 

じゃんけんゲームの仕組み

(自分)じゃんけんの手を入力する

 

(CP)CPのじゃんけんの手を取得

 

(自分)どちらが勝ったかの判定

 

(CP)結果を表示

 

めちゃシンプルです! これを一つづつ実装していきます。

 

 (自分)じゃんけんの手を入力する

まずは自分のじゃんけんをpromptで入力します。

//じゃんけんの手の番号を設定
var GU = 1;
var CHOKI = 2;
var PA = 3;

//じゃいけんの入力ダイアログボックスを表示
var hum = prompt('半角英数字で1~3の数字を入力してくださいねー。\n\n' + GU + ':グー\n' + CHOKI + ':チョキ\n' + PA + ':パー');
//parseIntで整数に変換10進法の数値に変換
hum = parseInt(hum, 10);

 (CP)CPのじゃんけんの手を取得

次にCPのじゃんけんの手を取得します。 ここでのキーポイントはCPのじゃんけんの手をランダムに決める実装方法です。

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

    var comHandName = '';
    switch (com) {
      case GU:
        comHandName = 'グー'
        break;
      case CHOKI:
        comHandName = 'チョキ'
        break;
      case PA:
        comHandName = 'パー'
        break;
    }

2行目のMath.random()は0以上1未満の数値をランダムで作るメソッドです。その値に3をかけることで0以上3未満の数字にすることができます。 Math.floor()は小数点以下を切り捨てます。

 どちらが勝ったかの判定

じゃんけんの結果は全部で9通り

① if hum == comのアイコのパターンは
(自分)グー(CP)グー
(自分)チョキ(CP)チョキ
(自分)パー(CP)パー

② 人間が勝ちのパターンは3通り
(自分)グー(CP)チョキ
(自分)チョキ(CP)パー
(自分)パー(CP)グー

③ PCが勝ちのパターンは3通り
(自分)チョキ(CP)グー
(自分)パー(CP)チョキ
(自分)グー(CP)パー

まーこんな感じです。
これをif文を活用してコードにします。

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

(CP)結果を表示

  msgResult = msgResult + 'コンピュータの出した手は「' + comHandName + '」でした';
  alert(msgResult);

まとめ

簡単な文法のみで作成できますが。条件分岐やswitchなどの勉強になりました。

コード全文

// ジャンケンの手の番号を設定
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);
}

追記

関数化する場合はこちら

lhiroki1205.hatenablog.com