diff --git a/rock-paper-scissors/README.md b/rock-paper-scissors/README.md new file mode 100644 index 0000000..597c0e3 --- /dev/null +++ b/rock-paper-scissors/README.md @@ -0,0 +1,17 @@ +Rock Paper Scissors Game:- +A simple Rock, Paper, Scissors game where you play against the computer! Designed for beginners using only basic HTML, CSS, and JavaScript (loops, functions, and variables).​ + +Features:- +Play Rock, Paper, Scissors against a computer opponent.​ + +Easy-to-read, beginner-friendly code structure. + +Game Rules:- +Rock beats Scissors + +Scissors beats Paper + +Paper beats Rock + +If both you and the computer choose the same option, it’s a tie. + diff --git a/rock-paper-scissors/index.html b/rock-paper-scissors/index.html new file mode 100644 index 0000000..db469e8 --- /dev/null +++ b/rock-paper-scissors/index.html @@ -0,0 +1,18 @@ + + + + + Rock Paper Scissors + + + +

Rock Paper Scissors

+
+ + + +
+

+ + + diff --git a/rock-paper-scissors/script.js b/rock-paper-scissors/script.js new file mode 100644 index 0000000..e558760 --- /dev/null +++ b/rock-paper-scissors/script.js @@ -0,0 +1,20 @@ +function play(playerChoice) { + var choices = ['rock', 'paper', 'scissors']; + var computerChoice = choices[Math.floor(Math.random() * 3)]; + var result = ''; + + if (playerChoice === computerChoice) { + result = "It's a tie! You both chose " + playerChoice + "."; + } else if ( + (playerChoice === 'rock' && computerChoice === 'scissors')|| + (playerChoice === 'paper' && computerChoice === 'rock')|| + (playerChoice === 'scissors' && computerChoice === 'paper') + ) { + result = "You win! " + playerChoice + " beats " + computerChoice + "."; + } else { + result = "You lose! " + computerChoice + " beats " + playerChoice + "."; + } + + document.getElementById('result').textContent = result; +} + diff --git a/rock-paper-scissors/style.css b/rock-paper-scissors/style.css new file mode 100644 index 0000000..ea16f94 --- /dev/null +++ b/rock-paper-scissors/style.css @@ -0,0 +1,26 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin-top: 50px; + background: #e5eeff; +} + +button { + padding: 12px 24px; + margin: 10px; + font-size: 18px; + border-radius: 8px; + border: none; + background: #4973ab; + color: white; + cursor: pointer; +} +button:hover { + background: #395986; +} + +#result { + font-size: 22px; + margin-top: 30px; + color: #222; +}