双击/点击破坏JS内存游戏

Question

当用户与我4岁的孩子一起测试内存游戏时，她发现了一个错误。当你双击一张牌时，它会认为这是一场比赛。我尝试使用this.style.pointerEvents = 'none'禁用已单击的，然后将其设置回自动。

这适用于第二张点击的卡，但不适用于第一张(克服了使用它的要点并创建了一个新的错误！该项目目前部署在：https://dandavies23.github.io/smoothie-moves/

如果你对我如何做得更好有任何想法，我将不胜感激！

function tumblerLift() {
let cardId = this.getAttribute('data-id')
this.style.pointerEvents = 'none';
cardsChosen.push(fruitVegArray[cardId].name)
cardsChosenId.push(cardId)
this.setAttribute('src', fruitVegArray[cardId].img)
console.log(fruitVegArray[cardId])
if (cardsChosen.length === 2) {
setTimeout(checkForMatch, 500)
this.style.pointerEvents = 'auto';
}
} ```

Answer 1

好吧，我想你可以尝试使用另一个像这样的if语句(基于你的setAttribute(

function tumblerLift() {
let cardId = this.getAttribute('data-id')
this.style.pointerEvents = 'none';
cardsChosen.push(fruitVegArray[cardId].name)
cardsChosenId.push(cardId)
if(this.src==fruitVegArray[cardId].img){return null} //image already chosen
this.setAttribute('src', fruitVegArray[cardId].img)
console.log(fruitVegArray[cardId])
if (cardsChosen.length === 2) {
setTimeout(checkForMatch, 500)
this.style.pointerEvents = 'auto';
}
}

Answer 2

多亏了炸弹小队的回答，null解决方案帮助修复了匹配后出现的另一个水果错误。

这是我现在的代码：

// Tumbler lift
function tumblerLift() {
if (this.src.includes('images/blank.png')) {
return null
} // prevents fruit from reappearing, credit Y0urs Truly from Github for helping fix this bug

现在在一起的感觉好多了；实际游戏可以在这里进行：https://dandavies23.github.io/smoothie-moves/