ROCK PAPER AND SCISSORS MINI PROJECT WITH HTML,CSS AND JAVASCRIPT

ROCK PAPER AND SCISSORS MINI PROJECT WITH HTML,CSS AND JAVASCRIPT


video: Coder Anamika YT Channel


HTML CODE: 

<!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 class="container">
        <div class="heading">
            <h1>Welcome to Rock, Paper and Scissors Game!</h1>
        </div>
        <div class="options" id="rock">Rock</div>
        <div class="options" id="Paper">Paper</div>
        <div class="options" id="Scissors">Scissors</div>

        <div class="status">
            <div class="finalOut" id="Comp"></div>
            <div class="finalOut" id="You"></div>
            <div class="finalOut" id="won"></div>
        </div>
    </div>
</body>
<script src="index.js"></script>
</html>

CSS CODE:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(#64e8de , #8a64eb);
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading{
    position: absolute;
    top: 155px;
}

.options{
    /* background-color: white;s */
    height: 200px;
    width: 200px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
}

.options:hover{
    animation: onHover 0.5s ease 0s infinite alternate;
    transform: rotate(20deg);  
}
@keyframes onHover {
    from{
        border: 7px solid #00ffed;
    }    
    to{
        border: 7px solid #0088ba;
    }    
}
#rock{
    background-image: url('rock.png');
    background-size: cover;
}
#Paper{
    background-image: url('paper.png');
    background-size: cover;
}
#Scissors{
    background-image: url('scissor.png');
    background-size: cover;
}
.status{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 100vw;
    /* background: #000; */;
    bottom: 30px;
    position: absolute;
}

.finalOut{
    margin: 50px;
    display: flex;
}

.js{
    color: #fb541c;
}

JS CODE:

// console.log('Hello');

let rock = document.getElementById("rock");
let Paper = document.getElementById("Paper");
let Scissor = document.getElementById("Scissors");

let Compchoice;
let UserChoice;

function botPlay() {
    valArr = ['Rock', 'Paper', 'Scissors'];
    randChoice = Math.floor(Math.random() * 3);
    Compchoice = valArr[randChoice];
    console.log('Comp choice is ', Compchoice);
}
// botPlay(s)

rock.addEventListener('click', () => {
    UserChoice = 'Rock';
    console.log('rock');
    botPlay();
    whoiswinner(Compchoice, UserChoice);
})

Paper.addEventListener('click', () => {
    UserChoice = 'Paper';
    console.log('Paper');
    botPlay();
    whoiswinner(Compchoice, UserChoice);
})

Scissor.addEventListener('click', () => {
    UserChoice = 'Scissors';
    console.log('Scissor');
    botPlay();
    whoiswinner(Compchoice, UserChoice);
})
let stat;
function whoiswinner(Compchoice, UserChoice) {
    if (Compchoice == UserChoice) {
        won = 'It is a Draw Match👀'
        // console.log('It is a draw match');
        stat = 'draw';
        finalOut(Compchoice , UserChoice , won)
        bgChange(stat)
    }

    else if ((Compchoice == 'Rock' && UserChoice == 'Scissors') || (Compchoice == 'Paper' && UserChoice == 'Rock') || (Compchoice == 'Scissors' && UserChoice == 'Paper')) {
        // console.log('Computer Won');
        won = 'You lose💀';
        stat = 'lose';
        finalOut(Compchoice , UserChoice , won)
        bgChange(stat)
    }

    else if ((UserChoice == 'Rock' && Compchoice == 'Scissors') || (UserChoice == 'Paper' && Compchoice == 'Rock') || (UserChoice == 'Scissors' && Compchoice == 'Paper')) {
        // console.log('You Won');
        won = 'You win😀'
        stat = 'won';
        finalOut(Compchoice , UserChoice , won)
        bgChange(stat)
    }
    else {
        console.log('An Error Occured! Try Again');
    }
}


function finalOut(compstatus , Yourstatus , finalwin){
    let comp = document.getElementById('Comp')
    let You = document.getElementById('You')
    let won = document.getElementById('won')
    comp.innerHTML = `<h1>Computer Choose :  <span class="js">${compstatus}</span></h1>`
    You.innerHTML = `<h1>You Choose : <span class="js">${Yourstatus}</span></h1>`
    won.innerHTML = `<h1>Final Winner : <span class="js">${finalwin}</span></h1>`
}

function bgChange(stat){
    let container = document.querySelector('.container')
    if(stat=='draw'){
        container.style.background = 'linear-gradient(white , black)';
        audio = new Audio('Draw.mp3');
        audio.play();
        setTimeout(reloadWin , 3000);        
    }
    else if(stat=='lose'){
        container.style.background = 'linear-gradient(red , orange)';
        audio = new Audio('failtuta.mp4');
        audio.play();
        setTimeout(reloadWin , 3000);
    }
    else if(stat=='won'){
        container.style.background = 'linear-gradient(green , aquamarine)';
        audio = new Audio('bhai.mp3');
        audio.play();
        setTimeout(reloadWin , 3000);
    }
}


function reloadWin(){
    window.location.reload();
}

IMAGES USED: You can download it!








 


Comments

Post a Comment