我正在做一个简单的颜色记忆游戏，最初有6个黑盒子，点击它们改变颜色，从一个预定义的数组中取颜色，这个数组在游戏开始时被打乱。
但是我已经被比较部分- handleCardClick函数困了好几个小时了。当两个框的颜色相同时，它可以工作;然而，当颜色不同时，只有第二个被点击的框会变回黑色，而第一个框保持彩色。
我似乎找不到一种方法来存储第一个被点击的框。也许我的方法本质上是错误的。下面是我的代码：
let colors = ['red', 'green', 'blue', 'red', 'green', 'blue']
const startButton = document.querySelector('.js-start-btn')
const cards = document.querySelectorAll('.js-card')
const shuffleArray = () => {
var i = 0
, j = 0
, temp = null
for (i = array.length - 1; i > 0; i -= 1) {
j = Math.floor(Math.random() * (i + 1))
temp = array[i]
array[i] = array[j]
array[j] = temp
}
}
let emptyArr = []
const handleCardClik = () => {
// Variable to store first click card
let firstCard
for (let i = 0; i < cards.length; i++) {
cards[i]?.addEventListener('click', () => {
cards[i].style.backgroundColor = colors[i]
firstCard = cards[i]
//push colors into an empty array and start comparing them when there are two colors
emptyArr.push(colors[i])
if (emptyArr.length === 2) {
// if colors are same apply them to the cards, clear the array and the storing variable
if (emptyArr[0] === emptyArr[1]) {
firstCard = emptyArr[0]
cards[i].style.backgroundColor = emptyArr[1]
firstCard = ''
emptyArr = []
// if colors differ keep them for 1 second, then change back to black
} else if (emptyArr[0] !== emptyArr[1]) {
firstCard = emptyArr[0]
cards[i].style.backgroundColor = emptyArr[1]
emptyArr = []
setTimeout(() => {
firstCard = 'black'
cards[i].style.backgroundColor = 'black'
}, 1000)
firstCard = ''
}
}
})
}
}
const initializeGame = () => {
shuffleArray(colors)
for (let i = 0; i < cards.length; i++) {
cards[i].style.backgroundColor = 'black'
}
handleCardClik()
}
startButton?.addEventListener('click', () => {
initializeGame()
})
<!-- -->
<body><section class="section-top sec-position">
<div class="top-wrapper">
<button class="start-btn js-start-btn">START</button>
</div>
</section>
<section class="section section-main sec-position">
<div class="main-wrapper">
<div class="top-row">
<div class="card js-card"></div>
<div class="card js-card"></div>
<div class="card js-card"></div>
</div>
<div class="bot-row">
<div class="card js-card"></div>
<div class="card js-card"></div>
<div class="card js-card"></div>
</div>
</div>
</section>
<section class="section-bot sec-position">
<span class="win-message">WINNER LOSER</span>
</section>
<script src="/scripts.js"></script>
</body>
<!-- -->
.sec-position {
max-width: 1200px;
margin: 0 auto 0 auto;
}
.main-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
padding-top: 50px;
padding-bottom: 50px;
}
.card {
width: 200px;
height: 200px;
gap: 30px;
background-color: black;
}
.top-row {
display: flex;
gap: 30px;
}
.bot-row {
display: flex;
gap: 30px;
}
1条答案
按热度按时间eagi6jfj1#
我对handleCardClik函数做了一些更改，它应该可以工作，但您的代码无法工作的主要原因是settimeout函数，因为您在firstcard变量运行前重置了它，它在1秒延迟后运行，新值导致错误，我只是将该值缓存在名为cachedFirstCard的变量中。希望这对您有所帮助