Click here for free DL of the app version that can save data.

No:1206

116

←

Prev Next

→

rock, paper, scissors game
Developer User3258｜Date and time 23/6/18 8:24:07
Build time 26.783 sec｜Game capacity 2.508KB｜

Script

じゃんけんゲームの実装例:

じゃんけんゲーム

このプログラムでは、HTMLでボタンを用意し、JavaScriptでクリックイベントを設定してじゃんけんゲームを実現しています。プレイヤーが選択した手が `playerChoice` 変数に保存され、`playGame` 関数でコンピューターとの勝敗を判定します。結果は `result` パラグラフに表示されます。スマホでも操作しやすいようにボタンサイズを大きめに設定しています。また、絵文字を使ってじゃんけんの手を表示しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

じゃんけんゲームの実装例:

```
<!DOCTYPE html>
<html>
<head>
	<title>じゃんけんゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 24px;
			text-align: center;
		}
		button {
			padding: 10px;
			margin: 10px;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<h1>じゃんけんゲーム</h1>
	<p id="result"></p>
	<button id="rock">✊</button>
	<button id="paper">✋</button>
	<button id="scissors">✌️</button>
	<script>
		const rockButton = document.getElementById("rock");
		const paperButton = document.getElementById("paper");
		const scissorsButton = document.getElementById("scissors");
		const result = document.getElementById("result");
		let playerChoice;

function playRock() {
			playerChoice = "rock";
			playGame();
		}

function playPaper() {
			playerChoice = "paper";
			playGame();
		}

function playScissors() {
			playerChoice = "scissors";
			playGame();
		}

function playGame() {
			const computerChoice = getComputerChoice();
			let gameResult;

if (playerChoice == computerChoice) {
				gameResult = "引き分け！";
			} else if ((playerChoice == "rock" && computerChoice == "scissors") || 
					(playerChoice == "paper" && computerChoice == "rock") || 
					(playerChoice == "scissors" && computerChoice == "paper")) {
				gameResult = "勝ち！";
			} else {
				gameResult = "負け！";
			}

result.innerHTML = "あなた: " + playerChoice + " コンピューター: " + computerChoice + "<br>" + gameResult;
		}

function getComputerChoice() {
			const choices = ["rock", "paper", "scissors"];
			const randomIndex = Math.floor(Math.random() * choices.length);
			return choices[randomIndex];
		}

rockButton.addEventListener("click", playRock);
		paperButton.addEventListener("click", playPaper);
		scissorsButton.addEventListener("click", playScissors);
	</script>
</body>
</html>
```