[JavaScript]じゃんけんゲームを作る-カウンター編-

前回作成したじゃんけんゲームにカウンター（回数）処理を実装したいと思います。

カウンター処理を実装することで、各プレイヤーの得点や終了判定ができたりと一気にゲーム感が出てきます。
今回は各プレイヤーごとの勝ち点変数、勝敗結果をを格納する配列を作成し、
処理ごとに配列格納や加算等する処理を実装しました。

処理の流れ

ユーザーの選択値を取得する
NPC側の値をMath.random() 関数を利用し３未満を求める
※念の為にMath.floor() 関数を利用し小数点以下を切り捨てています。
互いの入力値をテキスト変換し出力
勝ち負け判定
【New】勝ったプレイヤーの変数を加算する
【New】各プレイヤーの勝敗配列に結果を格納する
【New】各プレイヤーの勝敗配列を出力する
【New】終了判定
結果出力

じゃんけんゲームのソースコード

<div class="container">
  <p id="title">じゃんけん...</p>
  <button class="btn" id="0" onclick="janken(0)">ぐー</button>
  <button class="btn" id="1" onclick="janken(1)">ちょき</button>
  <button class="btn" id="2" onclick="janken(2)">ぱー</button>
  <p id="result"></p>
  <p id="final_result"></p>
</div>

.container {
  padding: 30px;

  & .btn {
    display: inline-block;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
    transition: all 0.3s;
    margin: 0 auto;
    cursor: pointer;
    
    &:hover {
      background-color: black;
      color: white;
    }
  }
}

/**
 * 共通変数
 */
var counter = 0;
var user_result = [];
var user_wincount = 0;
var npc_result = [];
var npc_wincount = 0;

/**
 * じゃんけん処理
 * @param user_num: ボタン値
 * @return HTML
 */
function janken(user_num){

  // 乱数で今NPC側の値を取得
  var npc_num = Math.floor(Math.random() * 3);

  // 出力用
  var resultHTML = "";
  var final_resultHTML = "";

  resultHTML += "[あなた: " + changeText(user_num) + " ] VS [相手: " + changeText(npc_num) + " ]<br>";

  // 勝ち負け判定
  if(user_num == npc_num) {
    // 引き分け
    // 各配列に結果を格納
    user_result.push("-");
    npc_result.push("-");
  } else if((user_num == 0 && npc_num == 1)||(user_num == 1 && npc_num == 2)||(user_num == 2 && npc_num == 0)) {
    // 勝ち
    // プレイヤーのカウンター値を加算
    user_wincount++;
    // 各配列に結果を格納
    user_result.push("○");
    npc_result.push("×");
  } else {
    // 負け
    // NPCのカウンター値を加算
    npc_wincount++;
    // 各配列に結果を格納
    user_result.push("×");
    npc_result.push("○");
  }

  // 全体カウンター値を加算
  counter++;

  resultHTML += "成績（あなた）：" + user_result.toString() + "<br>";
  resultHTML += "成績（相手）：" + npc_result.toString();
  
  // 結果出力
  document.getElementById("result").innerHTML = resultHTML;

  // 終了判定
  if(user_wincount == 3 || npc_wincount == 3){
    if(user_wincount == 3){
      final_resultHTML += "あなたの勝ちです!!<br>"  
    } else if(npc_wincount == 3){
      final_resultHTML += "あなたの負けです...<br>"  
    }
    final_resultHTML += "処理回数：" + counter + "回<br>";
    // 処理結果出力
    document.getElementById("final_result").innerHTML = final_resultHTML;
    
    // 各ボタンを非活性化する
    document.getElementById("0").setAttribute("disabled", true);
    document.getElementById("1").setAttribute("disabled", true);
    document.getElementById("2").setAttribute("disabled", true);
  }

}


/**
 * 値を出力用テキストに変換する処理
 * @param num: 値(整数)
 * @return String
 */
function changeText(num){
  var item = "";
  switch (num){
    case 0: item = "ぐー"; break;
    case 1: item = "ちょき"; break;
    case 2: item = "ぱー"; break;
    default: item = "不正な値を検出";
  }
  return item;
}