双击/单击破坏 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

感谢an answer by The Bomb Squad，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/