1. Rock Paper Scissors Game
In this tutorial, we will build a simple Rock Paper Scissors game using HTML, CSS, and JavaScript. This classic game allows a player to select between rock, paper, and scissors, while the computer makes a random selection. The game then determines the winner based on the rules of Rock Paper Scissors.
Game Rules
The rules for Rock Paper Scissors are straightforward:
Step-by-Step Breakdown
1. HTML Structure
We begin by creating the basic HTML structure for our game. The HTML file includes a title, buttons for each choice (Rock, Paper, and Scissors), and a placeholder to display the result.:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
</head>
<body>
<h1>Rock Paper Scissors</h1>
<p>Choose your option:</p>
<button onclick="playGame('rock')">Rock</button>
<button onclick="playGame('paper')">Paper</button>
<button onclick="playGame('scissors')">Scissors</button>
<p id="result"></p>
</body>
</html>
This HTML structure consists of:
- A heading (
<h1>) displaying the title of the game. - Three buttons for the player to choose Rock, Paper, or Scissors.
- A
<p>element with anid="result"to display the outcome of the game.
2. Adding Styling (CSS)
We will add some basic styling using CSS to make the game more visually appealing.
<style>body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}</style>
This CSS code aligns the game elements at the center of the screen, styles the buttons with a margin and padding, and makes the result text bold and more prominent.
3. Game Logic (JavaScript)
The core logic of the game is written in JavaScript. We'll define a function
playGame() that takes the player's choice as input, generates a random choice for the computer, and then determines the outcome based on the game rules.
<script defer src="data:text/javascript;base64,DQogICAgZnVuY3Rpb24gcGxheUdhbWUocGxheWVyQ2hvaWNlKSB7DQogICAgICAgIGNvbnN0IGNob2ljZXMgPSBbJ3JvY2snLCAncGFwZXInLCAnc2Npc3NvcnMnXTsNCiAgICAgICAgY29uc3QgcmFuZG9tTnVtYmVyID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMyk7IC8vIFJhbmRvbSBudW1iZXIgYmV0d2VlbiAwLTINCiAgICAgICAgY29uc3QgY29tcHV0ZXJDaG9pY2UgPSBjaG9pY2VzW3JhbmRvbU51bWJlcl07DQoNCiAgICAgICAgbGV0IHJlc3VsdCA9ICcnOw0KDQogICAgICAgIGlmIChwbGF5ZXJDaG9pY2UgPT09IGNvbXB1dGVyQ2hvaWNlKSB7DQogICAgICAgICAgICByZXN1bHQgPSBgWW91IHBpY2tlZCAke3BsYXllckNob2ljZX0uIENvbXB1dGVyIGFsc28gcGlja2VkICR7Y29tcHV0ZXJDaG9pY2V9LiBJdCdzIGEgZHJhdyFgOw0KICAgICAgICB9IGVsc2UgaWYgKA0KICAgICAgICAgICAgKHBsYXllckNob2ljZSA9PT0gJ3JvY2snICYmIGNvbXB1dGVyQ2hvaWNlID09PSAnc2Npc3NvcnMnKSB8fA0KICAgICAgICAgICAgKHBsYXllckNob2ljZSA9PT0gJ3BhcGVyJyAmJiBjb21wdXRlckNob2ljZSA9PT0gJ3JvY2snKSB8fA0KICAgICAgICAgICAgKHBsYXllckNob2ljZSA9PT0gJ3NjaXNzb3JzJyAmJiBjb21wdXRlckNob2ljZSA9PT0gJ3BhcGVyJykNCiAgICAgICAgKSB7DQogICAgICAgICAgICByZXN1bHQgPSBgWW91IHBpY2tlZCAke3BsYXllckNob2ljZX0uIENvbXB1dGVyIHBpY2tlZCAke2NvbXB1dGVyQ2hvaWNlfS4gWW91IHdpbiFgOw0KICAgICAgICB9IGVsc2Ugew0KICAgICAgICAgICAgcmVzdWx0ID0gYFlvdSBwaWNrZWQgJHtwbGF5ZXJDaG9pY2V9LiBDb21wdXRlciBwaWNrZWQgJHtjb21wdXRlckNob2ljZX0uIFlvdSBsb3NlLmA7DQogICAgICAgIH0NCg0KICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncmVzdWx0JykuaW5uZXJUZXh0ID0gcmVzdWx0Ow0KICAgIH0NCg=="></script>
Explanation of JavaScript Code:
- Choices Array: The array
choicescontains the possible options: rock, paper, and scissors. - Random Computer Choice: We generate a random number between 0 and 2 using
Math.floor(Math.random() * 3). This number corresponds to one of the choices for the computer. - Game Logic: The function compares the player's choice with the computer's choice:
- If both choices are the same, the result is a draw.
- If the player's choice beats the computer's, the player wins.
- Otherwise, the computer wins.
- Displaying the Result: The result is displayed by updating the text inside the
<p>element with theid="result".
Final Version of the Code
Here's the complete code for the Rock Paper Scissors game:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title><style>body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}</style></head>
<body>
<h1>Rock Paper Scissors</h1>
<p>Choose your option:</p>
<button onclick="playGame('rock')">Rock</button>
<button onclick="playGame('paper')">Paper</button>
<button onclick="playGame('scissors')">Scissors</button>
<p id="result"></p> <script defer src="data:text/javascript;base64,DQogICAgICAgIGZ1bmN0aW9uIHBsYXlHYW1lKHBsYXllckNob2ljZSkgew0KICAgICAgICAgICAgY29uc3QgY2hvaWNlcyA9IFsncm9jaycsICdwYXBlcicsICdzY2lzc29ycyddOw0KICAgICAgICAgICAgY29uc3QgcmFuZG9tTnVtYmVyID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMyk7IC8vIFJhbmRvbSBudW1iZXIgYmV0d2VlbiAwLTINCiAgICAgICAgICAgIGNvbnN0IGNvbXB1dGVyQ2hvaWNlID0gY2hvaWNlc1tyYW5kb21OdW1iZXJdOw0KDQogICAgICAgICAgICBsZXQgcmVzdWx0ID0gJyc7DQoNCiAgICAgICAgICAgIGlmIChwbGF5ZXJDaG9pY2UgPT09IGNvbXB1dGVyQ2hvaWNlKSB7DQogICAgICAgICAgICAgICAgcmVzdWx0ID0gYFlvdSBwaWNrZWQgJHtwbGF5ZXJDaG9pY2V9LiBDb21wdXRlciBhbHNvIHBpY2tlZCAke2NvbXB1dGVyQ2hvaWNlfS4gSXQncyBhIGRyYXchYDsNCiAgICAgICAgICAgIH0gZWxzZSBpZiAoDQogICAgICAgICAgICAgICAgKHBsYXllckNob2ljZSA9PT0gJ3JvY2snICYmIGNvbXB1dGVyQ2hvaWNlID09PSAnc2Npc3NvcnMnKSB8fA0KICAgICAgICAgICAgICAgIChwbGF5ZXJDaG9pY2UgPT09ICdwYXBlcicgJiYgY29tcHV0ZXJDaG9pY2UgPT09ICdyb2NrJykgfHwNCiAgICAgICAgICAgICAgICAocGxheWVyQ2hvaWNlID09PSAnc2Npc3NvcnMnICYmIGNvbXB1dGVyQ2hvaWNlID09PSAncGFwZXInKQ0KICAgICAgICAgICAgKSB7DQogICAgICAgICAgICAgICAgcmVzdWx0ID0gYFlvdSBwaWNrZWQgJHtwbGF5ZXJDaG9pY2V9LiBDb21wdXRlciBwaWNrZWQgJHtjb21wdXRlckNob2ljZX0uIFlvdSB3aW4hYDsNCiAgICAgICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICAgICAgcmVzdWx0ID0gYFlvdSBwaWNrZWQgJHtwbGF5ZXJDaG9pY2V9LiBDb21wdXRlciBwaWNrZWQgJHtjb21wdXRlckNob2ljZX0uIFlvdSBsb3NlLmA7DQogICAgICAgICAgICB9DQoNCiAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyZXN1bHQnKS5pbm5lclRleHQgPSByZXN1bHQ7DQogICAgICAgIH0NCiAgICA="></script> </body>
</html>
Conclusion
In this tutorial, we created a simple Rock Paper Scissors game using HTML, CSS, and JavaScript. We learned how to:
- Structure the HTML for user interaction.
- Style the game interface using basic CSS.
- Implement the game logic in JavaScript to determine the winner. This game can be extended further with more features, such as adding a scoring system or improving the user interface with animations.