Skip to content

Commit

Permalink
Merge branch 'hotfix/readme'
Browse files Browse the repository at this point in the history
  • Loading branch information
@ExtF8
ExtF8 committed Jan 23, 2024
2 parents 97c8047 + bd6273a commit 57fd59a
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 135 deletions.
41 changes: 41 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Rock Paper Scissors Game with UI

## Overview

This project is an interactive Rock Paper Scissors game, created as part of the Foundations Course in [The Odin Project](https://www.theodinproject.com/lessons/foundations-rock-paper-scissors). The primary focus is to implement a user interface (UI) using HTML, CSS, and JavaScript, offering an engaging and dynamic gaming experience.

## Project Overview

The Rock Paper Scissors game is designed with a modular JavaScript approach, for efficient code organization. The UI includes buttons for player selections, real-time score tracking, and round results, providing a seamless gaming experience.

## Features

- **Interactive UI:** Players make selections by clicking on buttons (Rock, Paper, Scissors).
- **Dynamic Score Tracking:** Player and computer scores are updated in real-time.
- **Round Results:** Immediate display of outcomes for each round.
- **Restart Functionality:** A "Play again" button allows users to restart the game.
- **Responsive Design:** The UI is designed for optimal viewing on various devices.

## Project Structure

The project is structured with modular JavaScript, promoting clean and maintainable code.

## Technologies Used

- **HTML:** Structure of the webpage.
- **CSS:** Styling for an attractive appearance.
- **JavaScript (ES6):** Core logic for game functionality.

## How to Play

1. Click on the buttons (Rock, Paper, or Scissors) to make your selection.
2. The computer will randomly choose its move.
3. Scores are updated dynamically, and round results are displayed.
4. Continue playing until one player reaches 5 points.
5. Click "Play again" to restart the game.

## Live Demo

Experience the live demo of the Rock Paper Scissors game with UI by visiting [this link](https://extf8.github.io/RockPaperScissors/).

Enjoy the interactive and dynamic gameplay! Explore the GitHub repository for the complete code and project history.
101 changes: 52 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<section id="page-wrapper">
<h1>Rock Paper Scissors</h1>
<p>First to 5 points wins</p>
<div class="round">
<h3>Round:</h3>
<p class="round-number">1</p>
</div>
<div id="game-wrapper">
<div class="player-container">
<div class="user-container">
<h2>Human</h2>
<div class="score">
<h3>Score:</h3>
<p class="user-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="rock" data-selection="rock">Rock</button>
<button class="paper" data-selection="paper">Paper</button>
<button class="scissors" data-selection="scissors">Scissors</button>
</div>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<section id="page-wrapper">
<h1>Rock Paper Scissors</h1>
<p>First to 5 points wins</p>
<div class="round">
<h3>Round:</h3>
<p class="round-number">1</p>
</div>
<div class="player-container">
<div class="user-container">
<h2>Computer</h2>
<div class="score">
<h3>Score:</h3>
<p class="computer-score">0</p>
<div id="game-wrapper">
<div class="player-container">
<div class="user-container">
<h2>Human</h2>
<div class="score">
<h3>Score:</h3>
<p class="user-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="rock" data-selection="rock">Rock</button>
<button class="paper" data-selection="paper">
Paper
</button>
<button class="scissors" data-selection="scissors">
Scissors
</button>
</div>
</div>
<div class="user-buttons">
<button class="computer-rock">Rock</button>
<button class="computer-paper">Paper</button>
<button class="computer-scissors">Scissors</button>
<div class="player-container">
<div class="user-container">
<h2>Computer</h2>
<div class="score">
<h3>Score:</h3>
<p class="computer-score">0</p>
</div>
</div>
<div class="user-buttons">
<button class="computer-rock">Rock</button>
<button class="computer-paper">Paper</button>
<button class="computer-scissors">Scissors</button>
</div>
</div>
</div>
</div>
<div class="result-content">
<h2 class="result"></h2>
</div>
</section>
</body>

</html>
</div>
<div class="result-content">
<h2 class="result"></h2>
</div>
</section>
</body>
</html>
170 changes: 84 additions & 86 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,124 +20,122 @@ const computerPaper = document.querySelector('.computer-paper');
const computerScissors = document.querySelector('.computer-scissors');

function refreshHover() {
newGame.classList.add('userHover');
newGame.classList.add('userHover');
}

function removeClick() {
this.classList.remove('userClick');
this.classList.remove('userHover');
this.classList.remove('userClick');
this.classList.remove('userHover');
}

function removeHover() {
this.classList.remove('userHover');
this.classList.remove('userHover');
}

function refreshPage() {
window.location.reload(true);
window.location.reload(true);
}

function userHover() {
if (playerScore <= 4 && computerScore <= 4) {
this.classList.add('userHover');
}
if (playerScore <= 4 && computerScore <= 4) {
this.classList.add('userHover');
}
}

function removeUserColor() {
rockButton.classList.remove('userClick');
rockButton.classList.remove('userClick');
paperButton.classList.remove('userClick');
scissorsButton.classList.remove('userClick');
}

function disableButtons() {
btns.forEach(elem => {
elem.disabled = true
})
btns.forEach((elem) => {
elem.disabled = true;
});
}

[...btns].forEach(btn => {
let choice = btn.getAttribute('data-selection');
btn.addEventListener('click', () => {
playRound(choice);
btn.classList.add('userClick');
})
})
[...btns].forEach((btn) => {
let choice = btn.getAttribute('data-selection');
btn.addEventListener('click', () => {
playRound(choice);
btn.classList.add('userClick');
});
});

function computerPlay() {
let result = 'scissors';
const number = Math.floor(Math.random() * 999);

if (number % 3 === 0) {
result = 'rock';
}
if (number % 3 === 1) {
result = 'paper';
}

return result;

let result = 'scissors';
const number = Math.floor(Math.random() * 999);

if (number % 3 === 0) {
result = 'rock';
}
if (number % 3 === 1) {
result = 'paper';
}

return result;
}

function playRound(playerSelection) {
computer = computerPlay();
player = playerSelection;
removeUserColor();
computerColor(computer);

if (
(player == 'rock' && computer == 'scissors') ||
(player == 'paper' && computer == 'rock') ||
(player == 'scissors' && computer == 'paper')
) {
playerScore++;
userScore.textContent = `${playerScore}`;
result.textContent = `You won round #${roundCount}`;

if (playerScore == 5) {
result.textContent = `You WON! You got 5 points in ${roundCount} rounds!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}
roundCount++;
roundNum.textContent = `${roundCount}`;
} else if (player == computer) {
roundCount++;
roundNum.textContent = `${roundCount}`;
result.textContent = `This round is draw. You both choose same.`;
} else {
computerScore++;
compScore.textContent = `${computerScore}`;
result.textContent = `You lost round #${roundCount}`;

if (computerScore == 5) {
result.textContent = `You suck! You lost to a Computer in ${roundCount} rounds! Go and do something useful!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
}
computer = computerPlay();
player = playerSelection;
removeUserColor();
computerColor(computer);

if (
(player == 'rock' && computer == 'scissors') ||
(player == 'paper' && computer == 'rock') ||
(player == 'scissors' && computer == 'paper')
) {
playerScore++;
userScore.textContent = `${playerScore}`;
result.textContent = `You won round #${roundCount}`;

if (playerScore == 5) {
result.textContent = `You WON! You got 5 points in ${roundCount} rounds!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
} else if (player == computer) {
roundCount++;
roundNum.textContent = `${roundCount}`;
result.textContent = `This round is draw. You both choose same.`;
} else {
computerScore++;
compScore.textContent = `${computerScore}`;
result.textContent = `You lost round #${roundCount}`;

if (computerScore == 5) {
result.textContent = `You suck! You lost to a Computer in ${roundCount} rounds! Go and do something useful!`;
resultContent.insertAdjacentElement('afterend', newGame);
disableButtons();
}

roundCount++;
roundNum.textContent = `${roundCount}`;
}
}

function computerColor(computer) {
if (computer === 'rock') {
removeColor();
computerRock.classList.add('computerPick');

} else if (computer === 'paper') {
removeColor();
computerPaper.classList.add('computerPick');
} else {
removeColor();
computerScissors.classList.add('computerPick');
}
if (computer === 'rock') {
removeColor();
computerRock.classList.add('computerPick');
} else if (computer === 'paper') {
removeColor();
computerPaper.classList.add('computerPick');
} else {
removeColor();
computerScissors.classList.add('computerPick');
}
}

function removeColor() {
computerRock.classList.remove('computerPick');
computerPaper.classList.remove('computerPick');
computerScissors.classList.remove('computerPick');
computerRock.classList.remove('computerPick');
computerPaper.classList.remove('computerPick');
computerScissors.classList.remove('computerPick');
}

computerRock.addEventListener('transitionend', removeColor);
Expand All @@ -163,4 +161,4 @@ newGame.classList.add('button', 'refresh');
newGame.addEventListener('mouseover', refreshHover);
newGame.addEventListener('mouseleave', removeHover);
newGame.addEventListener('click', refreshHover);
newGame.addEventListener('click', refreshPage);
newGame.addEventListener('click', refreshPage);

0 comments on commit 57fd59a

Please sign in to comment.