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

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

目次

1. じゃんけんのルール

2. 画像を並べる

3. 変数に格納する

4. ランダムに結果を出す

5. まとめ

じゃんけんのルール

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

じゃんけんのルール

• プレイヤーは「グー」「チョキ」「パー」の中から一つの手を選択

• プレイヤーが手を選択した後、コンピュータがランダムに手を選択

• プレイヤーの手とコンピュータの手を比較して勝敗を判定 ・勝敗に応じて結果を表示

画像を並べる

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

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

ランダムに結果を出す

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

続きはこちら
https://eguweb.jp/javascript/65416/