存储卡游戏 "if else" 语句无效 (Javascript)
Memory Card Game "if else" statement not working (Javascript)
我似乎找不到我的代码有什么问题。以下是项目要求:
对于此作业,您将使用 HTML、CSS 和 JavaScript 在浏览器中构建一个记忆游戏。您的目标是构建基于卡片的记忆游戏。
玩家将看到一组面朝下的卡片,并可以点击卡片以显示下面的内容。
单击两张牌后,游戏应检查它们是否匹配。如果他们这样做,他们将保持正面朝上。
如果没有,卡片应该向玩家显示一秒钟,然后再向下翻转。*
游戏的目标是匹配所有对。*
使用我当前的代码玩游戏时,当卡片彼此不匹配时,它们不会倒退。我认为我代码中的最后一个“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>
JavaScript 中的 classList
property of an element returns a live DOMTokenList 是一个对象,具有添加、删除或检查列表中是否存在 class 的方法。
现在 JavaScript 中的单独对象永远不会比较相等,即使它们具有相同的属性。 (注意值 null
是 不是 对象)。
所以比较表达式
firstCard.classList === secondCard.classList
总是 false
- 标记列表不一样。
您可以直接比较 className
属性以查看卡片是否具有相同的 class 名称 相同的顺序 但添加和删除 classes 存在更改 space 分隔 className
字符串中 class 名称顺序的风险,因此在这种情况下它可能不起作用。
您可以使用 dataset
对象 属性 在元素上可靠地存储字符串值,或者您可以为每张卡片提供一个 id
值以查找 JavaScript 对象使用卡 ID 作为 属性 名称记录卡详细信息。在其他可能性中,您可能想设计访问卡属性。
祝作业顺利。
我似乎找不到我的代码有什么问题。以下是项目要求:
对于此作业,您将使用 HTML、CSS 和 JavaScript 在浏览器中构建一个记忆游戏。您的目标是构建基于卡片的记忆游戏。 玩家将看到一组面朝下的卡片,并可以点击卡片以显示下面的内容。 单击两张牌后,游戏应检查它们是否匹配。如果他们这样做,他们将保持正面朝上。 如果没有,卡片应该向玩家显示一秒钟,然后再向下翻转。* 游戏的目标是匹配所有对。*
使用我当前的代码玩游戏时,当卡片彼此不匹配时,它们不会倒退。我认为我代码中的最后一个“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>
JavaScript 中的 classList
property of an element returns a live DOMTokenList 是一个对象,具有添加、删除或检查列表中是否存在 class 的方法。
现在 JavaScript 中的单独对象永远不会比较相等,即使它们具有相同的属性。 (注意值 null
是 不是 对象)。
所以比较表达式
firstCard.classList === secondCard.classList
总是 false
- 标记列表不一样。
您可以直接比较 className
属性以查看卡片是否具有相同的 class 名称 相同的顺序 但添加和删除 classes 存在更改 space 分隔 className
字符串中 class 名称顺序的风险,因此在这种情况下它可能不起作用。
您可以使用 dataset
对象 属性 在元素上可靠地存储字符串值,或者您可以为每张卡片提供一个 id
值以查找 JavaScript 对象使用卡 ID 作为 属性 名称记录卡详细信息。在其他可能性中,您可能想设计访问卡属性。
祝作业顺利。