Как изменить цвет двух div для игры на совпадение? - PullRequest
Новая
       1

Как изменить цвет двух div для игры на совпадение?

0 голосов
/ 01 мая 2018

Я работаю над заданием, в котором вы создаете игру «Память» с сеткой из 4x4 элементов div, которые служат карточками. Конечная цель - пользователь выбирает две карты. Если они совпадают, удалите их из игры (измените цвет на белый, чтобы карта исчезла), а если они не совпадают, верните их в черный цвет. Я использую console.logs в качестве заполнителей, чтобы показать, что функции работают правильно, но я застрял на том, как изменить цвета. Кроме того, оригинальные цвета карт должны отображаться в течение двух секунд, прежде чем они станут белыми или черными. Я знаю, что это требует использования setInterval, но моя главная задача - изменить цвета карточек и заставить их поменять на правильные цвета в зависимости от того, совпадает ли это. Это то, что я до сих пор: 

var elements = document.getElementsByClassName('grid-cell');
var i;
var picks = [];

//Event Listeners to respond to a click on the squares.
for (i = 0; i < elements.length; ++i) {
 elements[i].addEventListener('click', showColor);
}


function showColor(){
	this.style.backgroundColor = this.getAttribute('data-color');
	picks.push(this.getAttribute('data-color'));
	console.log(picks);
	if(picks.length === 2){
		checkMatch();
		picks = [];
	}
}

function checkMatch(){
	if(picks[0] === picks[1]){
		console.log("Match");
	}else{
		console.log("Not a match");
	}
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 106.25px);
  grid-gap: 15px;
}

.grid-cell {
  height: 106.25px;
  border-radius: 3px;
  background: #000000;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Memory</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

	<div class="game-container">
  <div class="grid-container">
    <div class="grid-cell" data-color="red">
      <span></span>
    </div>
    <div class="grid-cell" data-color="blue">
      <span></span>
    </div>
    <div class="grid-cell" data-color="pink">
      <span></span>
    </div>
    <div class="grid-cell" data-color="orange">
      <span></span>
    </div>
    <div class="grid-cell" data-color="purple">
      <span></span>
    </div>
    <div class="grid-cell" data-color="green">
      <span></span>
    </div>
    <div class="grid-cell" data-color="yellow">
      <span></span>
    </div>
    <div class="grid-cell" data-color="grey">
      <span></span>
    </div>
    <div class="grid-cell" data-color="orange">
      <span></span>
    </div>
    <div class="grid-cell" data-color="red">
      <span></span>
    </div>
    <div class="grid-cell" data-color="green">
      <span></span>
    </div>
    <div class="grid-cell" data-color="pink">
      <span></span>
    </div>
    <div class="grid-cell" data-color="blue">
      <span></span>
    </div>
    <div class="grid-cell" data-color="grey">
      <span></span>
    </div>
    <div class="grid-cell" data-color="purple">
      <span></span>
    </div>
    <div class="grid-cell" data-color="yellow">
      <span></span>
    </div>
  </div>
</div>
	
	
	
	<script src="js/app.js"></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Вот решение, оно правильно устанавливает время ожидания, но имейте в виду, что вы должны отключить белые квадраты. Также исправьте проблему, когда дважды щелкали по одному и тому же квадрату. 

var elements = document.getElementsByClassName('grid-cell');
var i;
var picksColor = [];
var picks = [];

//Event Listeners to respond to a click on the squares.
for (i = 0; i < elements.length; ++i) {
  elements[i].addEventListener('click', showColor);
}


function showColor() {
  console.log(this);
  this.style.backgroundColor = this.getAttribute('data-color');
  picksColor.push(this.getAttribute('data-color'));
  picks.push(this);
  console.log(picks);
  if (picks.length === 2) {
    checkMatch();
  }
}

function checkMatch() {
  if (picksColor[0] === picksColor[1]) {
    console.log("Match");
    setTimeout(function () {
      picks[0].style.backgroundColor = 'white';
      picks[1].style.backgroundColor = 'white';

    }, 500);
  } else {
    console.log("Not a match");
    setTimeout(function () {
      picks[0].style.backgroundColor = 'black';
      picks[1].style.backgroundColor = 'black';

    }, 500);
  }
  setTimeout(function () {
    picks = [];
    picksColor = [];
  }, 600);
}

0 голосов
/ 01 мая 2018

Модифицированный код немного изменил положение вещей в основном и добавил setTimeout, чтобы пользователь мог видеть цвет до того, как он станет черным или белым, также добавил event.target в массив picks, чтобы вы знали, с какими элементами работать: 

var elements = document.getElementsByClassName('grid-cell');
var picks = [];

//Event Listeners to respond to a click on the squares.
for (var i = 0; i < elements.length; ++i) {
  elements[i].addEventListener('click', showColor);
}


function showColor(event){
    this.style.backgroundColor = this.getAttribute('data-color');
    picks.push({
      color: this.getAttribute('data-color'),
      target: event.target
    });
    if(picks.length === 2){
        checkMatch();
    }
}

function checkMatch(){
  if(picks[0].color === picks[1].color){
    console.log("Match");
    setTimeout(function(){
      picks.forEach(function(element){
        element.target.style.backgroundColor = 'white';
        picks = [];
      })  
    },500);

  }else{
    console.log("Not a match");
    setTimeout(function(){
      picks.forEach(function(element){
        element.target.style.backgroundColor = 'black';
      });
      picks = [];
    },500);
  }      
}

Это можно немного изменить и улучшить некоторые функции, но вы получите общее представление.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...