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 ! 😉
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 ! 😈
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 Firebasedotenv
pourra nous permettre d'interpreter notre fichier ".env" dans lequel nous stockerons nos informations de connexion à notre BDDcors
s'occupera des autorisations de requêtes entre le server et notre applicationbody-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 ! 😍
Allez hop ! On va sur Firebase : https://firebase.google.com/
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 👊
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 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
etroutes
- 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 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 😺 !
- let : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/let
- var : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/var
- const : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/const
- array : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array
- function() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/function
- async function : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/async_function
- await : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/await
- .get() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/get
- .then() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
- if...else : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/if...else
- try...catch : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/try...catch
- .addEventListener() : https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
- "DOMContentLoaded" : https://developer.mozilla.org/fr/docs/Web/API/Window/DOMContentLoaded_event
- .getElementById() : https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById
- .slice() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
- .forEach() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- .createElement() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- .classList : https://developer.mozilla.org/fr/docs/Web/API/Element/classList
- .replace() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace
- .setAttribute : https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute
- .getAttribute() : https://developer.mozilla.org/fr/docs/Web/API/Element/getAttribute
- .appendChild() : https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild
- .innerHTML : https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML
- .querySelectorAll() : https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll
- .querySelector() : https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector
- .add() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Set/add
- .push() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push
- .setTimeout() : https://developer.mozilla.org/fr/docs/Web/API/setTimeout
- .setInterval() : https://developer.mozilla.org/en-US/docs/Web/API/setInterval
- .reload() : https://developer.mozilla.org/fr/docs/Web/API/Location/reload
- .Math.random() : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random
- .Math.floor : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
- .alert() : https://developer.mozilla.org/fr/docs/Web/API/Window/alert
- console.log() : https://developer.mozilla.org/fr/docs/Web/API/Console/log