Member 13369729 Ответов: 0

Как сделать так, чтобы мои цветные дивы светились в том порядке, в котором им назначен компьютерный массив?

По сути, я придерживаюсь логики своего кода. После того, как я сделаю правильный выбор цвета, я хочу, чтобы компьютер сделал второй выбор, и не только «светился» выбранным цветом, но также светился каждым цветом, который он выбрал в предыдущих раундах. Я сделал функцию glowInOrder, которая, как я думал, будет работать, но она не работает. Я пробовал использовать инструменты разработчика для console.log () массива компьютера и массива проигрывателя, чтобы убедиться, что в них вставляются правильные цвета, и они действительно отображаются. Вот где у меня возникают проблемы с выяснением, почему это не работает. Любая помощь приветствуется. Я уже какое-то время сталкиваюсь с этой проблемой .... (когда я говорю «свечение», я просто имею в виду добавить эффект свечения с помощью CSS. Я сделал для этого функцию makeGlow).


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="simon.css">
</head>
<body>
	<div class="container">
		<div class="gameContainer">
			<div class="topRow">
				<div id="red" class="all"></div>
			</div>
			<div class="middleRow">
				<div id="green" class="all"></div>
				<div id="blue" class="all"></div>
			</div>
			<div class="bottomRow">
				<div id="yellow" class="all"></div>
				<div id="pink" class="all"></div>
			</div>
		</div>
	</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="simon.js"></script>	
</body>
</html>



*{
	margin: 0;
	padding: 0;
}
body{
	background-color: black;
}
.all{
	border-radius: 50%;
	height: 100px;
	width: 100px;
}
#red{
	border: 5px solid red;
	display: table;
	margin-left: auto;
	margin-right: auto;
}
#blue{
	border: 5px solid blue;
	border-radius: 50%;
	float: right;
	display: inline;
}
#green{
	border: 5px solid green;
	border-radius: 50%;
	display: inline-block;
}
#yellow{
	border: 5px solid yellow;
	border-radius: 50%;
	display: inline-block;
	margin-left: 40px;
}
#pink{
	border: 5px solid pink;
	border-radius: 50%;
	float: right;
	display: inline;
	margin-right: 40px;
}
.middleRow{
	margin-top: 70px;
	margin-bottom:110px;
}

.gameContainer{
	height: 500px;
	width: 500px;
	margin-left: 25%;
	margin-top: 10%;
}
.hover{
	background-color: white;
}


var colorArray = ["red","blue","green","yellow","pink"];
var player = [];
var computer = [];
var round = 0;
var randomOrder;
var myColor;
var chosenColor;

//--------------------------------------------------------//


function makeGlow(yolo){
	
	$(yolo).addClass('hover');

	setTimeout(function(){
		$(yolo).removeClass('hover');
	},300);

}


//--------------------------------------------------------//


function makeGlowTwo(yolo){
	setTimeout(function(){
		$(yolo).addClass('hover');
	},500);

	setTimeout(function(){
		$(yolo).removeClass('hover');
	},800);
}


//--------------------------------------------------------//


function newGame(){
	player = [];
	computer = [];
	round = 0;
}


//---------------------------------------------------------//


function playerChoice(){
	$('.all').on('click',function(e){
		player.push(e.target.id);
		makeGlow(this);
	});
};


//---------------------------------------------------------//


function computerChoice(){
	randomOrder = Math.floor(Math.random()* colorArray.length);
	myColor = colorArray[randomOrder];
	computer.push(myColor);
	chosenColor = "#"+myColor;
	//makeGlowTwo(chosenColor);
	return chosenColor;
}


//--------------------------------------------------------//


function newRound(){
	round++;
	computerChoice();
}


//---------------------------------------------------------//


function glowInOrder() {
  var i = 0;
   var moves = setInterval(function(){
  	makeGlowTwo(computer[i]);
    i++;
    if (i >= computer.length) {
       clearInterval(moves);
    }
  }, 400)
}


//---------------------------------------------------------//


function arraysEqual(arr1, arr2) {
    if(arr1.length !== arr2.length)
        return false;
    for(var i = arr1.length; i--;) {
        if(arr1[i] !== arr2[i])
            return false;
    }

    return true;
}


//---------------------------------------------------------//
$(document).ready(function(){
	playerChoice();//whenever we click something. it will glow and push to player array
	computerChoice();//computer officially makes choice and returns it as chosenColor
	makeGlowTwo(chosenColor)//we make that color glow.this marks the start of the game
	

	//when we click any color, we offially make our choice
	//then we set off a function that uses if logic to ask...
	//...if both arrays are equal then start a new round
	//the glowInOrder function does not work however...
	$('.all').on('click',function(){
		if(arraysEqual(computer,player)){
			newRound();
			glowInOrder();//this is not working for some reason...
		}
	});	

});


Что я уже пробовал:

Я пробовал использовать console.log(компьютер) и console.log(плеер) на каждом шагу, чтобы убедиться, что правильный цвет помещен в массив, и он выглядит так, как они есть. Я не понимаю, почему цвета не светятся по порядку

0 Ответов