Taras Yaremkiv Taras Yaremkiv - 1 month ago 6
HTML Question

Checking sequence of clicks not working

I'm trying to make JS check the sequence of clicks ( like in Simon Game). Actually I'm doing this game and got stuck at this. It freezes from the begging.

The code generates 22 random numbers in array which values are from 0 to 3.
like [1, 0, 2, 1, 1, 3, 1, ...]

After that user have to click on the div elements in arithmetic progression :

frist - div[1] then click on two divs [1, 0] then users clicks on three divs [1, 0, 2] and etc. - and function checkClick checks if user clicks on the div with proper numbers.

Here's the code and it doesn't wait for users clicks as far as I understood. I would be appreciated for any hints:



function getRandArray() {
var array = [];
for (var i = 0; i < 22; i++) {
array[i] = Math.floor(Math.random() * 4);
}
return array;
}
var elems = document.querySelectorAll('.bigButton');

function checkClick(array, level) {
var counter = 0;
var result;
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click", function(e) {
if (+this.dataset.sound === array[counter]) {
counter++;
if (level === counter) {
result = true;
console.log(' level passed');
}
result = false;
}
})
}
return result;
}

function playGame() {
var randIndexArr = getRandArray();
document.getElementsByTagName('p')[0].innerHTML = randIndexArr;
console.log(randIndexArr);
for (var i = 0; i < 22; i++) {
for (var j = 0; j <= i; j++) {
if (j === i) {
if (!(checkClick(randIndexArr, i))) {
j = 0; //start over from the current level
}
}
}
}
}
playGame();

.bigButton {
height: 25px;
width: 35px;
border: 2px solid #464646;
margin: 1em;
text-align: center;
padding-top: 5px;
display: inline-block;
}

<div class="bigButton" id="greenButton" data-sound="1">1
</div>
<div class="bigButton" id="redButton" data-sound="2">2
</div>
<div class="bigButton" id="yellowButton" data-sound="3">3
</div>
<div class="bigButton" id="blueButton" data-sound="4">4
</div>
<p></p>




Answer

You should add event listeners only once on document load, remove + before this.dataset.sound and move result = false; before traversing the array.

EDIT:
This is the working code. It should be placed at the end of the body:

var counter = 0;
var array = [];
var level = 1;

function getRandArray() {
    for (var i = 0; i < 22; i++) {
        array[i] = 1 + Math.floor(Math.random() * 4);
    }
    return array;
}

function add_listeners(){
    var elems = document.querySelectorAll('.bigButton');
    console.log(elems.length);
    console.log(elems);
    for (var i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", function(e) {
            console.log('click');
            console.log(this.dataset.sound);
            if (this.dataset.sound == array[counter]) {
                counter++;
                console.log(counter);
                if (level == counter) {
                    console.log('level passed');
                    level++;
                    counter = 0;
                }
            }
            else {
                    console.log("Start the level again");
                    counter = 0;
            }
        })
    }
}

document.onload = (function() {
    var randIndexArr = getRandArray();
    document.getElementsByTagName('p')[0].innerHTML = randIndexArr;
    console.log(randIndexArr);
    add_listeners();
})()
Comments