using HTML, CSS, and JavaScript! Let's create a classic game of "Rock, Paper, Scissors".
HTML CODE:-
<!DOCTYPE html>
<html>
<head>
<title>Rock, Paper, Scissors</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="game">
<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="result"></div>
</div>
<script src="app.js"></script>
</body>
</html>
We have a basic structure with a title, a stylesheet link, and a script link. The main content of our game is contained in a div with an id of "game". Inside this div, we have a header with the title of the game and a div with an id of "choices", which contains three buttons with unique id values ("rock", "paper", and "scissors"). Lastly, we have another div with an id of "result", which will display the result of the game.
CSS CODE:-
body {
font-family: Arial, sans-serif;
}
#game {
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 3em;
}
#choices {
margin-top: 2em;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 1em 2em;
font-size: 1.5em;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 2em;
font-size: 2em;
}
We've styled the body with a font-family and centered the game div with margin: 0 auto;. We've also given the header a large font size and added some margin to the choices div to separate it from the header. The buttons have a blue background color with white text, no border, and some padding. We've also added a hover effect to change the background color on hover. Lastly, we've given the result div some margin and a large font size.
JAVASCRIPT CODE:-
const choices = document.querySelectorAll("#choices button");
const result = document.querySelector("#result");
const computerChoice = () => {
const options = ["rock", "paper", "scissors"];
const randomNumber = Math.floor(Math.random() * 3);
return options[randomNumber];
};
const playRound = (playerChoice) => {
const computerSelection = computerChoice();
if (playerChoice === computerSelection) {
result.textContent = "It's a tie!";
} else if (
(playerChoice === "rock" && computerSelection === "scissors") ||
(playerChoice === "paper" && computerSelection === "rock") ||
(playerChoice === "scissors" && computerSelection === "paper")
) {
result.textContent = "You win!";
} else {
result.textContent = "Computer wins!";
}
};
choices.forEach((choice) => {
choice.addEventListener("click", () => {
playRound(choice.id);
});
});
RESULT:-
