Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~

<< Partie 2 | Partie 4 >>

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>

image.png

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é. image.png

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>

image.png

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>

image.png

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>

image.png

<< Partie 2 | Partie 4 >>

Recommended Posts

Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 5] ~ Authentification des utilisateurs ~
Créons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 2] ~ Configuration de Vue ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 4] ~ Construction MySQL et migration de base de données avec Docker ~
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Essayez de créer un jeu simple avec Python 3 et iPhone
Créons une application Mac avec Tkinter et py2app
Faisons une interface graphique avec python.
Faisons une rupture de bloc avec wxPython
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Créez un thermomètre avec Raspberry Pi et rendez-le visible sur le navigateur Partie 4
Faisons un jeu de shiritori avec Python
Faisons la voix lentement avec Python
Faisons un langage simple avec PLY 1
Créez DNN-CRF avec Chainer et reconnaissez la progression des accords de la musique
Créez un framework Web avec Python! (1)
Faisons une IA à trois yeux avec Pylearn 2
Implémenter un modèle avec état et comportement (3) - Exemple d'implémentation par décorateur
Faisons un bot Twitter avec Python!
Créez un framework Web avec Python! (2)
Fabriquez un thermomètre avec Raspberry Pi et rendez-le visible sur le navigateur Partie 3
Créons une application Web de conversion A vers B avec Flask! De zéro ...
J'ai fait une application d'envoi de courrier simple avec tkinter de Python
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Exécutez cbc de "Faisons un compilateur normal" avec Java 8 ou version ultérieure + 64 bits
Obtenez le cours de l'action d'une entreprise japonaise avec Python et faites un graphique
Implémentation de l'arbre TRIE avec Python et LOUDS
Remplaçons UWSC par Python (5) Faisons un robot
Créons une application capable de rechercher des images similaires avec Python et Flask Part1
Créons une application capable de rechercher des images similaires avec Python et Flask Part2
Obtenez une grande quantité de données Twitter de Starba avec python et essayez l'analyse de données Partie 1
Faisons un Makefile et construisons-le (super débutant)
[Jouons avec Python] Créer un livre de comptes de ménage
Comment faire un jeu de tir avec toio (partie 1)
[# 2] Créez Minecraft avec Python. ~ Dessin du modèle et implémentation du lecteur ~
Créez un lot d'images et gonflez avec ImageDataGenerator
Facilitons un peu la gestion des dépendances avec pip
Essayez de créer une grille sphérique avec Rhinoceros / Grasshopper / GHPython
[Super facile] Faisons un LINE BOT avec Python.
Créez facilement un TweetBot qui vous informe de la température et de l'humidité avec Raspberry Pi + DHT11.
Créons un client de socket Web avec Python. (Authentification par jeton d'accès)
À la suite du montage et du réglage avec POH! Lite
Créez un plug-in tky2jgd sans praticité avec QGIS Partie 2
Associez Python Enum à une fonction pour la rendre appelable
Transformez le nombre de secondes donné en heures, minutes et secondes
Créons un diagramme PRML avec Python, Numpy et matplotlib.
Créer un plug-in tky2jgd sans praticité avec QGIS Partie 1
Détecter les objets d'une couleur et d'une taille spécifiques avec Python
Créez des RPG 2D avec Ren'Py (3) - Boutique d'objets et d'outils
Faisons un diagramme sur lequel on peut cliquer avec IPython
Fabriquez un thermomètre BLE et obtenez la température avec Pythonista3