Question

我正在进行一项任务，您可以创建一个带有4x4网格div的记忆游戏作为卡片。最终目标是用户选择两张牌。如果它们匹配，则将它们从游戏中移除（将颜色更改为白色以使卡片显示为不亮）如果它们不匹配，则将它们变回黑色。我使用console.logs作为占位符只是为了表明函数正常运行，但我仍然坚持如何更改颜色。此外，在变为白色或黑色之前，卡的原始颜色必须保持显示两秒钟。我知道这需要使用setInterval，但我主要关注的是改变卡片的颜色，并根据它是否匹配将它们更改为正确的颜色。这就是我到目前为止所做的：

＆＃13;

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");
	}
}

＆＃13;

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 106.25px);
  grid-gap: 15px;
}

.grid-cell {
  height: 106.25px;
  border-radius: 3px;
  background: #000000;
}

＆＃13;

<!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>

＆＃13;

Answer 1

这是一个解决方案，它设置了超时，但请记住，您必须禁用白色方块。同时修复了点击两次相同方块的问题。

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);
}

Answer 2

修改你的代码大部分移动了一些东西并添加了一个setTimeout，这样用户可以在它变为黑色或白色之前看到颜色，还将event.target添加到picks数组中，这样你就知道要使用哪些元素： / p>

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);
  }      
}

它可以重构一点并改进一些功能，但你会得到一般的想法。

如何更改匹配游戏的两个div的颜色？

2 个答案: