var random;
var squareArray = [$('#square1'),$('#square2'),$('#square3'),$('#square4')];
var randomOrder = [];
var i = 0;
var j = 0;
function computerPlays() {
random = Math.floor(Math.random() * 4);
randomOrder.push(random);
makeSquareBlink();
userPlays();
}
function makeSquareBlink() {
setTimeout(function() {
var randomSquare = squareArray[randomOrder[i]];
randomSquare.css('opacity', '0.5');
setTimeout(function() {
randomSquare.css('opacity', '1');
}, 300);
i++;
if (i < randomOrder.length)
makeSquareBlink();
}, 500);
}
function userPlays() {
$('#square1').on('click', function() {
if (randomOrder[j] === 0) {
$('#square1').css('opacity', '0.5');
setTimeout(function() {
$('#square1').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square2').on('click', function() {
if (randomOrder[j] === 1) {
$('#square2').css('opacity', '0.5');
setTimeout(function() {
$('#square2').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square3').on('click', function() {
if (randomOrder[j] === 2) {
$('#square3').css('opacity', '0.5');
setTimeout(function() {
$('#square3').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square4').on('click', function() {
if (randomOrder[j] === 3) {
$('#square4').css('opacity', '0.5');
setTimeout(function() {
$('#square4').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
}
function reset() {
randomOrder = [];
i = 0;
}
$('button').click(function() {
reset();
computerPlays();
});
Is there a way to modify the CSS property of the randomSquare variable in the makeSquareBlink function? I have provided the full code now, but it is still not functioning as expected. Can anyone provide further assistance to help resolve this issue?