diff --git a/README.md b/README.md new file mode 100644 index 0000000..542c4cd --- /dev/null +++ b/README.md @@ -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. diff --git a/index.html b/index.html index 451c9e8..cba89fd 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,58 @@ - - - - - Rock Paper Scissors - - - - -
-

Rock Paper Scissors

-

First to 5 points wins

-
-

Round:

-

1

-
-
-
-
-

Human

-
-

Score:

-

0

-
-
-
- - - -
+ + + + + Rock Paper Scissors + + + + +
+

Rock Paper Scissors

+

First to 5 points wins

+
+

Round:

+

1

-
-
-

Computer

-
-

Score:

-

0

+
+
+
+

Human

+
+

Score:

+

0

+
+
+
+ + +
-
- - - +
+
+

Computer

+
+

Score:

+

0

+
+
+
+ + + +
-
-
-
-

-
-
- - - \ No newline at end of file +
+
+

+
+
+ + diff --git a/script.js b/script.js index ad8b79e..c10d8c9 100644 --- a/script.js +++ b/script.js @@ -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); @@ -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); \ No newline at end of file +newGame.addEventListener('click', refreshPage);