Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 3] ~ Implementation of nervous breakdown ~
Prepare an image of playing cards.
Get an image of playing cards from "Irasutoya" by scraping
See here What a mess, please download 54 by hand or code with vue.
Let's display 52 playing cards. (Without 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>
Shuffle playing cards
PlayScreen.vue
<template>
...
..
.
</template>
<script>
export default {
...
..
.
methods: {
//add to
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(); //add to
}
}
</script>
It is now shuffled.
Add front and back options to the card
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Set the URL of the image with style binding-->
<img
v-bind:src="card.isOpen ? card.cardInfo.front : card.cardInfo.back"
alt=""
width="110"
height="135"
/>
</span>
</div>
</template>
<script>
export default {
...
..
.
methods: {
...
..
.
//Edit this method
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false, //The initial state should be displayed on the back.
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`), //table
back: require("@/assets/images/card_back.png ") //back
}
};
this.cards.push(card);
}
}
},
mounted () {
...
..
.
}
}
</script>
Make it possible to display the card face up by clicking the image.
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Give a click event and set the added method-->
<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: {
...
..
.
//Add this method
open: function(index) {
//Turn the card face up
this.cards[index].isOpen = true;
}
},
mounted () {
...
..
.
}
}
</script>
Implementing nervous breakdown
Make sure all the cards are turned face down when you flip two cards
PlayScreen.vue
<template>
...
..
.
</template>
<script>
let openCountByPlayer = 0; //How many cards the player turned over
export default {
...
..
.
methods: {
...
..
.
//Edit this method
open: function(index) {
//Do not turn over two or more
if (openCountByPlayer + 1 > 2) return;
//Turn the card face up
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
//Make sure the card is face down when you flip two cards
this.reset();
}
},
//Add this method
reset: function() {
setTimeout(() => {
this.cards.forEach((card, index) => {
if (card.isOpen) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
},
...
..
.
}
</script>
If the two flipped numbers match, leave them face up
PlayScreen.vue
<template>
<div>
<span v-for="(card, index) in cards" :key="index">
<!--Cards already acquired(isGet != null)Make it face up.-->
<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; //How many cards the player turned over
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
methods: {
...
..
.
//Edit this method
setCardImage: function(type) {
for (let i = 1; i < 14; i++) {
let number = ("00" + i).slice(-2);
let card = {
isOpen: false,
isGet: null, //Added isGet property
cardInfo: {
number: i,
front: require(`@/assets/images/card_${type}_${number}.png`),
back: require("@/assets/images/card_back.png ")
}
};
this.cards.push(card);
}
},
//Edit this method
open: function(index) {
//Do not turn over two or more
if (openCountByPlayer + 1 > 2) return;
//Turn the card face up
this.cards[index].isOpen = true;
openCountByPlayer++;
if (openCountByPlayer == 2) {
this.isNumbersMatch();
//Make sure the card is face down when you flip two cards
this.reset();
}
},
//Edit this method
reset: function() {
setTimeout(() => {
//Turn all cards other than the one you have acquired face down
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
this.cards[index].isOpen = false;
}
});
openCountByPlayer = 0;
}, 2000);
},
isNumbersMatch: function() {
//Get a face-up image (cards that already match the numbers (isGet)!=null) is excluded)
let openCards = [];
this.cards.forEach((card, index) => {
if (card.isOpen && card.isGet == null) {
openCards.push({ index, card });
}
});
//Get if the numbers match
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>
Display the number of acquired pairs
PlayScreen.vue
<template>
<div>
<v-card>
<!--Use the added calculated property-->
<v-row no-gutters>
<v-col>Number of pairs you got:{{ getPlayerPairs }}set</v-col>
</v-row>
<v-divider class="mb-4"></v-divider>
...
..
.
</v-card>
</div>
</template>
<script>
let openCountByPlayer = 0; //How many cards the player turned over
const PLAYER = "player";
const COMPUTER = "computer";
export default {
...
..
.
//Added calculated property
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