Repeat Spiel – Java Script Open Source Game

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);
};