I recently started learning JS, Jquery, and CSS.
My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges.
To address this issue, I decided to start the colored squares with an opacity of 0.5. Each square has a unique ID, and when that ID matches the correct number, I use
$(this).css("opacity","1"); to make it brighter
Unfortunately, I am struggling to figure out how to get the square to automatically change back to 0.5
I attempted using a setTimeout() function to delay the change back. Even though the code delays, it doesn't revert back. I have tried using both an empty space and 0.5 as values
<!DOCTYPE html>
<html>
<head>
<title>Matchy Matchy</title>
<link rel="stylesheet" type="text/css" href="simonSays.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h1>Match the Colors!</h1>
<div id="banner">
<button id="reset">Reset</button>
<span id="level">Level:1</span>
</div>
<div id="container">
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<div class="square" id="3"></div>
<div class="square" id="4"></div>
<div class="square" id="5"></div>
<div class="square" id="6"></div>
</div>
<script type="text/javascript" src="simonSays.js"></script>
</body>
</html>
body{
background-color:black;
margin:0;
}
h1{
color:white;
text-align: center;
background-color:steelblue;
margin:0;
}
#banner{
background-color:white;
margin:0;
text-align: center;
}
#container{
max-width: 600px;
margin: 20px auto;
}
.square{
background-color:pink;
float:left;
padding-bottom:30%;
width:30%;
margin:1.66%;
opacity: 0.5;
transition: opacity 0.5s;
--webkit-transition: opacity 0.5s;
--moz-transition: opacity 0.5s;
}
//variables
var level = 1;
//add event listeners for player use
//probably can make a class and use toggle to shorten code
$(".square").on("click",function(){
$(this).css("opacity","1");
});
$(".square").on("mouseleave",function(){
$(this).css("opacity",".5");
});
init();
doLevel(level); //test
function init(){
//go through all squares and add a random color as background
$(".square").each(function(i, obj){
$(obj).css("backgroundColor", generateRandomColor());
});
}
function doLevel(level){
//get the colors to copy
var pattern = selectColors(level);
//showPattern(pattern);
//test
console.log(pattern[0]);
}
function generateRandomColor(){
var color = "";
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = "rgb(" + r + ", " + g + ", " + b + ")";
return color;
}
function selectColors(amount){
//declare array to hold values
var order = [];
//loop through amount
for(var i = 0; i < amount; i++){
order.push(Math.floor(Math.random() * 6 + 1));
}
return order;
}
function showPattern(pattern){
//for each number in pattern,
for(var i = 0; i < pattern.length; i++){
//for each square on the screen
$(".square").each(function(j,obj){
var $this = $(this); //settimeout changes to global, so I am declaring locally here
//if the ID is equal to the pattern number
if(parseInt($(this).attr("id")) === parseInt(pattern[i])){
//brighten
console.log("light up");
$(this).css("opacity","1");
//dim
setTimeout(function(){
console.log("changing back");
$this.css("opacity",".5");
}, 3000);
}
})
}
}
The opacity should revert back to 0.5 after a certain time, but it remains at 1. I'm puzzled as to why it's not changing back and would appreciate any insights or alternative approaches.
Thank you!