Play Rock Paper Scissors Online - Simple HTML Game - 常规

<html>
<head>
	<title>Rock Paper Scissors</title>
	<style type="text/css">
		#container {
			margin: 10px auto;
			width: 300px;
			border: 1px solid #ccc;
			text-align: center;
			padding: 10px;
		}
		#container h1 {
			font-size: 1.5em;
			margin-bottom: 10px;
		}
		#choices {
			margin-bottom: 10px;
		}
		#choices button {
			width: 100px;
			height: 50px;
			margin: 0 5px;
			font-size: 1.2em;
		}
		#results {
			font-size: 1.3em;
			font-weight: bold;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div id="container">
		<h1>Rock, Paper, Scissors</h1>
		<div id="choices">
			<button id="rock">Rock</button>
			<button id="paper">Paper</button>
			<button id="scissors">Scissors</button>
		</div>
		<div id="results"></div>
	</div>
	<script type="text/javascript">
		var userChoice;
		var computerChoice;
		var choices = ['rock', 'paper', 'scissors'];
		var results = document.getElementById('results');
		var rock = document.getElementById('rock');
		var paper = document.getElementById('paper');
		var scissors = document.getElementById('scissors');
<pre><code>	rock.addEventListener('click', function() {
		userChoice = 'rock';
		computerChoice = choices[Math.floor(Math.random() * choices.length)];
		compare(userChoice, computerChoice);
	});

	paper.addEventListener('click', function() {
		userChoice = 'paper';
		computerChoice = choices[Math.floor(Math.random() * choices.length)];
		compare(userChoice, computerChoice);
	});

	scissors.addEventListener('click', function() {
		userChoice = 'scissors';
		computerChoice = choices[Math.floor(Math.random() * choices.length)];
		compare(userChoice, computerChoice);
	});

	function compare(userChoice, computerChoice) {
		if (userChoice === computerChoice) {
			results.innerHTML = 'It's a tie!';
		}
		else if (userChoice === 'rock') {
			if (computerChoice === 'scissors') {
				results.innerHTML = 'You win!';
			}
			else {
				results.innerHTML = 'Computer wins!';
			}
		}
		else if (userChoice === 'paper') {
			if (computerChoice === 'rock') {
				results.innerHTML = 'You win!';
			}
			else {
				results.innerHTML = 'Computer wins!';
			}
		}
		else if (userChoice === 'scissors') {
			if (computerChoice === 'rock') {
				results.innerHTML = 'Computer wins!';
			}
			else {
				results.innerHTML = 'You win!';
			}
		}
	}
&lt;/script&gt;
</code></pre>
</body>
</html>