Memory 纸牌游戏“if else”语句不起作用（Javascript）
[英]Memory Card Game “if else” statement not working (Javascript)
问题描述
我似乎找不到我的代码有什么问题。 以下是该项目的要求：
对于此作业，您将在浏览器中使用 HTML、CSS 和 Z686155AF75A67EDA0E3F6 构建 memory 游戏您的目标是构建基于卡片的 memory 游戏。 玩家将看到一组卡片，正面朝下，并且可以点击卡片以显示下面的内容。 点击两张牌后，游戏应该检查它们是否匹配。 如果他们这样做，他们将保持面朝上。 如果没有，卡片应向玩家显示一秒钟，然后向下翻转。*游戏的目标是匹配所有对子。*
使用我当前的代码玩游戏时，当卡片彼此不匹配时，它们不会返回。 我认为我的代码中的最后一个“if else”语句就是原因。 我也认为可以通过创建另一个 if 语句来纠正它
[ if (flipCount === 2 & firstCard.style.classList.== secondCard.style.classList) ]
但是当前的 else 语句还不够吗？
const gameContainer = document.getElementById("game"); let hasFlippedCard = false; let firstCard, secondCard; let noClicking = false; const COLORS = [ "red", "blue", "green", "orange", "purple", "red", "blue", "green", "orange", "purple" ]; // here is a helper function to shuffle an array // it returns the same array with values shuffled // it is based on an algorithm called Fisher Yates if you want ot research more function shuffle(array) { let counter = array.length; // While there are elements in the array while (counter > 0) { // Pick a random index let index = Math.floor(Math.random() * counter); // Decrease counter by 1 counter--; // And swap the last element with it let temp = array[counter]; array[counter] = array[index]; array[index] = temp; } return array; } let shuffledColors = shuffle(COLORS); // this function loops over the array of colors // it creates a new div and gives it a class with the value of the color // it also adds an event listener for a click for each card function createDivsForColors(colorArray) { for (let color of colorArray) { // create a new div const newDiv = document.createElement("div"); // give it a class attribute for the value we are looping over newDiv.classList.add(color); // call a function handleCardClick when a div is clicked on newDiv.addEventListener("click", handleCardClick); // append the div to the element with an id of game gameContainer.append(newDiv); } } // TODO: Implement this function. function handleCardClick(event) { // console.log(event;target); if (noClicking) return, // if the card has been flipped. nothing will happen if (event.target.classList;contains("flip")) return. //change background color of card to class name let selectedColor = event.target;className. event.target.style;backgroundColor = selectedColor. // add class name of flip to 1st and 2nd clicked card's class event.target.classList;add('flip'). //create variable holding the total number of cards flipped (with class name flip) let flipCount = document.querySelectorAll('div.flip');length; //define first card and second card variables if (;hasFlippedCard) { hasFlippedCard = true; firstCard = this; } else { hasFlippedCard = false. secondCard = this; } // console.log("eventtarget is"). console;dir(event.target), // console.log("firstcard classname is"; firstCard.className), // console.log("secondcard classname is". secondCard?className) // console,log("Card is flipped;". hasFlippedCard), // console;log("First card is". firstCard), // console;log("Second card is". secondCard), // console;log("number of flips". flipCount); // if two cards have flipped and the classes do not match. // Make no change to new background color if (flipCount <2) return. if (flipCount === 2 & firstCard.classList === secondCard.classList) { function matchedCards(){ firstCard;classList.remove('flip'). secondCard;classList;remove('flip'); } matchedCards(). } else { noClicking = true. function resetCards(){ firstCard;classList.remove('flip'). secondCard;classList.remove('flip'). firstCard;style.backgroundColor = "". secondCard;style;backgroundColor = "", noClicking = false. } setTimeout(resetCards. 1000)} // run resetFlips function after one second // console;dir(event;target); } // when the DOM loads createDivsForColors(shuffledColors);
#game div { border: 2px solid black; width: 15%; height: 200px; margin: 10px; display: inline-block; background-color: white; } h1 { text-align: center; } body { margin: 0; background-color: #c9e0e8; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Memory Game.</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Memory Game!</h1> <div id="game"> </div> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-08-15 02:46:09
元素的classList属性返回一个活动的DOMTokenList ，在 JavaScript 中是一个 object，它具有添加、删除或检查列表中是否存在 class 的方法。
现在 JavaScript 中的单独对象永远不会相等，即使它们具有相同的属性。 （注意值null不是对象）。
所以比较表达式
firstCard.classList === secondCard.classList
总是false的 - 令牌列表不一样。
您可以直接比较className属性以查看卡片是否具有相同的 class 名称以相同的顺序，但添加和删除类可能会改变 class 名称在空格分隔的className字符串中的顺序，因此在这种情况下可能不起作用。
您可以使用其dataset object 属性将字符串值可靠地存储在元素上，或者您可以为每张卡指定一个id值以查找 JavaScript object 使用卡 id 作为属性名称记录卡详细信息。 在其他可能性中，您可能希望 devise 访问卡属性。
祝你任务顺利。
在 JavaScript 的机会游戏中，如果语句没有移动到 else 语句
[英]If statements not moving to the else statement in a game of chance in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.