I'm trying to build a game in which the object is to get all the columns to be dark. When you click on one column, it's color changes from dark to light and the columns to its left and right will change from dark to light, or light to dark, depending on their starting color.
I'm stuck on the last part where I need to iterate through the entire set of divs to see if all of their backgrounds are dark. If so, I want an alert to pop up to say that the puzzle is completed. I am breaking the loop if I find my first false statement. But what I can't figure out is how to iterate through the set of divs and if ALL of them meet the conditions (i.e. they all have a dark background), then present the alert box signifying the end of the puzzle.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="box light"></div>
<div class="box dark"></div>
<div class="box light"></div>
<div class="box dark"></div>
<div class="box light"></div>
<div class="box dark"></div>
<div class="box light"></div>
<div class="box dark"></div>
<div class="box light"></div>
<div class="box dark"></div>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS:
.container {
display: flex;
}
.box {
flex: 1;
margin: 3em .75em;
height: 200px;
display: inline-block;
cursor: pointer;
}
.light {
background: #DDD;
}
.dark {
background: #333;
}
And my Jquery:
//click on box
$('.box').click(function(){
//check box color
var $background = $(this).css('background-color');
if ($background === 'rgb(51, 51, 51)') {
//change to light #CCC
$(this).css('background-color', 'rgb(221, 221, 221)');
} else {
//change to dark #333
$(this).css('background-color', 'rgb(51, 51, 51)');
}
if ($(this).is(':not(:first-child)')) {
var $backgroundLeft = $(this).prev().css('background-color');
if ($backgroundLeft === 'rgb(51, 51, 51)') {
//change to light #CCC
$(this).prev().css('background-color', 'rgb(221, 221, 221)');
} else {
//change to dark #333
$(this).prev().css('background-color', 'rgb(51, 51, 51)');
}
}
//check right box color
if ($(this).is(':not(:last-child)')) {
var $backgroundRight = $(this).next().css('background-color');
if ($backgroundRight === 'rgb(51, 51, 51)') {
//change to light #CCC
$(this).next().css('background-color', 'rgb(221, 221, 221)');
} else {
//change to dark #333
$(this).next().css('background-color', 'rgb(51, 51, 51)');
}
}
//loop through all boxes, checking background color
$('.box').each(function() {
//if any background color is light
if (this.style.backgroundColor === 'rgb(221, 221, 221)') {
return false;
}
});
});
Aucun commentaire:
Enregistrer un commentaire