<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock paper and scissors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="game">
<div class="score">
<div class="player-score">
<h2>Player</h2>
<p>0</p>
</div>
<div class="computer-score">
<h2>Computer</h2>
<p>0</p>
</div>
</div>
<div class="intro">
<h3>Rock Paper and Scissors</h3>
<button>Lets Play</button>
</div>
<div class="match fadeOut">
<h2 class="winner">Choose an option</h2>
<div class="hands">
<img class="player-hand" src="Assets/rock.png" alt="">
<img class="computer-hand" src="Assets/rock.png" alt="">
</div>
<div class="options">
<button class="rock">rock</button>
<button class="paper">paper</button>
<button class="scissors">scissors</button>
</div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
CSS
/* Css reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
height: 100vh;
background-color: purple;
font-family: sans-serif;
}
.score{
color: yellow;
height: 20vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.score h2{
font-size: 30px;
}
.score p{
text-align: center;
padding: 10px;
font-size: 25px;
}
.intro{
color: greenyellow;
height: 50vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
transition: opacity 0.5s ease;
/* opacity: 0; */
}
.intro h3{
font-size: 50px;
}
.intro button,.match button{
width: 150px;
height: 50px;
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
background-color: turquoise;
outline: none;
border: 2px solid white;
border-radius: 10px;
cursor: pointer;
}
.match{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: opacity 0.5s ease 0.5s;
/* opacity: 0; */
}
.winner{
color: white;
text-align: center;
font-size: 35px;
}
.hands,.options{
display: flex;
justify-content: space-around;
align-items: center;
margin: 20px;
}
/* need to rotate players hand */
.player-hand{
transform: rotateY(180deg);
}
/* creating the utility classes
fadein and fadeout */
.fadeIn{
opacity: 1;
pointer-events: all;
}
.fadeOut{
opacity: 0;
pointer-events: none;
}
/* animation here
*/
@keyframes shakePlayer{
0%{
transform: rotateY(180deg) translateY(0px);
}
15%{
transform: rotateY(180deg) translateY(-50px);
}
25%{
transform: rotateY(180deg) translateY(0px);
}
35%{
transform: rotateY(180deg) translateY(-50px);
}
50%{
transform: rotateY(180deg) translateY(0px);
}
65%{
transform: rotateY(180deg) translateY(-50px);
}
75%{
transform: rotateY(180deg) translateY(0px);
}
85%{
transform: rotateY(180deg) translateY(-50px);
}
100%{
transform: rotateY(180deg) translateY(0px);
}
}
@keyframes shakeComputer{
0%{
transform:translateY(0px);
}
15%{
transform: translateY(-50px);
}
25%{
transform: translateY(0px);
}
35%{
transform: translateY(-50px);
}
50%{
transform: translateY(0px);
}
65%{
transform: translateY(-50px);
}
75%{
transform: translateY(0px);
}
85%{
transform: translateY(-50px);
}
100%{
transform: translateY(0px);
}
}
Javascript....................
// We are creating the different functions in the js
//Game function
const game = () => {
// scores of player and computer
let pScore = 0;
let cScore = 0;
// creating start game function
const startGame = () => {
// taking play button, intro screen and match screen
const playButton = document.querySelector('.intro button')
const introScreen = document.querySelector('.intro')
const matchScreen = document.querySelector('.match')
// When someone clicks on play then do the following
playButton.addEventListener('click', () => {
introScreen.classList.add('fadeOut');
matchScreen.classList.add('fadeIn');
matchScreen.classList.remove('fadeOut')
});
}
//play match funtion
const playMatch = () => {
// taking option buttons , player hand and computer hand
const options = document.querySelectorAll('.options button');
const playerHand = document.querySelector('.player-hand');
const computerHand = document.querySelector('.computer-hand');
// getting computer options by generating random numbers
const computerOptions = ['rock', 'paper', 'scissors'];
const hands = document.querySelectorAll('.hands img');
hands.forEach(hand => {
//for shaking the hands
hand.addEventListener('animationend', function () {
this.style.animation = '';
})
})
//taking the options and doing accordingly
options.forEach(option => {
option.addEventListener('click', function () {
//computer's choice
// generating random number between 1 and 3
const computerNumber = Math.floor(Math.random() * 3);
// selecting rock paper scissor based on the number generated
const computerChoice = computerOptions[computerNumber];
setTimeout(() => {
compare(this.textContent, computerChoice);
// update the images
playerHand.src = `Assets/${this.textContent}.png`
computerHand.src = `Assets/${computerChoice}.png`
}, 2000)
// animating the hands up and down
playerHand.style.animation = 'shakePlayer 2s ease';
computerHand.style.animation = 'shakeComputer 2s ease';
})
})
}
//updating the score
const updateScore = ()=>{
const playerScore = document.querySelector('.player-score p');
const computerScore = document.querySelector('.computer-score p');
playerScore.textContent = pScore;
computerScore.textContent = cScore;
}
const compare = (playerChoice,computerChoice)=>{
const winner = document.querySelector('.winner')
//tie
if(playerChoice === computerChoice){
winner.textContent = "It is a tie"
return;
}
//rock
if(playerChoice === 'rock'){
if(computerChoice === 'scissors'){
winner.textContent = "Player wins";
pScore++;
updateScore();
return;
}
else{
winner.textContent = "Computer wins";
cScore++
updateScore();
return;
}
}
//paper
if(playerChoice === 'paper'){
if(computerChoice === 'scissors'){
winner.textContent = "Computer wins";
cScore++
updateScore();
return;
}
else{
winner.textContent = "Player wins";
pScore++
updateScore();
return;
}
}
//scissors
if(playerChoice === 'scissors'){
if(computerChoice === 'paper'){
winner.textContent = "Player wins";
pScore++
updateScore();
return;
}
else{
winner.textContent = "Computer wins";
cScore++
updateScore();
return;
}
}
}
startGame();
playMatch();
}
game();
No comments:
Post a Comment