Skip to content

Commit

Permalink
Initial GUI Rock Paper Scissors
Browse files Browse the repository at this point in the history
  • Loading branch information
@dan-Scripts
dan-Scripts committed Nov 26, 2022
1 parent 27fd483 commit 26aabb3
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 67 deletions.
25 changes: 24 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,33 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Rock | Paper | Scissors</title>
</head>
<body>

<div id="main">
<div class="cards flex">
<button class="btn" id="rock">Rock</button>
<button class="btn" id="paper">Paper</button>
<button class="btn" id="scissors">Scissors</button>
</div>
<div id="display">
<div class="comp result">
<p><span>Computer</span> results !</p>
<div class="choice box">---</div>
<div class="points box">0</div>
</div>

<div class="user result">
<p><span>Your</span> results !</p>
<div class="choice box">---</div>
<div class="points box">0</div>
</div>
</div>
<div class="pop-up flex">
Let's Go!
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
152 changes: 86 additions & 66 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,118 @@
/* *************************
/*
Rock Paper Scissors ... GAME
##################################### */

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

/*
Getting variables from document
*/
const buttons = document.querySelectorAll('.btn');

// to get computer choice
function getComputerChoice(){
const choice = Math.floor (Math.random() * 3);

switch (choice) {
case 0:
return "rock";
break;
case 1:
return "paper";
break;
case 2:
return "scissors";
break;
}
};
const compChoiceDisplay = document.getElementsByClassName('choice')[0];
const userChoiceDisplay = document.getElementsByClassName('choice')[1];

// single round of gamePlay!
const compPointsDisplay = document.getElementsByClassName('points')[0];
const userPointsDisplay = document.getElementsByClassName('points')[1];
const popUp = document.querySelector('.pop-up');
/*
Changing GUI Displays
*/
let compWin = 0;
let userWin = 0;
let compChoice;

function displays(choice, e){

//To make first letter uppercase
compChoiceDisplay.innerText = choice.slice(0,1).toUpperCase() + choice.slice(1);

userChoiceDisplay.innerText = e.target.innerText;
compPointsDisplay.innerText = compWin;
userPointsDisplay.innerText = userWin;
};

function playRound(compSelection, playerSelection){

if(compSelection === playerSelection){
return [3,`It's draw game the computer also played ${compSelection}`];
popUp.innerText = `It's draw game the computer also played ${compSelection}`;
}

else {
switch (true){
//User win cases
case (compSelection === "rock" && playerSelection === "paper"):
return [1,`You won ${playerSelection} beats ${compSelection}!!`];
case (compSelection === "paper" && playerSelection === "scissors"):
return [1,`You won ${playerSelection} beats ${compSelection}!!`];
case (compSelection === "scissors" && playerSelection === "rock"):
return [1,`You won ${playerSelection} beats ${compSelection}!!`];
popUp.innerHTML = `<p> You won!! ${playerSelection} beats ${compSelection}!! </p>`;
userWin++;
break;

//Computer win cases
case (compSelection === "rock" && playerSelection === "scissors"):
return [2,`You loose ${compSelection} beats ${playerSelection}!!`];
case (compSelection === "paper" && playerSelection === "rock"):
return [2,`You loose ${compSelection} beats ${playerSelection}!!`];
case (compSelection === "scissors" && playerSelection === "paper"):
return [2,`You loose ${compSelection} beats ${playerSelection}!!`];
break;
default:
return [3,"You Entered Wrong selection!"];
popUp.innerHTML = `<p> You loose ${compSelection} beats ${playerSelection}!! </p>`;
compWin++;
break;
}
}
}

// function to play 5 rounds
function game(rounds){
let compWin= 0;
let userWin = 0;
// FUNCTION TO PLAY 5 ROUNDS
function game(buttons){
buttons.forEach(btn => {
btn.addEventListener('click',e=>{
compChoice = getComputerChoice();

for(let i=0; i<5; i++){
playRound(compChoice, e.target.innerText.toLowerCase());
displays(compChoice, e);
popUp.classList.remove('none');
setTimeout(()=> popUp.classList.add('none'),1000);

// getting user choice
let userChoice = prompt("Enter Your Choice");
userChoice = userChoice.toLowerCase();
if(compWin === 5 || userWin === 5){

let last = document.createElement('div');
last.setAttribute('class','last flex');

rounds = playRound(getComputerChoice(), userChoice);

const [digit, text] = rounds;
let finalRes = document.createElement('div');
last.appendChild(finalRes);
finalRes.classList.add('finals');

if(digit === 1){
userWin++;
console.log(text);
}
document.body.appendChild(last);

else if(digit === 2){
compWin++;
console.log(text);
}
let confButton = document.createElement('button');
confButton.classList.add('confirm');
confButton.innerText = 'Confirm';

else {
console.log(text);
}
}
confButton.onclick = ()=> location.reload();

if(userWin > compWin){
alert("You Won! Congratulations");
}
else if(userWin == compWin){
alert("!! It's Draw Game");
}
else {
confirm("You Lost! But can still try..."+"\n"+"Try again??");
if(true){
game();
}
}
let cancButton = document.createElement('button');
cancButton.classList.add('cancel');
cancButton.innerText = 'Cancel';

if(compWin == 5 && userWin < 5){
cancButton.onclick = ()=>{
last.style.display = 'none';
};
finalRes.innerHTML = '<p>You loose! Play Again?</p>';
finalRes.append(confButton, cancButton);
}
if(userWin == 5 && compWin < 5){
cancButton.onclick = ()=>{
last.style.display = 'none';
};
finalRes.innerHTML = '<p>Congratulation! You Won.. Play Again?</p>';
finalRes.append(confButton, cancButton);
} else {
finalRes.innerHTML = '<p>Play Again?</p>';
finalRes.appendChild(confButton);
}
};
});
});
}
game();
game(buttons);
163 changes: 163 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
/* reset */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
/* background-color: aqua; */
height: 100vh;
font-family: sans-serif;
}

#main {
/* height: 500px; */
/* overflow: hidden; */
/* width: 500px; */
/* opacity: .1; */
z-index: 1;
position: relative;
}

/* main */
.cards {
height: 50vh;
background-color: azure;
gap: 80px;
}

.btn {
height: 120px;
width: 350px;
border: none;
border-radius: 5px;
font-size: 52px;
font-weight: bolder;
color: #fff;
background-color: rgb(86, 3, 86);
box-shadow: 0 0 25px 1px rgb(86, 3, 86),
0 0 25px 1px black;
cursor: pointer;
transition: all 250ms 100ms ease-out;
outline: none;
}
.btn:hover {
height: 160px;
font-size: 55px;
background-color: yellow;
box-shadow: none;
color: rgb(86, 3, 86);
/* border-radius: 25px; */
}

/* results */
#display {
height: calc(50vh - 50px);
margin: 25px 50px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 50px;
position: relative;
}

.result p {
height: 70px;
/* background-color: chocolate; */
text-align: center;
font-size: 32px;
letter-spacing: 2px;
padding-top: 15px;
font-weight: 900;
}
.result span {
font-style: italic;
color: rgb(86, 3, 86);
font-size: 40px;
}
.box {
height: 100px;
width: 70%;
margin: 15px auto;
padding: calc((100px - 32px)/2);
background-color: #fff;
border-radius: 20px;
text-align: center;
font-weight: bold;
font-size: 32px;
border: 5px solid rgb(201, 97, 201);
}

.pop-up {
transition: 3s ease-out;
width: 600px;
margin: auto;
position: fixed;
top: 5%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
background-color: transparent;
color: #333;
text-align: center;
font-size: 23px;
line-height: 50px;
border-radius: 10px;
z-index: 200;
cursor: progress;
}

.last {
height: 100vh;
width: 100vw;
background-color: #222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
z-index: 100;
/* color: #fff; */
opacity: .9;
}

.finals {
width: 350px;
height: 150px;
color: darkkhaki;
background-color: #000;
padding: 15px 45px;
opacity: 1;
text-align: center;
font-size: 22px;
box-shadow: 0 0 15px 15px;
}

.confirm, .cancel {
height: 35px;
width: 90px;
padding: 4px 12px;
color: #fff;
border: 2px solid black;
margin: 30px 15px;
border-radius: 5px;
box-shadow: 0 0 5px;
font-weight: 700;
font-size: 18px;
text-align: center;
}
.confirm {
background-color: blue;
}
.cancel {
background-color: blueviolet;
}

.flex{
display: flex;
justify-content: center;
align-items: center;
}

.none {
display: none;
}

0 comments on commit 26aabb3

Please sign in to comment.