Skip to content

Commit ffa2016

Browse files
authored
Merge pull request #70 from kyangOrange/h25-branch
Added a simple rock paper scissors game in javascript
2 parents e61d5ea + bed5d3f commit ffa2016

File tree

3 files changed

+99
-0
lines changed

3 files changed

+99
-0
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# 🎮 Rock Paper Scissors
2+
3+
A simple browser-based Rock-Paper-Scissors game built with **HTML** and **JavaScript**.
4+
5+
---
6+
7+
## 🧩 Overview
8+
9+
This project allows a user to select **Rock**, **Paper**, or **Scissors**, then plays against the computer.
10+
The computer’s move is chosen randomly, and the result is displayed instantly on the web page.
11+
12+
---
13+
14+
## 💻 How It Works
15+
16+
### 1. HTML Interface
17+
The HTML file (`index.html`) provides:
18+
- A title and instruction header.
19+
- Three radio buttons for selecting your hand.
20+
- A **Submit** button to play.
21+
- A `<div>` element where the result is shown.
22+
23+
```html
24+
<form name="hand">
25+
<input type="radio" name="RPS" value="rock"> Rock<br>
26+
<input type="radio" name="RPS" value="paper"> Paper<br>
27+
<input type="radio" name="RPS" value="scissors"> Scissors<br>
28+
</form>
29+
<input type="button" value="Submit" onclick="game()">
30+
<div id="result"></div>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src = "RPS.js"></script>
5+
</head>
6+
<body>
7+
<h1>Make your selection</h1>
8+
<form name = "hand">
9+
<input type = "radio" name = "RPS" value = "rock">Rock<br>
10+
<input type = "radio" name = "RPS" value = "paper">Paper<br>
11+
<input type = "radio" name = "RPS" value = "scissors">Scissors<br>
12+
</form>
13+
<br>
14+
<input type = "button" value = "Submit" onclick="game()">
15+
<div id = "result"></div>
16+
</body>
17+
</html>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
function game(){
2+
randNum = Math.floor(Math.random()*3)
3+
console.log(randNum)
4+
if(hand.RPS[0].checked == true){
5+
you = "rock"
6+
}
7+
else if(hand.RPS[1].checked == true){
8+
you = "paper"
9+
}
10+
else if(hand.RPS[2].checked == true){
11+
you = "scissors"
12+
}
13+
console.log(you)
14+
if(randNum == 0){
15+
randValue = "rock"
16+
}
17+
else if(randNum == 1){
18+
randValue = "paper"
19+
}
20+
else if(randNum == 2){
21+
randValue = "scissors"
22+
}
23+
console.log(randValue)
24+
if(you == randValue){
25+
returnResult= "You and the computer both chose " + you + ", therefore it is a tie";
26+
document.getElementById("result").innerHTML = returnResult
27+
}
28+
else if(you == "rock" && randValue == "paper"){
29+
returnResult = "You chose " + you + ", the computer chose " + randValue + ", so you lose";
30+
document.getElementById("result").innerHTML = returnResult
31+
}
32+
else if(you == "rock" && randValue == "scissors"){
33+
returnResult = "You chose " + you + ", the computer chose " + randValue + ", so you win";
34+
document.getElementById("result").innerHTML = returnResult
35+
}
36+
else if(you == "scissors" && randValue == "rock"){
37+
returnResult = "You chose " + you + ", the computer chose " + randValue + ", so you lose";
38+
document.getElementById("result").innerHTML = returnResult
39+
}
40+
else if(you == "scissors" && randValue == "paper"){
41+
returnResult = "You chose " + you + ", the computer chose " + randValue + ", so you win";
42+
document.getElementById("result").innerHTML = returnResult
43+
}
44+
else if(you == "paper" && randValue == "rock"){
45+
returnResult = "You chose " + you + ", the computer chose " + randValue + ", so you win";
46+
document.getElementById("result").innerHTML = returnResult
47+
}
48+
else if(you == "paper" && randValue == "scissors"){
49+
returnResult= "You chose " + you + ", the computer chose " + randValue + ", so you lose";
50+
document.getElementById("result").innerHTML = returnResult
51+
}
52+
}

0 commit comments

Comments
 (0)