【JavaScript】じゃんけんゲームを作る（Part1）

JavaScript(ジャバスクリプト)

2023.05.20

この記事は約4分で読めます。

JavaScriptでじゃんけんゲームを作ってみます。プログラミングの勉強にもなりますので、ぜひ挑戦ください。

じゃんけんのルール
画像を並べる
変数に格納する
ランダムに結果を出す
まとめ

じゃんけんのルール

改めて、じゃんけんのルールをおさらいしてみます。

じゃんけんのルール

プレイヤーは「グー」「チョキ」「パー」の中から一つの手を選択
プレイヤーが手を選択した後、コンピュータがランダムに手を選択
プレイヤーの手とコンピュータの手を比較して勝敗を判定・勝敗に応じて結果を表示

画像を並べる

まずは、グーチョキパーの画像を並べます。

<h1>じゃんけんゲーム</h1>
  <p>自分の選択：</p>
  <img src="/uploads/rock.png" alt="グー" class="choice-image" onclick="selectChoice(1)">
  <img src="/uploads/scissors.png" alt="チョキ" class="choice-image" onclick="selectChoice(2)">
  <img src="/uploads/paper.png" alt="パー" class="choice-image" onclick="selectChoice(3)">
  <p id="result"></p>
  <p id="enemy"></p>

このような感じです。画像のパスやCSSなど適時修正ください。

変数に格納する

playerChoice変数を作って、選択した手の値を格納します。

let playerChoice = 0;

function selectChoice(choice) {
  playerChoice = choice;
  playGame();
}

グー = 1
チョキ = 2
パー = 3
と関数の仮引数にそれぞれセットしています。

その後、playGame関数を実行しています。

ランダムに結果を出す

１～３の結果をランダムに作成しています。

Math.floorを使って、乱数を作成。3で掛けて1足すことで1～3のランダム整数が出ます。

function playGame() {
  if (playerChoice !== 0) {
    let computerChoice = Math.floor(Math.random() * 3) + 1;
    let resultElement = document.getElementById("result");
    let resultEnemy = document.getElementById("enemy");
    if (
      (playerChoice === 1 && computerChoice === 2) ||
      (playerChoice === 2 && computerChoice === 3) ||
      (playerChoice === 3 && computerChoice === 1)
    ) {
      resultElement.textContent = "あなたの勝ちです！";
    } else if (playerChoice === computerChoice) {
      resultElement.textContent = "あいこです！";
    } else {
      resultElement.textContent = "あなたの負けです！";
    }
  } else {
    alert("じゃんけんの手を選んでください！");
  }
      resultEnemy.textContent = computerChoice;
}