文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试从内存卡问题中删除类

问尝试从内存卡问题中删除类
EN

Stack Overflow用户

提问于 2019-08-17 01:01:47

回答 1查看 60关注 0票数 1

我正在试着创造一个记忆游戏。当牌不相等时，我想让它们翻回来。然而，当我尝试实现这一点时，只有第一张卡被翻转回来，而第二张卡却没有。

我尝试从容器div访问该卡。

我期望记忆游戏中选择的两张牌在不匹配的情况下都会翻转。然而，当它不匹配时，只有一个翻转。

let box_inner = document.querySelectorAll('.box-inner');
let box_back = document.querySelectorAll('.box_back');
let box_front = document.querySelectorAll('.box-front');

const images = [{
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  }


]


let choices = [];
const container = document.querySelector('.container');

function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
    box_back[i].style.backgroundImage = `url(${images[i].url})`;
    box_front[i].dataset.name = images[i].name;
    box_front[i].dataset.id = i;
    box_back[i].dataset.name = images[i].name;




  }

}
ShuffleSquares();



function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    if (choices[0].dataset.name === choices[1].dataset.name) {
      console.log('winner');
      choices = [];
    } else {
      console.log('Loser');
      choices = [];
      Match();
    }
  }
}

function Match() {
  for (var i = 0; i < box_inner.length; i++) {
    if (box_inner[i].classList.contains('is-flipped')) {
      box_inner[i].classList.remove('is-flipped');
    }
  }
}

function shuffle(array) {
  var currentIndex = array.length;
	var temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
		// Pick a remaining element...
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;

		// And swap it with the current element.
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}

	return array;

  
}

container.addEventListener('click', FindAPair);

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
</div>

dom

javascript

回答 1

Stack Overflow用户

发布于 2019-08-19 01:24:52

问题中的代码遍历所有卡片(包括匹配的卡片)：

for (var i = 0; i < box_inner.length; i++) {
  if (box_inner[i].classList.contains('is-flipped')) {
    box_inner[i].classList.remove('is-flipped');
  }
}

要翻转不匹配的牌，只需遍历存储它们的数组，即choices

choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));

您也不会让浏览器有机会向用户显示不匹配的卡片，因为您在没有超时的情况下将它们翻转回来。我为你添加了它，但我没有注意在超时期间从用户那里丢弃click，你可能想自己添加它：

let choices = [];
function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    setTimeout(checkChoices, 500);
  }
}

function checkChoices() {
  if (choices[0].dataset.name === choices[1].dataset.name) {
    console.log('winner');
    choices = [];
  } else {
    console.log('Loser');
    choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));
    choices = [];
  }
}

(function init() {
  let box_inner = document.querySelectorAll('.box-inner');
  let box_back = document.querySelectorAll('.box_back');
  let box_front = document.querySelectorAll('.box-front');

  const images = [{
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  }
  ];

  function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
      box_back[i].style.backgroundImage = `url(${images[i].url})`;
      box_front[i].dataset.name = images[i].name;
      box_front[i].dataset.id = i;
      box_back[i].dataset.name = images[i].name;




  }

  }
  ShuffleSquares();

  function shuffle(array) {
  var currentIndex = array.length;
      var temporaryValue, randomIndex;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
      }

      return array;

  
  }
  const container = document.querySelector('.container');
  container.addEventListener('click', FindAPair);
})();

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57528553

复制

相似问题

问尝试从内存卡问题中删除类
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试从内存卡问题中删除类EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试从内存卡问题中删除类
EN