[JavaScript]じゃんけんゲームを作る-基礎編-

JavaScriptにてじゃんけんゲームを作成したいと思います。

構造はシンプルでHTML, CSS, JavaScriptのみで動作します。
実装処理もプレイヤー情報の取得や乱数取得、値の判定などを利用しており、
プログラム実装の題材としてはかなり優秀かと思います。

各処理内容については、ソース内にコメントを追記しております。

処理の流れ

ユーザーの選択値を取得する
NPC側の値をMath.random() 関数を利用し３未満を求める
※念の為にMath.floor() 関数を利用し小数点以下を切り捨てています。
互いの入力値をテキスト変換し出力
勝ち負け判定
結果出力

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

<div class="container">
  <p>じゃんけん...</p>
  <button class="btn" onclick="janken(0)">ぐー</button>
  <button class="btn" onclick="janken(1)">ちょき</button>
  <button class="btn" onclick="janken(2)">ぱー</button>
  <p id="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;
    }
  }
}

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

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

  // 出力用
  var resultHTML = "";

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

  // 勝ち負け判定
  if(user_num == npc_num) {
    // 引き分け
    resultHTML += "<br>引き分け";
  } else if((user_num == 0 && npc_num == 1)||(user_num == 1 && npc_num == 2)||(user_num == 2 && npc_num == 0)) {
    // 勝ち
    resultHTML += "<br>勝ち!!";
  } else {
    // 負け
    resultHTML += "<br>負け...";
  }

  // 結果出力
  document.getElementById("result").innerHTML = resultHTML;
}

/**
 * 値を出力用テキストに変換する処理
 * @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;
}