Skip to content
GitLab

Colorgame

Closed Administrator requested to merge github/fork/lakshyaakar/master into master
Compare
and
3 files
+ 256
- 0
colorg‎ame.css‎ +92 -0
colorga‎me.html‎ +28 -0
colorg‎ame.js‎ +136 -0
colorgame.css 0 → 100644
+ 92
- 0
body{
background-color: #232323;
margin:0 0;
font-family: "Montserrat";
}
.square{
width:30%;
margin:1.66%;
background: blue;
padding-top: 30%;
float: left;
border-radius: 20px;
transition: background 0.5s;
}
#container{
max-width: 600px;
margin: 0 auto;
}
h1{
color: white;
text-align: center;
margin: 0 auto;
line-height: 1.1;
padding:20px 0;
background-color: steelblue;
}
#option{
background-color: white;
}
#play{
margin: 0 0 0 30%;
background-color: white;
border:none;
font-weight: bold;
height: 100%;
color: steelblue;
font-size: inherit;
letter-spacing: 1px;
transition: all 0.3s;
outline: none;
}
#status{
padding-left: 12%;
margin-right: 0;
}
#great{
text-align: center;
}
#guess{
text-align: center;
text-transform: uppercase;
font-size: 1.5em;
}
#game{
text-align: center;
}
.selected{
background-color: blue;
}
#easy{
border:none;
margin:0 0 0 14%;
font-weight: bold;
height: 100%;
color: steelblue;
font-size: inherit;
letter-spacing: 1px;
transition: all 0.3s;
outline: none;
}
#hard{
border:none;
margin:0 0;
font-weight: bold;
height: 100%;
color: steelblue;
font-size: inherit;
letter-spacing: 1px;
transition: all 0.3s;
outline: none;
}
\ No newline at end of file
colorgame.html 0 → 100644
+ 28
- 0
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorgame.css">
</head>
<body>
<h1><div id="great">THE GREAT</div> <span id="guess">RGB</span> <div id="game">COLOR GAME</div></h1>
<div id="option">
<strong><button id="play">New Colors</button>
<span id="status"></span></strong>
<strong><button id="easy">EASY</button>
<button id="hard" class="selected">HARD</button></strong>
</div>
<div id="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
<script type="text/javascript" src="colorgame.js"></script>
</body>
</html>
\ No newline at end of file
colorgame.js 0 → 100644
+ 136
- 0
var numsquare=6;
var squares=document.querySelectorAll(".square");
var statuss=document.querySelector("#status");
var plays=document.querySelector("#play");
var guesses=document.querySelector("#guess");
var hh=document.querySelector("h1");
var btn=document.querySelector("button");
var btneasy=document.querySelector("#easy");
var btnhard=document.querySelector("#hard");
var colors=generate(numsquare);
var pickedcolor=pickcolor();
guesses.textContent=pickedcolor;
btneasy.addEventListener("click",function()
{
btneasy.classList.add("selected");
btnhard.classList.remove("selected");
numsquare=3;
colors=generate(numsquare);
pickedcolor=pickcolor();
guesses.textContent=pickedcolor;
for(var i=0;i<squares.length;i++)
{
if(i<3)
squares[i].style.background=colors[i];
else
squares[i].style.display="none";
}
statuss.textContent="";
hh.style.background="steelblue";
plays.style.color="steelblue";
btnhard.style.color="steelblue";
btneasy.style.color="steelblue";
}
);
btnhard.addEventListener("click",function()
{
btnhard.classList.add("selected");
btneasy.classList.remove("selected");
numsquare=6;
colors=generate(numsquare);
pickedcolor=pickcolor();
guesses.textContent=pickedcolor;
for(var i=0;i<squares.length;i++)
{
squares[i].style.background=colors[i];
squares[i].style.display="block";
}
statuss.textContent="";
hh.style.background="steelblue";
plays.style.color="steelblue";
btnhard.style.color="steelblue";
btneasy.style.color="steelblue";
}
);
btn.addEventListener("click",function()
{
colors=generate(numsquare);
pickedcolor=pickcolor();
guesses.textContent=pickedcolor;
for(var i=0;i<squares.length;i++)
squares[i].style.background=colors[i];
statuss.textContent="";
hh.style.background="steelblue";
plays.style.color="steelblue";
btnhard.style.color="steelblue";
btneasy.style.color="steelblue";
}
);
for(var i=0;i<squares.length;i++)
{
squares[i].style.background=colors[i];
squares[i].addEventListener("click",function()
{
if(this.style.background===pickedcolor)
{
statuss.textContent="Correct";
statuss.style.color=pickedcolor;
plays.style.color=pickedcolor;
btnhard.style.color=pickedcolor;
btneasy.style.color=pickedcolor;
hh.style.background=pickedcolor;
btn.textContent="Play Again?"
color();
}
else
{
this.style.background="#232323";
statuss.textContent="Try Again";
}
}
);
}
function color()
{
for(var j=0;j<squares.length;j++)
squares[j].style.background=pickedcolor;
}
function pickcolor()
{
var col=Math.floor(Math.random() * colors.length);
return colors[col];
}
function generate(num)
{
var arr = [];
for(var i=0;i<num;i++)
arr.push(random());
return arr;
}
function random()
{
var red =Math.floor(Math.random() * 255);
var green =Math.floor(Math.random() * 255);
var blue =Math.floor(Math.random() * 255);
return "rgb(" + red +", " + green + ", " + blue + ")";
}
\ No newline at end of file