猜拳遊戲

選擇你的角色:
<!DOCTYPE html>
<html>
<head>
	<title>猜拳遊戲</title>
</head>
<body>
	<h1>猜拳遊戲</h1>
	<p>選擇你的角色:</p>
	<select id="player">
		<option value="張倬嘉">張倬嘉</option>
		<option value="陳一諾">陳一諾</option>
		<option value="陳一琛">陳一琛</option>
	</select>

	<button onclick="play()">出拳</button>

	<div id="result"></div>

	<script>
		function play() {
			var playerSelection = document.getElementById("player").value;
			var computerSelection = ["張倬嘉", "陳一諾", "陳一琛"][Math.floor(Math.random() * 3)];
			var outcome;

			if (playerSelection === "張倬嘉") {
				if (computerSelection === "陳一諾") {
					outcome = "win";
				} else if (computerSelection === "陳一琛") {
					outcome = "lose";
				} else {
					outcome = "tie";
				}
			} else if (playerSelection === "陳一諾") {
				if (computerSelection === "陳一琛") {
					outcome = "win";
				} else if (computerSelection === "張倬嘉") {
					outcome = "lose";
				} else {
					outcome = "tie";
				}
			} else {
				if (computerSelection === "張倬嘉") {
					outcome = "win";
				} else if (computerSelection === "陳一諾") {
					outcome = "lose";
				} else {
					outcome = "tie";
				}
			}

			var message;
			if (outcome === "win") {
				message = "你贏了！勁";
			} else if (outcome === "lose") {
				message = "<span style='color:red;font-size:2em;'>你輸了！再來一次</span>";
			} else {
				message = "平手！";
			}

			document.getElementById("result").innerHTML = "電腦選擇：" + computerSelection + "<br>" + message;

			setTimeout(function(){document.getElementById("result").innerHTML=""},3000);
		}
	</script>
</body>
</html>