Memory Card Game !

Aujourd'hui on part sur un projet for() sympathique ! ( "for()" ahahah. T'as compris hein ? 😌 )

Création d'un petit jeu de Memory Card sur le thème de Kaamelott entièrement en JS Vanilla Tout le code est commenté pour que tu puisses comprendre et apprendre dans les meileures conditions.

Mais en cas de besoin..
Toute la documentation des ressources utilisées dans ce projet est disponible à la fin de ce Readme, alors n'hésitez pas à les consulter en cas de besoin ! 😉

Mise en place de notre Back

Nous allons enregistrer les temps de nos fabuleux joueurs. Jouer c'est sympa, si on y rajoute un peu de compétition, ça peut être intéréssant ! 😈

Installation de nos packages

Nous pouvons ouvrir un terminal ! ( ctrl + alt + t Tu me remerciera plus tard 😏 )

Les étapes à suivre :

On se déplace dans notre dossier html situé sur notre bureau

$cd Bureau/html

On y est ? Créons notre dossier qui contiendra tout notre projet !

$ mkdir nomDeMonProjet

Et on se déplace dans le dossier qui contiendra dans notre projet 😊

$cd nomDeMonProjet

Puis copie - colle les lignes suivantes :

$npm install express firebase dotenv cors body-parser

express nous permettra de gérer notre back pour la communication avec la BDD (Base De Données)
firebase est le package de notre BDD créée sur Firebase
dotenv pourra nous permettre d'interpreter notre fichier ".env" dans lequel nous stockerons nos informations de connexion à notre BDD
cors s'occupera des autorisations de requêtes entre le server et notre application
body-parser nous permettra d'analyser le corps de nos requêtes entrantes

$npm install nodemon --save-dev

nodemon nous servira à relancer automatiquement notre serveur local à chaque fois que nous enregistrons une modification au lieu de le relancer manuellement à chaque modifications
-dev nous permet de spécifier que nous souhaite l'utiliser uniquement en développement. En cas de déploiement, il ne sera pas pris en compte !

Les ressources sont prêtes ? Tu es prêt également ? Créons la base ! 😍

Firebase

Allez hop ! On va sur Firebase : https://firebase.google.com/

Connexion

Pour commencer, on va se connecter (ou s'inscrire) directement avec notre compte google ! Les choses sont biens faite n'est-ce pas ? 😇 Firebase est un service géré par Google, autant te dire que ça y va fort 👊

Le projet

Nous allons cliquer sur le petit onglet "Go to console" et créer notre petit projet ~

Suivons les étapes suivantes :

Ajouter un projet

Donnons un nom à notre projet

On désactive les Google analytics, nous ne souhaitons pas déployer notre site aujourd'hui, ils ne seront donc pas utiles !

Et hop, on créer le projet.

Ayé ? C'est fait ? On perd pas le fil alors ! La suite est par là :

Ajoutons firebase à notre projet web en cliquant sur l'icone " </> "

Nous lui attribuons un nom ( dans mon cas, j'utilise le même que mon projet )

Oh ? On dirait bien que nous avons nos informations de connection du projet ! 💛 Vous pouvez les copier coller sur un bloc note si vous voulez. Mais nous pouvons également y accéder plus tard à travers les options du projet, pas d'inquiètude 😊

On commence le code ? Ca vous tente ? Alleeeeeez !

Structuration

On va commencer par structurer notre projet, on aime quand tout est bien rangé !

Les étapes :

À la racine du projet :

Créons notre .env qui contiendra nos informations de connexion à la BDD et de notre serveur local
Créons serveur.js qui nous permettra de lancer notre serveur local afin de tester nos requêtes
Créons un dossier back-end dans notre projet

Dans le dossier Back-end :

Ajoutons les dossiers controllers, models et routes
Dans le dossier controllers, nous aurons les controllers
Dans le dossier models les models ( évidemment )
Dans le dossier routes .... Roulement de tambours... Les routes ! Tu es perspicace, j'aime ça 🔥
Ajoutons db.js qui importera nos données de connexion ainsi que les données pour notre serveur local
Puis, config.js dans lequel nous déclarons nos variables qui contiendrons nos informations de connexion de BBD + serveur local

Hey ? Tu sais quoi ? J'ai une bonne nouvelle. Si tu es arrivé jusqu'ici, tu n'auras plus qu'à faire

$ npm run start

Pas de message d'erreur ? Alors félicitations ! Nous venons d'initialiser notre back-end et de lancer notre serveur en local 😀

Jeu et instructions !

Règles

Jeu de memory card, le principe étant d'avoir un plateau de jeu avec toutes nos cartes face cachée. Le but ? Que la personne derrière son écran puisse trouver toutes les paires identiques !

Nous disposons de 14 cartes différentes, pour un plateau total de 28 cartes.

Si les cartes sélectionnées par le joueur sont identiques, alors nous les enlevons de notre plateau de jeu. Si les cartes sélectionnées par le joueur sont différentes, alors nous les retournons face cachée.

Si toutes les cartes ont été découvertes, alors la partie est gagnée ! 🥳 En cas contraire.. Le joueur a perdu.. Et oui ! C'est la vie ! Mais rien ne l'empêche de recommencer, autant de fois qu'il le souhaite 🥰

Le joueur dispose de 3 min pour chaque partie afin de pouvoir tenter de réaliser un nouveau record, souhaitons lui bonne chance 😺 !