javascript - 记忆卡游戏“if else”语句不起作用(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>
解决方案
元素的classList
属性返回一个活动的DOMTokenList,它在 JavaScript 中是一个对象,具有添加、删除或检查列表中是否存在类的方法。
现在 JavaScript 中的独立对象永远不会相等,即使它们具有相同的属性。(注意值null
不是对象)。
所以比较表达式
firstCard.classList === secondCard.classList
总是false
- 令牌列表不一样。
您可以直接比较className
属性以查看卡片是否以相同的顺序具有相同的类名,但添加和删除类可能会改变空格分隔className
字符串中类名的顺序,因此在这种情况下可能不起作用。
您可以使用其对象属性将字符串值可靠地存储在元素上dataset
,或者您可以为每张卡片指定一个id
值,以使用卡片 ID 作为属性名称来查找记录卡片详细信息的 JavaScript 对象。您可能希望设计访问卡属性的其他可能性。
祝你任务顺利。
推荐阅读
- angular - 部署到 IIS 的 Angular 脚本出现 404 错误
- android - 更新自己的个人资料图片 - 无法将 BLOB 转换为字符串
- ios - 以编程方式添加子视图后自动调整单元格大小
- c# - ADFS、WindowsIdentity 和 EFCore
- typescript - 将所有 Date 属性(包括嵌套)转换为 TypeScript 泛型类型中的字符串
- css - 表格行突出显示图片区域
- reactjs - 为什么我在 React 中从数据库 Postgresql 加载数据时出现错误?
- r - R - 计算不返回正确答案 0
- python - 使用 python 和 Scikit Learn 为 K-NN 机器学习算法实现 ROC 曲线
- json - jmeter JSON Extractor 无法处理 [