スキルアップを始める!

【JavaScript】じゃんけんゲームを作る(Part1)

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約4分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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関数を実行しています。

ランダムに結果を出す

1~3の結果をランダムに作成しています。

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;
}

まとめ

これで、1~3の結果がランダムで生成されて、勝ち負けあいこが設定できました。

次回は、相手の手と表示を、数字ではなく手に変更してみます。

ご参考ください。

URLをコピーしました!