Scribd
Upload
11 views2 pages

Rock Paper Scissors Game

The document outlines a Rock Paper Scissors game project consisting of HTML, CSS, and JavaScript code. The HTML structure includes buttons for player choices and displays the results, while the CSS styles the game interface. The JavaScript function determines the winner based on the player's choice and the computer's random selection.

Uploaded by

nerrowj321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views2 pages

Rock Paper Scissors Game

The document outlines a Rock Paper Scissors game project consisting of HTML, CSS, and JavaScript code. The HTML structure includes buttons for player choices and displays the results, while the CSS styles the game interface. The JavaScript function determines the winner based on the player's choice and the computer's random selection.

Uploaded by

nerrowj321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Rock Paper Scissors Game Project

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>Rock Paper Scissors</h1>
<div class="choices">
<button onclick="play('rock')">Rock</button>
<button onclick="play('paper')">Paper</button>
<button onclick="play('scissors')">Scissors</button>
</div>
<div class="result">
<p id="player-choice">You chose: </p>
<p id="computer-choice">Computer chose: </p>
<p id="winner">Result: </p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS Code
body {
font-family: Arial, sans-serif;
background: #f0f8ff;
text-align: center;
padding: 50px;
}

.game-container {
background: white;
border-radius: 12px;
padding: 30px;
max-width: 400px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.choices button {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
cursor: pointer;
border: none;
Rock Paper Scissors Game Project
border-radius: 6px;
background: #007BFF;
color: white;
transition: 0.3s;
}

.choices button:hover {
background: #0056b3;
}

.result p {
font-size: 18px;
margin-top: 10px;
}

JavaScript Code
function play(playerChoice) {
const choices = ['rock', 'paper', 'scissors'];
const computerChoice = choices[Math.floor(Math.random() * 3)];

document.getElementById('player-choice').textContent = `You chose: ${playerChoice}`;


document.getElementById('computer-choice').textContent = `Computer chose:
${computerChoice}`;

let winner = '';

if (playerChoice === computerChoice) {


winner = 'It\'s a draw!';
} else if (
(playerChoice === 'rock' && computerChoice === 'scissors') ||
(playerChoice === 'paper' && computerChoice === 'rock') ||
(playerChoice === 'scissors' && computerChoice === 'paper')
) {
winner = 'You win!';
} else {
winner = 'Computer wins!';
}

document.getElementById('winner').textContent = `Result: ${winner}`;


}

You might also like