I am learning Vue.js and I am building a simple little Mario-themed card matching game for practice. The game creates an array of 18 randomly shuffled cards, and the player is supposed to click the cards to flip them and try to get a match. The problem is that when a card is clicked, it and all it's matches also flip over. But I want only the card that has been clicked to flip.
Here is the element my Vue app is bound to:
<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>
And here is my 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;
// }
}
});
This is an incredibly frustrating issue, as from my point of view cards should be flipped based on their unique index in the array, but that clearly isn't what is happening. Instead all cards that match are being flipped and I cannot progress in creating this game with this issue. Any help identifying and fixing the source of the problem would be EXTREMELY appreciated!!