じゃんけんアプリ

負け！出直してこい😡
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>じゃんけんアプリ</title>
	<style type="text/css">
		body {
			background-color: #F5F5F5;
			font-family: Arial, sans-serif;
			font-size: 18px;
			text-align: center;
		}
		h1 {
			font-size: 32px;
			margin-bottom: 40px;
		}
		button {
			padding: 10px 20px;
			font-size: 24px;
			margin: 0 10px;
			background-color: #EEE;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		#result {
			font-size: 26px;
			margin-top: 40px;
			padding: 20px 0;
			border-top: 1px solid #DDD;
			border-bottom: 1px solid #DDD;
		}
		#message {
			font-size: 24px;
			font-weight: bold;
			margin-top: 20px;
		}
		#losing {
			font-size: 168px;
			font-weight: bold;
			color: red;
			display: none;
		}
	</style>
</head>
<body>
	<h1>じゃんけんアプリ</h1>
	<button id="rock">グー✊</button>
	<button id="scissors">チョキ✌️</button>
	<button id="paper">パー✋</button>
	<div id="result"></div>
	<div id="message"></div>
	<div id="losing">負け！出直してこい😡</div>
	<script type="text/javascript">
		var result = document.getElementById("result");
		var message = document.getElementById("message");
		var losing = document.getElementById("losing");
		var choices = ["グー", "チョキ", "パー"];
		var cheers = ["よくやった！", "すごい！", "神の手！", "その調子！", "最高！", "完璧！"];

		document.getElementById("rock").onclick = function() {
			playGame(0, "グー");
		}
		document.getElementById("scissors").onclick = function() {
			playGame(1, "チョキ");
		}
		document.getElementById("paper").onclick = function() {
			playGame(2, "パー");
		}

		function playGame(userChoice, userChoiceText) {
			var computerChoice = Math.floor(Math.random() * 3);
			var computerChoiceText = choices[computerChoice];
			var resultText = userChoiceText + " vs. " + computerChoiceText;

			if (userChoice == computerChoice) {
				result.innerHTML = "引き分け！";
				message.innerHTML = "";
			} else if ((userChoice == 0 && computerChoice == 1) || (userChoice == 1 && computerChoice == 2) || (userChoice == 2 && computerChoice == 0)) {
				result.innerHTML = resultText + " あなたの勝ち！";
				message.innerHTML = cheers[Math.floor(Math.random() * cheers.length)];
				losing.style.display = "none";
			} else {
				result.innerHTML = resultText + " あなたの負け！";
				message.innerHTML = "";
				losing.style.display = "block";
				animateLosing();
			}
		}

		function animateLosing() {
			var rotation = 0;
			var interval = setInterval(function() {
				losing.style.transform = "rotate(" + rotation + "deg)";
				rotation += 10;
			}, 50);
			setTimeout(function() {
				clearInterval(interval);
				losing.style.transform = "none";
			}, 2000);
		}
	</script>
</body>
</html>