diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..9ac4278 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# Rock_Paper_Scissors + game diff --git a/images/paper-emoji.png b/images/paper-emoji.png new file mode 100644 index 0000000..6ecbc11 Binary files /dev/null and b/images/paper-emoji.png differ diff --git a/images/rock-emoji.png b/images/rock-emoji.png new file mode 100644 index 0000000..0aa725b Binary files /dev/null and b/images/rock-emoji.png differ diff --git a/images/scissors-emoji.png b/images/scissors-emoji.png new file mode 100644 index 0000000..32b5566 Binary files /dev/null and b/images/scissors-emoji.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..314732a --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + Rock Paper Scissors + + + + +
+

Rock Paper Scissors

+ + + + + + +

+

+

+ + + + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4fd5672 --- /dev/null +++ b/script.js @@ -0,0 +1,82 @@ +let score = JSON.parse(localStorage.getItem('score')) || { + wins: 0, + losses: 0, + ties: 0 +}; + +updateScoreElement(); + + +function playGame(playerMove) { + const computerMove = pickComputerMove(); + + let result = ''; + + if (playerMove === 'scissors') { + if (computerMove === 'rock') { + result = 'You lose.'; + } else if (computerMove === 'paper') { + result = 'You win.'; + } else if (computerMove === 'scissors') { + result = 'Tie.'; + } + + } else if (playerMove === 'paper') { + if (computerMove === 'rock') { + result = 'You win.'; + } else if (computerMove === 'paper') { + result = 'Tie.'; + } else if (computerMove === 'scissors') { + result = 'You lose.'; + } + + } else if (playerMove === 'rock') { + if (computerMove === 'rock') { + result = 'Tie.'; + } else if (computerMove === 'paper') { + result = 'You lose.'; + } else if (computerMove === 'scissors') { + result = 'You win.'; + } + } + + if (result === 'You win.') { + score.wins += 1; + } else if (result === 'You lose.') { + score.losses += 1; + } else if (result === 'Tie.') { + score.ties += 1; + } + + localStorage.setItem('score', JSON.stringify(score)); + + updateScoreElement(); + + document.querySelector('.js-result').innerHTML = result; + + document.querySelector('.js-moves').innerHTML = `You + + +Computer`; +} + +function updateScoreElement() { + document.querySelector('.js-score') + .innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`; +} + +function pickComputerMove() { + const randomNumber = Math.random(); + + let computerMove = ''; + + if (randomNumber >= 0 && randomNumber < 1 / 3) { + computerMove = 'rock'; + } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) { + computerMove = 'paper'; + } else if (randomNumber >= 2 / 3 && randomNumber < 1) { + computerMove = 'scissors'; + } + + return computerMove; +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b96ece2 --- /dev/null +++ b/styles.css @@ -0,0 +1,56 @@ +body { + background-color: rgb(25, 25, 25); + font-family: Arial; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + color: #333; +} +.container { + max-width: 400px; + margin: 50px auto; + background-color: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + +} + +.title { + font-size: 30px; + font-weight: bold; +} + +.move-icon { + height: 50px; +} + +.move-button { + background-color: transparent; + border: 3px solid rgb(40, 39, 39); + width: 120px; + height: 120px; + border-radius: 60px; + margin-right: 10px; + cursor: pointer; +} + +.result { + font-size: 25px; + font-weight: bold; + margin-top: 50px; +} + +.score { + margin-top: 60px; +} + +.reset-score-button { + background-color: rgb(25, 25, 25); + border: none; + font-size: 15px; + padding: 8px 15px; + cursor: pointer; + color: white; + border-radius: 34px; +} \ No newline at end of file