[PYTHON] Machen wir eine nervenschwächende App mit Vue.js und Django-Rest-Framework [Teil 3] ~ Implementierung von Nervenschwäche ~
Bereiten Sie ein Bild von Spielkarten vor.
Holen Sie sich ein Bild von Trump von "Irasutoya" durch Schaben
Siehe hier Wenn Sie ein Chaos sind, können Sie entweder 54 von Hand herunterladen oder Code mit vue.
Lassen Sie uns 52 Spielkarten anzeigen. (Ohne 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>
Spielkarten mischen
PlayScreen.vue
<template>
...
..
.
</template>
<script>
export default {
...
..
.
methods: {
//hinzufügen
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(); //hinzufügen
}
}
</script>
Es wird jetzt gemischt.
Fügen Sie der Karte Optionen für Vorder- und Rückseite hinzu
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Legen Sie die URL des Bildes mit Stilbindung fest-->
<img
v-bind:src="card.isOpen ? card.cardInfo.front : card.cardInfo.back"
alt=""
width="110"
height="135"
/>
</span>
</div>
</template>
<script>
export default {
...
..
.
methods: {
...
..
.
//Bearbeiten Sie diese Methode
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false, //Der Ausgangszustand sollte auf der Rückseite angezeigt werden.
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`), //Tabelle
back: require("@/assets/images/card_back.png ") //zurück
}
};
this.cards.push(card);
}
}
},
mounted () {
...
..
.
}
}
</script>
Machen Sie es möglich, die Karte offen anzuzeigen, indem Sie auf das Bild klicken.
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Geben Sie ein Klickereignis ein und legen Sie die hinzugefügte Methode fest-->
<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: {
...
..
.
//Fügen Sie diese Methode hinzu
open: function(index) {
//Drehen Sie die Karte auf
this.cards[index].isOpen = true;
}
},
mounted () {
...
..
.
}
}
</script>
Nervenschwäche umsetzen
Stellen Sie sicher, dass alle Karten verdeckt sind, wenn Sie zwei Karten umdrehen
PlayScreen.vue
<template>
...
..
.
</template>
<script>
let openCountByPlayer = 0; //Wie viele Karten hat der Spieler umgedreht?
export default {
...
..
.
methods: {
...
..
.
//Bearbeiten Sie diese Methode
open: function(index) {
//Drehen Sie nicht zwei oder mehr um
if (openCountByPlayer + 1 > 2) return;
//Drehen Sie die Karte auf
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
//Stellen Sie sicher, dass die Karten verdeckt sind, wenn Sie zwei umdrehen
this.reset();
}
},
//Fügen Sie diese Methode hinzu
reset: function() {
setTimeout(() => {
this.cards.forEach((card, index) => {
if (card.isOpen) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
},
...
..
.
}
</script>
Wenn die beiden umgedrehten Zahlen übereinstimmen, lassen Sie sie offen liegen
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Karten bereits erworben(isGet != null)Mach es offen.-->
<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; //Wie viele Karten hat der Spieler umgedreht?
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
methods: {
...
..
.
//Bearbeiten Sie diese Methode
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false,
isGet: null, //IsGet-Eigenschaft hinzugefügt
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`),
back: require("@/assets/images/card_back.png ")
}
};
this.cards.push(card);
}
},
//Bearbeiten Sie diese Methode
open: function(index) {
//Drehen Sie nicht zwei oder mehr um
if (openCountByPlayer + 1 > 2) return;
//Drehen Sie die Karte auf
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
this.isNumbersMatch();
//Stellen Sie sicher, dass die Karte verdeckt ist, wenn Sie zwei Karten umdrehen
this.reset();
}
},
//Bearbeiten Sie diese Methode
reset: function() {
setTimeout(() => {
//Drehen Sie alle Karten außer der, die Sie erworben haben, verdeckt um
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
isNumbersMatch: function() {
//Holen Sie sich ein offenes Bild (Karten, die bereits übereinstimmende Nummern haben (isGet)!=null) ist ausgeschlossen)
let openCards = [];
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
openCards.push({ index, card });
}
});
//Holen Sie sich, ob die Zahlen übereinstimmen
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>
Zeigen Sie die Anzahl der erfassten Paare an
PlayScreen.vue
<template>
<div>
<v-card>
<!--Verwenden Sie die hinzugefügte berechnete Eigenschaft-->
<v-row no-gutters>
<v-col>Anzahl der Paare, die Sie haben:{{ getPlayerPairs }}einstellen</v-col>
</v-row>
<v-divider class="mb-4"></v-divider>
...
..
.
</v-card>
</div>
</template>
<script>
let openCountByPlayer = 0; //Wie viele Karten hat der Spieler umgedreht?
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
//Berechnete Eigenschaft hinzugefügt
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