Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Préparez une image de cartes à jouer.
Obtenez une image de Trump de "Irasutoya" en grattant
Voir ici Si vous êtes en désordre, vous pouvez télécharger 54 à la main ou coder avec vue.
Montrons 52 cartes à jouer. (Sans Joker)
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<img
v-bind:src="card"
alt=""
width="110"
height="135"
/>
</span>
</div>
</template>
<script>
export default {
name: 'TopPage',
data: function () {
return {
cards: [],
}
},
methods: {
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ('00' + i).slice(-2)
this.cards.push(require('@/assets/images/card_' + type + '_' + number + '.png'))
}
}
},
mounted () {
this.setCardImage('club');
this.setCardImage('diamond');
this.setCardImage('heart');
this.setCardImage('spade');
}
}
</script>
Mélanger les cartes à jouer
PlayScreen.vue
<template>
...
..
.
</template>
<script>
export default {
...
..
.
methods: {
//ajouter à
shuffle: function () {
for (let i = this.cards.length - 1; i > 0; i--){
let r = Math.floor(Math.random() * (i + 1));
let tmp = this.cards[i];
this.cards[i] = this.cards[r];
this.cards[r] = tmp;
}
},
...
..
.
},
mounted () {
this.setCardImage('club');
this.setCardImage('diamond');
this.setCardImage('heart');
this.setCardImage('spade');
this.shuffle(); //ajouter à
}
}
</script>
Il est maintenant mélangé.
Ajouter des options avant et arrière à la carte
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Définir l'URL de l'image avec la liaison de style-->
<img
v-bind:src="card.isOpen ? card.cardInfo.front : card.cardInfo.back"
alt=""
width="110"
height="135"
/>
</span>
</div>
</template>
<script>
export default {
...
..
.
methods: {
...
..
.
//Modifier cette méthode
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false, //L'état initial doit être affiché au dos.
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`), //table
back: require("@/assets/images/card_back.png ") //retour
}
};
this.cards.push(card);
}
}
},
mounted () {
...
..
.
}
}
</script>
Permet d'afficher la carte face vers le haut en cliquant sur l'image.
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Donnez un événement de clic et définissez la méthode ajoutée-->
<img
v-bind:src="card.isOpen ? card.cardInfo.front : card.cardInfo.back"
alt=""
width="110"
height="135"
@click="open(index)"
/>
</span>
</div>
</template>
<script>
export default {
...
..
.
methods: {
...
..
.
//Ajouter cette méthode
open: function(index) {
//Tournez la carte face vers le haut
this.cards[index].isOpen = true;
}
},
mounted () {
...
..
.
}
}
</script>
Mettre en œuvre une faiblesse nerveuse
Assurez-vous que toutes les cartes sont retournées face cachée lorsque vous retournez deux cartes
PlayScreen.vue
<template>
...
..
.
</template>
<script>
let openCountByPlayer = 0; //Combien de cartes le joueur a retourné
export default {
...
..
.
methods: {
...
..
.
//Modifier cette méthode
open: function(index) {
//Ne retournez pas deux ou plus
if (openCountByPlayer + 1 > 2) return;
//Tournez la carte face vers le haut
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
//Assurez-vous que la carte est face vers le bas lorsque vous retournez deux cartes
this.reset();
}
},
//Ajouter cette méthode
reset: function() {
setTimeout(() => {
this.cards.forEach((card, index) => {
if (card.isOpen) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
},
...
..
.
}
</script>
Si les deux numéros inversés correspondent, laissez-les face visible
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Cartes déjà acquises(isGet != null)Faites-le face visible.-->
<img
v-bind:src="(card.isOpen || card.isGet != null) ? card.cardInfo.front : card.cardInfo.back"
alt=""
width="110"
height="135"
@click="open(index)"
/>
</span>
</div>
</template>
<script>
let openCountByPlayer = 0; //Combien de cartes le joueur a retourné
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
methods: {
...
..
.
//Modifier cette méthode
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false,
isGet: null, //Ajout de la propriété isGet
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`),
back: require("@/assets/images/card_back.png ")
}
};
this.cards.push(card);
}
},
//Modifier cette méthode
open: function(index) {
//Ne retournez pas deux ou plus
if (openCountByPlayer + 1 > 2) return;
//Tournez la carte face vers le haut
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
this.isNumbersMatch();
//Assurez-vous que la carte est face vers le bas lorsque vous retournez deux cartes
this.reset();
}
},
//Modifier cette méthode
reset: function() {
setTimeout(() => {
//Retournez toutes les cartes autres que celle que vous avez acquise face cachée
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
isNumbersMatch: function() {
//Obtenez une image face visible (cartes qui correspondent déjà aux numéros (isGet)!=null) est exclu)
let openCards = [];
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
openCards.push({ index, card });
}
});
//Obtenez si les nombres correspondent
let firstCard = openCards[0];
let secondCard = openCards[1];
if (firstCard.card.cardInfo.number == secondCard.card.cardInfo.number) {
this.cards[firstCard.index].isGet = PLAYER;
this.cards[secondCard.index].isGet = PLAYER;
}
}
},
...
..
.
}
</script>
Afficher le nombre de paires acquises
PlayScreen.vue
<template>
<div>
<v-card>
<!--Utiliser la propriété calculée ajoutée-->
<v-row no-gutters>
<v-col>Nombre de paires que vous avez:{{ getPlayerPairs }}ensemble</v-col>
</v-row>
<v-divider class="mb-4"></v-divider>
...
..
.
</v-card>
</div>
</template>
<script>
let openCountByPlayer = 0; //Combien de cartes le joueur a retourné
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
//Propriété calculée ajoutée
computed: {
getPlayerPairs: function() {
if (!this.cards || this.cards.length === 0) return;
return (
this.cards.filter(card => { return card.isGet === PLAYER; }).length / 2
);
}
},
...
..
.
}
</script>
Recommended Posts