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の結果がランダムで生成されて、勝ち負けあいこが設定できました。
次回は、相手の手と表示を、数字ではなく手に変更してみます。
ご参考ください。