Skip to content

added rock-paper-scissors game #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 22, 2023
Merged

added rock-paper-scissors game #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Fronted Projects/Rock-Paper-Scissors/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# I made a simple Rock-Paper-Scissors Game using HTML, CSS, JavaScript. It is a very beginner friendly project as the code written here is really easy to understand. You can have a look at the project...
40 changes: 40 additions & 0 deletions Fronted Projects/Rock-Paper-Scissors/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="game_name">Rock Paper Scissors Game</div>


<div id="direction">Choose your Move: </div>


<div class="choices">

<button id="rock">&#x1F44A;</button>

<button id="paper">&#x1f590;</button>
<button id="scissors">&#x270c;</button>
</div>


<div class="result">
<p></p>
</div>

<div class="score_board">
<span class="score_board">Your Score: </span>
<span id="user_score">0</span>
<span class="score_board">Computer Score: </span>
<span id="comp_score">0</span>
</div>


<script src="index.js"></script>
</body>
</html>
93 changes: 93 additions & 0 deletions Fronted Projects/Rock-Paper-Scissors/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
let userScore=0;
let compScore= 0;
const userScore_span=document.getElementById("user_score");
const compScore_span=document.getElementById("comp_score");
const scoreBoard_div=document.querySelector(".score_board");
const result_p=document.querySelector(".result>p");
const rock_div=document.getElementById("rock")
const paper_div=document.getElementById("paper")
const scissors_div=document.getElementById("scissors")

function getComputerChoice(){
const choices=['rock', 'paper', 'scissors'];
const randomNumber=(Math.floor(Math.random()* 3));
return choices[randomNumber];
}

function convertToWord(letter){
if(letter =="rock") return "Rock";
if(letter =="paper") return "Paper";
return "Scissors";
}

//here we are making a function where the user wins
function win(userChoice, compChoice){
userScore++;
userScore_span.innerHTML = userScore;
compScore_span.innerHTML = compScore;
result_p.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(compChoice)}. You WIN! :)`;

}

//here we are making a fuction where the user loses
function lose(userChoice,compChoice){
compScore++;
userScore_span.innerHTML = userScore;
compScore_span.innerHTML = compScore;
result_p.innerHTML = `${convertToWord(userChoice)} loses to ${convertToWord(compChoice)}. You LOST! :(`;

}

//here we are making a function where the user and the computer ties
function tie(userChoice,compChoice){
result_p.innerHTML = `${convertToWord(userChoice)} equals ${convertToWord(compChoice)}. It's a DRAW!`;

}

function game(userChoice){
const compChoice= getComputerChoice();

//here we are putting the winning conditions
switch(userChoice + compChoice){
case "rockscissors":
case "paperrock":
case "scissorspaper":
win(userChoice, compChoice);
break;

//here we are putting the losing conditions
case "rockpaper":
case "paperscissors":
case "scissorsrock":
lose(userChoice, compChoice);
break;

//here we are putting the conditions for a draw
case "rockrock":
case "paperpaper":
case "scissorsscissors":
tie(userChoice, compChoice);
break;
}

}




function main(){


rock_div.addEventListener('click', function(){
game("rock");
})
paper_div.addEventListener('click', function(){
game("paper");
})
scissors_div.addEventListener('click', function(){
game("scissors");
})

}

main();
97 changes: 97 additions & 0 deletions Fronted Projects/Rock-Paper-Scissors/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
body{
background-color:rgb(117, 117, 198);
font-family:"Arial",sans-serif;
margin:0;
padding:0;
}

#game_name{
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 3em;
text-align: center;
margin-top: 50px;
}

#direction{
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 1.5em;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

.choices{
text-align: center;
margin-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;

}




#rock{
background-color:hsl(194, 86%, 67%);
font-size: 4rem;
margin: 0px 10px;
border-radius: 55%;
margin: 0px 10px;


}
#paper{
background-color:hsl(114, 68%, 51%);
font-size: 4rem;
margin: 0px 10px;
border-radius: 55%;



}
#scissors{
background-color:hsl(0, 98%, 59%);
font-size: 4rem;
margin: 0px 10px;
border-radius: 55%;
margin: 0px 10px;

}

.score_board{
text-align: center;
margin-top: 25px;
font-weight: bold;
font-size: 25px;
color: rgb(22, 21, 21);
margin-bottom: 50px;

}

.result{
color: rgb(14, 14, 14);
font-weight: bold;
font-size: 1.9em;
text-align: center;
margin-top: 40px;

}

#user_score{
color:rgb(8, 247, 44);
text-align: center;
margin-top: 25px;
font-weight: bold;
font-size: 25px;
}
#comp_score{
color: rgb(165, 29, 29);
text-align: center;
margin-top: 25px;
font-weight: bold;
font-size: 25px;
}