javascript - 如何为匹配游戏更改两个 div 的颜色？-6ren

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

转载作者：行者123 更新时间：2023-11-30 20:33:18

我正在做一项作业，您需要创建一个内存游戏，其中包含 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>

最佳答案

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

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

关于javascript - 如何为匹配游戏更改两个 div 的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50109302/

文章推荐： c - 如何使用 C 中的快捷方式跳过字符串中的所有第一个空格

文章推荐： C# 自定义 Linq 提供程序

文章推荐： c - 如何从c中的.txt文件中读取和提取特定文本

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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