In this tutorial, we’re delving into the beloved game of Rock, Paper, Scissors. Whether you’re a coding enthusiast or a gaming aficionado, this step-by-step guide empowers you to create your digital rendition using the dynamic trio of HTML, CSS, and JavaScript.
Throughout this journey, you’ll leverage HTML to structure the game elements, CSS to design an engaging interface, and JavaScript to breathe life into the gameplay mechanics. From capturing user selections to computing outcomes, this tutorial equips you with the tools to craft an interactive experience that mirrors the thrill of this timeless game.
By the end, not only will you have a functioning Rock, Paper, Scissors game at your fingertips, but you’ll also have gained invaluable insights into front-end development. Get ready to unleash your creativity and coding skills while embracing the fun and challenge of crafting your own digital gaming experience!
HTML :
This HTML document sets up the structure for a Rock, Paper, Scissors game. It includes sections for displaying the game’s results, user and CPU selections, and options for rock, paper, and scissors. The structure is complemented by an external stylesheet (“style.css”) and a JavaScript file (“script.js”) for styling and game logic.
Overall, this HTML file establishes the foundation for an interactive Rock, Paper, Scissors game interface.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Rock Paper Scissors Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="container">
<div class="result_field">
<div class="result_images">
<span class="user_result">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download.png" alt="Rock Image" />
</span>
<span class="cpu_result">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download.png" alt="Rock Image" />
</span>
</div>
<div class="result">Let's Play!!</div>
</div>
<div class="option_images">
<span class="option_image">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download.png" alt="Rock Image" />
<p>Rock</p>
</span>
<span class="option_image">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download-1.png" alt="Paper Image" />
<p>Paper</p>
</span>
<span class="option_image">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download-2.png" alt="Scissors Image" />
<p>Scissors</p>
</span>
</div>
</section>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS code defines the styling for a Rock, Paper, Scissors game interface. It incorporates Google’s “Poppins” font, sets up a centered layout with a defined background color, and styles specific elements for gameplay. The design includes result displays for user and CPU selections, animation effects to shake the choices during gameplay, and options for rock, paper, and scissors. The code emphasizes visual cues for active and hovered options while maintaining a cohesive and visually appealing game interface.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #14171e;
}
::selection {
color: #fff;
background-color: #000;
}
.container {
padding: 2rem 7rem;
border-radius: 10px;
background: #fff;
box-shadow: 0 5px 10px rgba(255, 255, 255, 0.1);
}
.result_images {
display: flex;
column-gap: 7rem;
}
.container.start .user_result {
transform-origin: left;
animation: userShake 0.7s ease infinite;
}
@keyframes userShake {
50% {
transform: rotate(10deg);
}
}
.container.start .cpu_result {
transform-origin: right;
animation: cpuShake 0.7s ease infinite;
}
@keyframes cpuShake {
50% {
transform: rotate(-10deg);
}
}
.result_images img {
width: 100px;
}
.user_result img {
transform: rotate(90deg);
}
.cpu_result img {
transform: rotate(-90deg) rotateY(180deg);
}
.result {
text-align: center;
font-size: 2rem;
color: #de0d64;
margin-top: 1.5rem;
}
.option_image img {
width: 50px;
}
.option_images {
display: flex;
align-items: center;
margin-top: 2.5rem;
justify-content: space-between;
}
.container.start .option_images {
pointer-events: none;
}
.option_image {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0.5;
cursor: pointer;
transition: opacity 0.3s ease;
}
.option_image:hover {
opacity: 1;
}
.option_image.active {
opacity: 1;
}
.option_image img {
pointer-events: none;
}
.option_image p {
color: #3477eb;
font-size: 1.235rem;
margin-top: 1rem;
pointer-events: none;
}
JavaScript :
This JavaScript code creates a Rock, Paper, Scissors game in the browser. It listens for user clicks on options, displaying the choices and simulating the game’s logic by randomly selecting the CPU’s move. It then calculates the winner and updates the result, creating an interactive game experience with dynamic outcomes based on user and CPU selections.
// Get to DOM elements
const gameContainer = document.querySelector(".container"),
userResult = document.querySelector(".user_result img"),
cpuResult = document.querySelector(".cpu_result img"),
result = document.querySelector(".result"),
optionImages = document.querySelectorAll(".option_image");
// Loop through each option image element
optionImages.forEach((image, index) => {
image.addEventListener("click", (e) => {
image.classList.add("active");
userResult.src = cpuResult.src =
"http://codingstella.com/wp-content/uploads/2024/01/download.png";
result.textContent = "Wait...";
// Loop through each option image again
optionImages.forEach((image2, index2) => {
// If the current index doesn't match the clicked index
// Remove the "active" class from the other option images
index !== index2 && image2.classList.remove("active");
});
gameContainer.classList.add("start");
// Set a timeout to delay the result calculation
let time = setTimeout(() => {
gameContainer.classList.remove("start");
// Get the source of the clicked option image
let imageSrc = e.target.querySelector("img").src;
// Set the user image to the clicked option image
userResult.src = imageSrc;
// Generate a random number between 0 and 2
let randomNumber = Math.floor(Math.random() * 3);
// Create an array of CPU image options
let cpuImages = [
"http://codingstella.com/wp-content/uploads/2024/01/download.png",
"http://codingstella.com/wp-content/uploads/2024/01/download-1.png",
"http://codingstella.com/wp-content/uploads/2024/01/download-2.png"
];
// Set the CPU image to a random option from the array
cpuResult.src = cpuImages[randomNumber];
// Assign a letter value to the CPU option (R for rock, P for paper, S for scissors)
let cpuValue = ["R", "P", "S"][randomNumber];
// Assign a letter value to the clicked option (based on index)
let userValue = ["R", "P", "S"][index];
// Create an object with all possible outcomes
let outcomes = {
RR: "Draw",
RP: "Cpu",
RS: "User",
PP: "Draw",
PR: "User",
PS: "Cpu",
SS: "Draw",
SR: "Cpu",
SP: "User"
};
// Look up the outcome value based on user and CPU options
let outComeValue = outcomes[userValue + cpuValue];
// Display the result
result.textContent =
userValue === cpuValue ? "Match Draw" : `${outComeValue} Won!!`;
}, 2500);
});
});
In short, this Rock, Paper, Scissors game, crafted with HTML, CSS, and JavaScript, brings the classic game to life in a digital format. It offers an engaging user experience, allowing players to select their choice and compete against the CPU.
If you encounter any difficulties while working on your glowing cards, fear not. You can freely obtain the source code files for this project. Simply click the Download button to kickstart your journey. Enjoy coding!
