This is a game about matching the right colour. In the first level you start with 3 cubes that each have a different colour. After 2 seconds the colours of the cubes disappear and the cubes become white, so you need to remember the colours of the cubes. Above the cubes you have coloured circles of the previous colours you just saw in different colour orders. You need to click on the white cube in the right order the colour circle above is showing you. If you click at the wrong colour cube (so the wrong colour order) all the cubes will turn white again until all the colour cubes are selected in the right order.
So if you got a cube colour in the right order the cube will turn into colour again, if it's wrong the cube will stay white when you press the second cube wrong. The higher your level is the more cubes there will be to memorise. You have a 1-minute time limit to achieve your high score before the game ends.
How can I make the script shorter and easier? The script is working but in my opinion the script can be shorter and better.
This is my script but I want to delete this script because it isn't good in my opinion.
var AllColors = ['yellow', 'gray', 'blue', 'green', 'pink', 'orange'];
var RandomColors = [];
var ChosenColors = [];
var UsedColors = [];
var Time = 100;
var Score = 0;
var Round = 3;
function Randomize(Subject) {
let counter = Subject.length;
while (counter > 0) {
let index = Math.floor(Math.random() * counter);
counter--;
let temp = Subject[counter];
Subject[counter] = Subject[index];
Subject[index] = temp;
}
return Subject;
}
function ClearArrays() {
RandomColors.splice(0, RandomColors.length);
ChosenColors.splice(0, ChosenColors.length);
UsedColors.splice(0, UsedColors.length);
}
function arraysEqual(a, b) {
if (a === b) return true;
if (a == null || b == null) return false;
if (a.length != b.length) return false;
for (var i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) return false;
}
return true;
}
function Counter() {
var Countdown = Time;
$('.counter').text(Countdown);
count = setInterval(function() {
Countdown--;
if (Countdown >= 0) {
$('.counter').text(Countdown);
}
if (Countdown == 0) {
clearInterval(count);
ClearGame();
}
}, 1000);
}
function RandomArray(Subject) {
var index = Math.floor(Math.random() * Subject.length);
var val = Subject[index];
return val;
}
function setColorToGrey() {
$.each(UsedColors, function(index, value) {
$("." + value + "").css('background-color', '');
});
}
function CreateObjTop() {
randomcolors = Randomize(UsedColors);
$(this).delay(2000).queue(function() {
$(this).hide();
setColorToGrey();
i = 0;
$.each(randomcolors, function(index, value) {
$('<div class="' + value + '" style="background-color:' + value + '; width: 25px; height: 25px; float: left; margin-left:20px; border-radius: 100%; border: 2px solid #ACACAC;"></div>').appendTo("#top").hide().fadeIn(2000);
RandomColors.push(value);
$("#" + [i] + "").click(function() {
$("#" + $(this).attr('id') + "").css('background-color', $(this).attr('class'));
ChosenColors.push($(this).attr('class'));
CheckStatus();
});
i++;
});
$(this).dequeue();
});
}
function LoadGame() {
for (i = 0; i < Round; i++) {
var color = RandomArray(AllColors);
$('<div id="' + [i] + '" class="' + color + '" data-color="' + color + '" style="background: ' + color + '; width: 40px;height: 40px; border-radius: 25px 25px 25px 25px; -moz-border-radius: 25px 25px 25px 25px; -webkit-border-radius: 4px 4px 4px 4px; border: 1px solid #5e5e5e; margin: 10px;float:left; "></div>').appendTo("#mid").hide().fadeIn(2000);
UsedColors.push(color);
}
CreateObjTop();
}
function CheckStatus() {
if (ChosenColors.length === Round) {
if (arraysEqual(UsedColors, ChosenColors)) {
if (Score === 4 || Score == 9 || Score == 14) {
Round++;
}
$.each(RandomColors, function(index, value) {
$("." + value + "").remove();
});
ClearArrays();
LoadGame(Round);
Score++;
$('.score').text(Score);
} else {
ChosenColors.splice(0, ChosenColors.length);
$.each(UsedColors, function(index, value) {
$('[data-color="' + value + '"]').css('background-color', 'white');
});
}
}
}
function ClearGame() {
$('.counter').text('Game over');
$('.score').text(Score);
$.each(AllColors, function(index, value) {
$('.' + value + '').remove();
ClearArrays();
});
$('.sitename').show();
$('.navbar').show();
$('.endgame').show();
$('.statics-time').hide();
$('.statics-score').hide();
Score = 0;
Round = 3;
$(this).delay(2000).queue(function() {
$("#bt-ready").delay(2000).show();
$(this).dequeue();
});
}
function StartGame() {
Counter();
LoadGame();
}
StartGame();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
</div>
<br />
<br />
<div id="mid">
</div>