Start
HTML Code
<div class="board">
<div id="field-1"></div>
<div id="field-2"></div>
<div id="field-3"></div>
<div id="field-4"></div>
</div>
<div id="startgame">Start</div>
CSS Code
.board {
width: 32vw;
height: 32vw;
background-color: black;
}
.board div {
width: 12vw;
height: 12vw;
margin: 2vw;
float: left;
border-radius: 50%;
}
.start-hidden {
display: none;
}
#field-1 {
background-color: rgb(255, 100, 100);
}
#field-1.active {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 25px rgb(255, 0, 0);
}
#field-2 {
background-color: rgb(100, 255, 100);
}
#field-2.active {
background-color: rgb(0, 255, 0);
box-shadow: 0px 0px 25px rgb(0, 255, 0);
}
#field-3 {
background-color: rgb(255, 255, 100);
}
#field-3.active {
background-color: rgb(255, 255, 0);
box-shadow: 0px 0px 25px rgb(255, 255, 0);
}
#field-4 {
background-color: rgb(100, 100, 255);
}
#field-4.active {
background-color: rgb(0, 0, 255);
box-shadow: 0px 0px 25px rgb(0, 0, 255);
}
#startgame {
position: relative;
top: -17vw;
color: #fff;
left: 15vw;
font-size: 30px;
}
JavaScript Code
var Field_1 = document.getElementById("field-1");
var Field_2 = document.getElementById("field-2");
var Field_3 = document.getElementById("field-3");
var Field_4 = document.getElementById("field-4");
var startgame = document.getElementById("startgame");
var playing = true;
var secret = [getRandomField()];
var playerSecret = [];
function getRandomField() {
return Math.floor(Math.random() * 4) + 1;
}
function removieActive() {
Field_1.classList.remove("active");
Field_2.classList.remove("active");
Field_3.classList.remove("active");
Field_4.classList.remove("active");
}
function playField(index) {
removieActive();
playing = true;
if (secret.length > index) {
switch (secret[index]) {
case 1:
Field_1.classList.add("active");
break;
case 2:
Field_2.classList.add("active");
break;
case 3:
Field_3.classList.add("active");
break;
case 4:
Field_4.classList.add("active");
break;
}
setTimeout(function() {
removieActive()
}, 500);
setTimeout(function() {
playField(++index)
}, 600);
} else {
playing = false;
}
}
function setSecret(field) {
playerSecret.push(field);
var failed = false;
for (i = 0; i < playerSecret.length; i++) {
if (playerSecret[i] != secret[i]) {
failed = true;
}
}
if (failed) {
secret = [getRandomField()];
playerSecret = [];
if (confirm("FAIL! - Restart?")) {
setTimeout(function() {
playField(0)
}, 1000);
}
} else if (playerSecret.length == secret.length) {
playerSecret = [];
secret.push(getRandomField());
setTimeout(function() {
playField(0)
}, 1000);
}
}
Field_1.onclick = function() {
Field_1.classList.add("active");
setTimeout(function() {
removieActive();
setSecret(1);
}, 200);
};
Field_2.onclick = function() {
Field_2.classList.add("active");
setTimeout(function() {
removieActive();
setSecret(2);
}, 200);
};
Field_3.onclick = function() {
Field_3.classList.add("active");
setTimeout(function() {
removieActive();
setSecret(3);
}, 200);
};
Field_4.onclick = function() {
Field_4.classList.add("active");
setTimeout(function() {
removieActive();
setSecret(4);
}, 200);
};
startgame.onclick = function() {
startgame.classList.add("start-hidden");
playField(0);
};