Creating Rock Paper Scissor game with HTML , CSS and JavaScript
Creating Rock Paper Scissor game (HTML,CSS and JavaScript)
:
This game is created with HTML , CSS and JavaScript :
Check out the video:
Source codes ::
HTML::
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script</title>
<link rel="stylesheet" href="style.css">
<body>
<header>
<h2>ROCK PAPER SCISSOR</h2>
</header>
<p id="action-message"> Make Your Move </p>
<div class="choices">
<div class="choice" id="r">
<img src="rock.png" alt="">
</div>
<div class="choice" id="p">
<img src="paper.png" alt="">
</div>
<div class="choice" id="s">
<img src="scissor.png" alt="">
</div>
</div>
<div class="score-board">
<div id="user-level" class="badge">USER</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
<div id="computer-level" class="badge">COMP</div>
</div>
<div class="result">
<p>Rock Paper Scissor</p>
</div>
<script src="index.js"></script>
</body>
</html>
-----------------------------------------------------------
CSS::
-----------------------------------------------------------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
background: white;
padding: 20px;
font-weight: bold;
}
h2{
color: #1f1f1f;
text-align: center;
font: bold;
}
body{
background-color: #1f1f1f;
}
.score-board{
margin: 20px auto;
border: 3px solid white;
border-radius: 4px;
width: 300px;
color: white;
font-size: 35px;
text-align: center;
padding: 15px 25px;
}
.badge{
background: chocolate;
font-size: 20px;
padding: 4px 12px;
display: inline-block;
}
#user-level{
/* position: absolute;
top: 335px;
left: 185px; */
}
#computer-level{
/* position: absolute;
top: 335px;
left: 400px ; */
}
.result{
font-size: 35px;
color: white;
}
.result > p{
text-align: center;
font-weight: bold;
}
#action-message{
color: white;
text-align: center;
font-size: 30px;
margin: 10px;
font-weight: bold;
}
.choices{
margin: 50px 0;
text-align: center;
}
.choice{
display: inline-block;
border: 4px solid white;
border-radius: 25%;
margin: 0px 5px;
transition: all 0.3s ease;
}
.choice:hover{
cursor: pointer;
background: rgb(0, 106, 122);
}
.green-glow{
border: 4px solid #4dcc7d;
box-shadow: 0 0 10px #31b43a;
background-color: #31b43a;
}
.red-glow{
border: 4px solid #fc121b;
box-shadow: 0 0 10px #d01115;
background-color: #d01115;
}
.gray-glow{
border: 4px solid #464647;
box-shadow: 0 0 10px #25292b;
background-color: #25292b;
}
-----------------------------------------------------------
-----------------------------------------------------------
var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
var result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissor_div = document.getElementById("s");
function getComputerChoice(){
const choices = ['r','p','s'];
const randomNumber = Math.floor(Math.random()* 3);
return choices[randomNumber];
}
function convertToWord(letter)
{
if(letter == 'r')return "rock";
if(letter == 'p')return "paper";
return "scissor";
}
function win(userChoice, computerChoice)
{
userScore++;
userScore_span.innerHTML = userScore;
computerScore_span.innerHTML = computerScore;
const smalluserWord= "(User)".fontsize(3).fontcolor("orange").sup();
const smallcompWord= "(Comp)".fontsize(3).fontcolor("red").sup();
result_p.innerHTML = convertToWord(userChoice)+smalluserWord+" beats "+convertToWord(computerChoice)+smallcompWord+" You Win";
document.getElementById(userChoice).classList.add('green-glow');
setTimeout(function(){ document.getElementById(userChoice).classList.remove('green-glow') },700)
document.getElementById(computerChoice).classList.add('red-glow');
setTimeout(function(){ document.getElementById(computerChoice).classList.remove('red-glow') },700)
}
function lose(userChoice, computerChoice)
{
computerScore++;
userScore_span.innerHTML = userScore;
computerScore_span.innerHTML = computerScore;
const smalluserWord= "(User)".fontsize(3).fontcolor("orange").sup();
const smallcompWord= "(Comp)".fontsize(3).fontcolor("red").sup();
result_p.innerHTML = convertToWord(userChoice)+smalluserWord+" beats "+convertToWord(computerChoice)+smallcompWord+" Lose";
document.getElementById(userChoice).classList.add("red-glow");
setTimeout(function(){document.getElementById(userChoice).classList.remove('red-glow')},700)
document.getElementById(computerChoice).classList.add('green-glow');
setTimeout(function(){ document.getElementById(computerChoice).classList.remove('green-glow') },700)
}
function draw(userChoice, computerChoice)
{
userScore_span.innerHTML = userScore;
computerScore_span.innerHTML = computerScore;
const smalluserWord= "(User)".fontsize(3).fontcolor("orange").sup();
const smallcompWord= "(Comp)".fontsize(3).fontcolor("red").sup();
result_p.innerHTML = convertToWord(userChoice)+smalluserWord+" And "+convertToWord(computerChoice)+smallcompWord+" Draw";
document.getElementById(userChoice).classList.add("gray-glow");
setTimeout(function(){document.getElementById(userChoice).classList.remove('gray-glow')},700)
document.getElementById(computerChoice).classList.add('gray-glow');
setTimeout(function(){ document.getElementById(computerChoice).classList.remove('gray-glow') },700)
}
function game(userChoice){
const computerChoice = (getComputerChoice());
switch(userChoice + computerChoice)
{
case "rs":
case "pr":
case "sp":
win(userChoice, computerChoice);
break;
case "rp":
case "ps":
case "sr":
lose(userChoice,computerChoice);
break;
case "rr":
case "pp":
case "ss":
draw(userChoice,computerChoice);
break;
}
}
function main(){
rock_div.addEventListener('click', function()
{
game("r");
})
paper_div.addEventListener('click', function()
{
game("p");
})
scissor_div.addEventListener('click', function()
{
game("s");
})
}
main();
-----------------------------------------------------------
-----------------------------------------------------------
Comments
Post a Comment