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.