じゃんけんアプリ

選択してください。
<!DOCTYPE html>
<html>
<head>
	<title>じゃんけんアプリ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			text-align: center;
			font-size: 36px;
			margin: 0;
			padding-top: 100px;
			background-color: #f2f2f2;
		}
		button {
			font-size: 36px;
			padding: 20px 40px;
			margin: 0 20px;
			border-radius: 10px;
			border: none;
			background-color: #007bff;
			color: #fff;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		button:hover {
			background-color: #0056b3;
		}
	</style>
</head>
<body>
	<h1>じゃんけんアプリ</h1>
	<p>選択してください。</p>
	<button id="rock">グー✊</button>
	<button id="scissors">チョキ✌️</button>
	<button id="paper">パー✋</button>
	<div id="result"></div>
	<script>
		document.getElementById("rock").addEventListener("click", function(){
			playGame("rock");
		});
		document.getElementById("scissors").addEventListener("click", function(){
			playGame("scissors");
		});
		document.getElementById("paper").addEventListener("click", function(){
			playGame("paper");
		});

		function playGame(playerChoice) {
			var computerChoice = getComputerChoice();
			if (playerChoice == computerChoice) {
				document.getElementById("result").innerHTML = "あいこ🤝";
			} else if ((playerChoice == "rock" && computerChoice == "scissors") || (playerChoice == "scissors" && computerChoice == "paper") || (playerChoice == "paper" && computerChoice == "rock")) {
				document.getElementById("result").innerHTML = "あなたの勝ち🥺";
			} else {
				document.getElementById("result").innerHTML = "負け！出直してこい😡";
			}
		}

		function getComputerChoice() {
			var choices = ["rock", "scissors", "paper"];
			var randomNumber = Math.floor(Math.random() * 3);
			return choices[randomNumber];
		}
	</script>
</body>
</html>

※ジョークについては、今回は特に取り入れておりません。