[ad_1]
I am working on a match color game. After the guesses are completed the initialize function is called, which resets the program. After the first set of guesses, when the initialize function is called again, code below the initialize function (two setTimeouts), that asks the user where a color is does not fire again. Thanks for the help.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body style="pointer-events: none">
<div class="question">
<div class="questionbox">
<p>Where is:</p>
</div>
</div>
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
<div class="score-container">
<div class="score">Score: <span id="score">0</span></div>
</div>
<div class="button">
<button type="button" id="btn">Restart</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
}
.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.question {
position: absolute;
height: 100vh;
width: 100%;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.questionbox {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
background-color: red;
height: 400px;
width: 600px;
color: white;
font-size: 33px;
}
.container-box {
width: 600px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 400px;
}
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
}
.hide {
background-color: grey !important;
}
.open {
border: 40px white;
cursor: default;
}
.button {
width: 100vw;
display: flex;
flex-direction: row;
justify-content: center;
}
#btn {
display: flex;
position: absolute;
bottom: 50px;
justify-content: center;
text-align: center;
}
.score-container {
display: flex;
position: absolute;
width: 100vw;
justify-content: center;
bottom: 100px;
}
.border {
border: 8px solid #66ff00 !important;
}
.border-red {
border: 8px solid #EE4B2B !important;
}
javascript
let colors = ["red", "yellow", "blue", "green", "orange", "purple"],
$fullbox = $('.container'),
$popup = $('.question'),
gamecolor = [],
$restart = $('#btn'),
clicks = 0,
guessColor = [],
score = 0,
guess;
window.onload = initialize();
// initialize board
function initialize () {
clicks = 0;
$('.colorbox').removeClass('border');
$('.colorbox').removeClass('border-red');
$('.colorbox').each(function () {
$('body').css("pointer-events", "none");
$('.colorbox').removeClass('hide');
$(this).css("border", "2px solid black");
let randColor = colors[Math.floor(Math.random() * colors.length)];
$(this).css("background-color", `${randColor}`);
setTimeout(hide, 3000);
})
}
function hide() {
$('.colorbox').each(function () {
$(this).addClass('hide');
$('body').css("pointer-events", "auto");
$('.colorbox').css("pointer-events", "auto");
})
}
//restart
$('#btn').on('click', () => {
initialize();
})
setTimeout(() => {
$popup.css('display', 'flex');
guessColor = colors[Math.floor(Math.random() * colors.length)];
$('.questionbox').find('p').after(`<span> ${guessColor}?</span>`);
}, 2500)
setTimeout(() => {
$popup.css('display', 'none');
$('body').css("pointer-events", "auto");
}, 6000)
$('.container').on('click', '.colorbox', function () {
console.log($(this));
$(this).css("pointer-events", "none");
clicks++;
guess = $(this)[0].style.backgroundColor;
console.log(guess);
$(this).removeClass('hide');
console.log(guessColor);
console.log(guess);
if (guess === guessColor) {
score;
score++;
$('#score').html(score);
$(this).addClass('border');
} else {
$(this).addClass('border-red');
// $(this).css("border", "4px solid red");
}
if (clicks >= colors.length) {
setTimeout(initialize, 800);
$('body').css("pointer-events", "none");
}
console.log($(this));
});
[ad_2]