Rock-Paper-Scissor Game in Pure JavaScript
*html css and javascript written in chronological order*
Sneak peakk of the game -
HTML -
<div class="navbar"> <h2>ROCK-PAPER-SCISSOR-GAME</h2></div>
<div class="selected">
<div id="demo">Computer Selected Nothing</div>
<h2>You <span id="youselected">Selected Nothing</span></h2>
<div id="result">Result is : </div>
<div >Computer Score <span id="scorec" >0</span></div>
<div >Your Score <span id="scoreu">0</span></div>
<div>Draw <span id="draw1">0</span></div>
</div>
<div class="computer">
<div id="stone1">
<img src="stone.png" alt="">
</div>
<div id="paper1">
<img src="paper.png" alt="">
</div>
<div id="scissor1">
<img src="scissor.png" alt="">
</div>
</div>
<div class="game">
<div id="stone">
<button >
<h4>SELECT : STONE</h4>
<img src="stone.png" alt="">
</button>
</div>
<div id="paper">
<button>
<h4>SELECT : PAPER</h4>
<img src="paper.png" alt="">
</button>
</div>
<div id="scissor">
<button >
<h4>SELECT : SCISSOR</h4>
<img src="scissor.png" alt="">
</button>
</div>
</div>
<script src="index.js"></script>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background-color: black;
color: white;
padding: 10px;
}
h2{
text-align: center;
}
.game{
display: flex;
justify-content: center;
}
.game img{
height: 280px;
}
.computer{
display: flex;
justify-content: center;
}
.computer img{
height: 280px;
}
#stone:hover{
background-color: rgb(255, 0, 0);
}
#paper:hover{
background-color: grey;
}
#scissor:hover{
background-color: grey;
}
.selected{
display: flex;
justify-content: space-around;
background-color: black;
color: white;
}
#result{
font-size: 25px;
}
#demo{
font-size: 25px;
}
#stone{
margin: 0px 20px;
}
#paper{
margin: 0px 20px;
}
#scissor{
margin: 0px 20px;
}
@media only screen and (max-width: 940px) {
.selected{
flex-direction: column;
align-items: center;
font-size: 20px;
}
.game{
flex-direction: column;
align-items: center;
}
#stone:hover{
/* border: 5px solid rebeccapurple; */
background-color: rgb(255, 255, 255);
}
#paper:hover{
background-color: rgb(255, 255, 255);
}
#scissor:hover{
background-color: rgb(255, 255, 255);
}
}
JavaScript -
window.onload = function() {
console.log("Game Loaded Successfully");
};
stone.addEventListener('click',stones);
paper.addEventListener('click',papers);
scissor.addEventListener('click',scissors);
function stones(){
console.log("stone is selected");
document.getElementById("youselected").innerHTML ="Selected Stone";
var rand = randomnum();
console.log(rand);
if(rand==0){
document.getElementById("demo").innerHTML = "computer selected STONE";
}
else if (rand==1){
document.getElementById("demo").innerHTML = "computer selected PAPER";
}
else {
document.getElementById("demo").innerHTML ="computer selected SCISSOR";
}
playoff(rand);
}
function papers(){
console.log("stone is selected");
document.getElementById("youselected").innerHTML ="Selected paper";
var rand = randomnum();
console.log(rand);
if(rand==0){
document.getElementById("demo").innerHTML ="computer selected STONE";
}
else if (rand==1){
document.getElementById("demo").innerHTML = "computer selected PAPER";
}
else {
document.getElementById("demo").innerHTML ="computer selected SCISSOR";
}
playoff1(rand);
}
function scissors(){
console.log("stone is selected");
document.getElementById("youselected").innerHTML ="Selected Scissor";
var rand = randomnum();
console.log(rand);
if(rand==0){
document.getElementById("demo").innerHTML ="computer selected STONE";
}
else if (rand==1){
document.getElementById("demo").innerHTML = "computer selected PAPER";
}
else {
document.getElementById("demo").innerHTML ="computer selected SCISSOR";
}
playoff2(rand);
}
function randomnum(){
return Math.floor(Math.random() * 3);
}
// WIN OR LOOSE COUNTER
function playoff(z){
if (z==0)
{
console.log("you draw");
document.getElementById("result").innerHTML ="Result is : DRAW";
var e=draw1();
document.getElementById("draw1").innerHTML =e;
}
else if (z==1)
{
console.log("you loose");
document.getElementById("result").innerHTML ="Result is : LOOSE";
var d=scorec();
document.getElementById("scorec").innerHTML =d;
}
else if (z==2){
console.log("you Win");
document.getElementById("result").innerHTML ="Result is : WIN";
var a=scoreu();
document.getElementById("scoreu").innerHTML =a;
}
else {
console.log("DRAW");
document.getElementById("result").innerHTML ="Result is : DRAW";
var e=draw1();
document.getElementById("draw1").innerHTML =e;
}
}
function playoff1(z){
if (z==0)
{
console.log("you win");
document.getElementById("result").innerHTML ="Result is : WIN";
var a=scoreu();
document.getElementById("scoreu").innerHTML =a;
}
else if (z==1)
{
console.log("you loose");
document.getElementById("result").innerHTML ="Result is : DRAW";
var e=draw1();
document.getElementById("draw1").innerHTML =e;
}
else{
console.log("you loose");
document.getElementById("result").innerHTML ="Result is : LOOSE";
var d=scorec();
document.getElementById("scorec").innerHTML =d;
}
}
function playoff2(z){
if (z==0)
{
console.log("you LOOSE");
document.getElementById("result").innerHTML ="Result is : LOOSE";
var d=scorec();
document.getElementById("scorec").innerHTML =d;
}
else if (z==1)
{
console.log("you WIN");
document.getElementById("result").innerHTML ="Result is : WIN";
var a=scoreu();
document.getElementById("scoreu").innerHTML =a;
}
else{
console.log("you loose");
document.getElementById("result").innerHTML ="Result is : DRAW";
var e=draw1();
document.getElementById("draw1").innerHTML =e;
}
}
// score counter
var u=0;
var l =0;
var d =0;
function scoreu(){
u++;
return u;
}
function scorec(){
l++;
return l;
}
function draw1(){
d++;
return d;
}
Comments
Post a Comment