Javascript Vue匹配游戏一次点击即可翻转所有匹配

我正在学习Vue.js，我正在构建一个简单的马里奥主题的卡片匹配小游戏以供练习。该游戏创建了一个由18张随机洗牌的牌组成的数组，玩家应该点击这些牌来翻转它们，并尝试进行匹配。问题是，当一张卡片被点击时，它和它的所有匹配项也会翻转过来。但我只想要已经点击翻转的卡片

以下是我的Vue应用程序绑定到的元素：

<div class="container" id="matchGame">
       <div class="col-6 mx-auto bg-dark" style="margin-top:230px;">
           <h3 class="text-light text-center pt-3">Mario Bros Matching Game</h>
           <button v-on:click="start" v-show="!started" class="btn btn-lg btn-success mb-2">Start</button>
           <ul v-if="started" class="d-flex flex-sm-wrap justify-content-between mt-5 pb-5">
               <li class="mb-3 ml-2" v-for="(card, index) in cards" v-on:click="flipCard(card)">
                   <transition name="flip">
                       <span v-on:click="flipCard(index)" v-if="!card.flipped"><img class="card" v-bind:src="cards[index].front" /></span>
                       <span v-on:click="flipCard(index)" v-else><img class="card" v-bind:src="cards[index].back" /></span>
                   </transition>
               </li>
           </ul>
           <button v-on:click="stop" v-show="started" class="btn btn-danger mb-3">Stop</button>
      </div>
</div>

马里奥兄弟配对游戏
开始




停止

下面是我的JavaScript：

// This is all the data for each card
const items = [
    {
        front: 'images/cardfront.png',
        back: 'images/coin10.png',
        name: 'coin10',
        flipped: false
    },
    {
        front: 'images/cardfront.png',
        back: 'images/coin20.png',
        name: 'coin20',
        flipped: false
    },
    {
        front: 'images/cardfront.png',
        back: 'images/flower.png',
        name: 'flower',
        flipped: false
    },
    {
        front: 'images/cardfront.png',
        back: 'images/mushroom.png',
        name: 'mushroom',
        flipped: false
    },
    {
        front: 'images/cardfront.png',
        back: 'images/oneup.png',
        name: 'oneup',
        flipped: false
    },
    {
        front: 'images/cardfront.png',
        back: 'images/star.png',
        name: 'star',
        flipped: false
    }
];


// This is a function to create an array of 18 randomly shuffled cards
// Previously I had a function like it in the methods section of the Vue app but I changed 
// it while trying to solve the issue
function createGameCardsArray() {
    const cards = [];
    for (let i = 0; i <= 17; i++) {
        cards[i] = items[Math.floor(Math.random() * 6)];
    }
    return cards;
}


// Vue app
const app = new Vue({
    el: '#matchGame',
    data: {
        // This holds the array of randomly shuffled cards
        cards: createGameCardsArray(),
        gameSounds: audio,
        started: false
    },
    methods: {
        // When this method is called, all matches are flipped
        flipCard: function(card) {
            card.flipped = !card.flipped;
        },
        start: function() {
            // this.shuffle();
            console.log(this.cards);
            this.started = true;
            this.gameSounds.background.play();
            this.gameSounds.background.loop = true;
        },
        stop: function() {
            this.started = false;
            this.gameSounds.background.pause();
            this.gameSounds.background.currentTime = 0
            this.gameSounds.background.loop = false;
        },
        // shuffle: function() {
        //     const shuffledCards = [];
        //     for (let i = 0; i <= 17; i++) {
        //         shuffledCards.push(gameCards[Math.floor(Math.random() * 6)]);
        //     }
        //     this.cards = shuffledCards;
        // }
    }
});

//这是每张卡的所有数据
常数项=[
{
front:'images/cardfront.png'，
返回：“images/coin10.png”，
名称：'coin10'，
翻转：错误
},
{
front:'images/cardfront.png'，
返回：“images/coin20.png”，
名称：'coin20'，
翻转：错误
},
{
front:'images/cardfront.png'，
返回：“images/flower.png”，
名称：‘花’，
翻转：错误
},
{
front:'images/cardfront.png'，
back:'images/蘑菇.png'，
名称：‘蘑菇’，
翻转：错误
},
{
front:'images/cardfront.png'，
后退：“images/oneup.png”，
名称：“oneup”，
翻转：错误
},
{
front:'images/cardfront.png'，
返回：“images/star.png”，
名称：'星'，
翻转：错误
}
];
//这是一个创建由18张随机洗牌的牌组成的数组的函数
//以前，我在Vue应用程序的“方法”部分有一个类似的函数，但我改变了
//它在试图解决问题的同时
函数createGameCardsArray（）{
常数卡=[]；
对于（设i=0；i
createGameCardsArray
创建对
项[随机索引]
的同一实例的引用数组，因此从一个引用编辑卡片将反映对同一卡片的所有引用的更改。解决方案是使用（或）克隆每张卡片：

函数createGameCardsArray（）{
常数卡=[]；
对于（让我=0；我非常感谢，这非常有效。我仍然有点难以理解这一点，我已经用PHP编程并使用JavaScript几年了。