Logo

Building a Rock Paper Scissors Game with HTML, CSS, and JavaScript

Codewithhridoy

Codewithhridoy

· 2 min read
Building a Rock Paper Scissors Game with HTML, CSS, and JavaScript

Today, we're going to walk through creating a sleek and interactive Rock Paper Scissors game using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice their web development skills while creating something fun and engaging.

The Final Product

Before we dive into the code, let's take a look at what we're building:

[Insert a screenshot of the game here]

Our game features:

  • Stylish buttons with Font Awesome icons for Rock, Paper, and Scissors
  • A clean, modern design with smooth hover effects
  • Real-time score tracking
  • Visual display of both player and computer choices

The Code

Let's break down our code into three separate files: HTML, CSS, and JavaScript.

HTML (index.html)

<!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 Game</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <h1>Rock Paper Scissors</h1>
        <div class="choices">
            <button class="choice-btn" onclick="playGame('rock')"><i class="fas fa-hand-rock"></i></button>
            <button class="choice-btn" onclick="playGame('paper')"><i class="fas fa-hand-paper"></i></button>
            <button class="choice-btn" onclick="playGame('scissors')"><i class="fas fa-hand-scissors"></i></button>
        </div>
        <div id="result">Choose your move!</div>
        <div id="score">Score: Player 0 - Computer 0</div>
        <div class="choices-display">
            <div class="player-choice">
                <div>Your Choice</div>
                <i id="player-icon" class="fas fa-question"></i>
            </div>
            <div class="computer-choice">
                <div>Computer's Choice</div>
                <i id="computer-icon" class="fas fa-question"></i>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

@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 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px;
}

.game-container {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
}

h1 {
  color: #4a4a4a;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.choices {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.choice-btn {
  font-size: 2rem;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.choice-btn:hover {
  background-color: #2980b9;
  transform: scale(1.1) rotate(15deg);
}

#result {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
  min-height: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2c3e50;
}

#score {
  font-size: 1.2rem;
  color: #34495e;
  margin-bottom: 1.5rem;
}

.choices-display {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 1rem;
}

.player-choice,
.computer-choice {
  text-align: center;
}

.player-choice div,
.computer-choice div {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #4a4a4a;
}

.player-choice i,
.computer-choice i {
  font-size: 3rem;
  color: #3498db;
}

#change-color {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 1rem;
  font-size: 1rem;
}

#change-color:hover {
  background-color: #27ae60;
}

@media (max-width: 480px) {
  .game-container {
    padding: 1.5rem;
  }

  h1 {
    font-size: 2rem;
  }

  .choice-btn {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  #result {
    font-size: 1.2rem;
  }

  #score {
    font-size: 1rem;
  }
}

JavaScript (script.js)

let playerScore = 0;
let computerScore = 0;

function getComputerChoice() {
    const choices = ['rock', 'paper', 'scissors'];
    return choices[Math.floor(Math.random() * 3)];
}

function determineWinner(playerChoice, computerChoice) {
    if (playerChoice === computerChoice) return "It's a tie!";
    if (
        (playerChoice === 'rock' && computerChoice === 'scissors') ||
        (playerChoice === 'paper' && computerChoice === 'rock') ||
        (playerChoice === 'scissors' && computerChoice === 'paper')
    ) {
        playerScore++;
        return "You win!";
    }
    computerScore++;
    return "Computer wins!";
}

function updateChoiceDisplay(player, choice) {
    const iconMap = {
        'rock': 'fa-hand-rock',
        'paper': 'fa-hand-paper',
        'scissors': 'fa-hand-scissors'
    };
    const iconElement = document.getElementById(`${player}-icon`);
    iconElement.className = `fas ${iconMap[choice]}`;
}

function playGame(playerChoice) {
    const computerChoice = getComputerChoice();
    const result = determineWinner(playerChoice, computerChoice);

    updateChoiceDisplay('player', playerChoice);
    updateChoiceDisplay('computer', computerChoice);

    document.getElementById('result').textContent = result;
    document.getElementById('score').textContent = `Score: Player ${playerScore} - Computer ${computerScore}`;
}

How It Works

  1. HTML Structure: The HTML file sets up the basic structure of our game, including the title, choice buttons, result display, score tracking, and areas to show the player and computer choices.
  2. CSS Styling: Our CSS file handles all the visual aspects of the game. It creates a centered layout, styles the buttons with a pleasing color scheme, and ensures the game looks good on various screen sizes.
  3. JavaScript Logic: The JavaScript file contains all the game logic:
    • getComputerChoice() randomly selects the computer's move.
    • determineWinner() compares the player's choice with the computer's to decide the winner.
    • updateChoiceDisplay() updates the icons to reflect the choices made.
    • playGame() ties everything together, running when a player makes a choice.

Conclusion

This Rock Paper Scissors game is not only fun to play but also serves as an excellent project for learning web development. It combines HTML structure, CSS styling, and JavaScript functionality in a practical and engaging way.

Feel free to expand on this game by adding new features like:

  • A round limit
  • Animations for winning and losing
  • Sound effects for each choice and result

Happy coding, and may the best hand win!

Comments

No approved comments available yet