Personal was doing a script for a little game called Simon, but I have a problem when checking if the items that the player clicked are the same as the game sent. Even if I hit or miss, it always returns that I was wrong, if anyone can help, thank you.
// Numeros de sequencias
var memory_sequence = [0, 1, 2, 3];
var colors = ["red", "blue", "yellow", "green"];
// Sequencia gerada temporariamente
var memory_tmp = [];
// Sequencia gerada pelo player
var memory_values = [];
var rounds = 0;
document.getElementById('start').onclick = function(){newGame()};
function newGame(){
var output = '';
for (var i = 0; i < memory_sequence.length; i++){
output += '<li class="'+colors[i]+'" data-tile="'+i+'" onclick="checkGame(\''+i+'\')"></li>';
}
document.getElementById('table').innerHTML = output;
$('#start').hide();
$('span').hide();
round();
}
function round(){
rounds += 1;
if (rounds == 1){
memory_tmp.push(0, 1);
animate(memory_tmp);
}
else if (rounds == 2){
memory_values = [];
memory_tmp.push(2);
animate(memory_tmp);
}
else if (rounds == 3){
memory_values = [];
memory_tmp.push(3);
animate(memory_tmp);
}
else if (rounds > 3){
var rand = Math.floor(Math.random() * memory_tmp.length);
memory_tmp.push(rand);
memory_values = [];
animate(memory_tmp);
}
}
function animate(memory_tmp){
var i = 0;
var interval = setInterval(function(){
light(memory_tmp[i]);
i++;
if (i >= memory_tmp.length){
clearInterval(interval);
}
}, 600);
}
function light(tile){
var $tile = $('[data-tile='+ tile +']').addClass('lightOn');
window.setTimeout(function(){
$tile.removeClass('lightOn');
}, 350);
}
function checkGame(val){
memory_values.push(val);
for (var i = 0; i < memory_values.length; i++){
// Verifica se o player errou
if ((memory_values.length == memory_tmp.length) && (memory_values != memory_tmp)){
console.log('Values:' + memory_values);
console.log('Temp:' + memory_tmp);
// Se retornar true, fim do game
reset();
}
else if ((memory_values == memory_tmp) && (memory_values.length == memory_tmp.length)){
round();
}
}
}
function reset(){
memory_values = [];
memory_tmp = [];
$('li').hide();
$('span').show();
$('#start').show();
}
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
list-style-type: none;
}
html, body {
width: 100%;
height: 94%;
}
.simon {
margin: 100px auto;
width: 300px;
height: 300px;
}
.red, .blue, .yellow, .green {
-web-kit-border-radius: 150px 150px 150px 150px;
border-radius: 150px;
position: absolute;
}
.red {
width: 296px;
height: 290px;
clip: rect(0px, 300px, 150px, 150px);
background-color: red;
opacity: 0.6;
}
.blue {
width: 296px;
height: 290px;
background-color: blue;
opacity: 0.6;
clip: rect(0px, 150px, 150px, 0px);
}
.yellow {
width: 296px;
height: 290px;
background-color: yellow;
opacity: 0.6;
clip: rect(150px, 150px, 300px, 0px);
}
.green {
width: 296px;
height: 290px;
background-color: green;
opacity: 0.6;
clip: rect(150px, 300px, 300px, 150px);
}
.lightOn {
opacity: 0.8;
border: 3px solid black;
}
#start {
width: 250px;
height: 60px;
border-radius: 20px;
margin: 0 25px;
font-size: 1.6em;
}
#start:hover {
background-image: linear-gradient(to bottom, #cf2b4f, #980021);
color: white;
}
span {
width: 300px;
height: 300px;
text-align: center;
display: none;
font-size: 2em;
position: relative;
left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="simon">
<ul id="table">
</ul>
<span>Você perdeu! <br> Sua pontuação: <br> 50</span>
<button id="start">Start</button>
</div>