Ce projet utilise les frameworks jQuery et Bootstrap ainsi que la librairie approve.js.Dans cet article je vais vous expliquer le fonctionnement de la bibliothèque approve.js. Vous pouvez y jouer en ligne ici.
Code HTML
Le projet repose sur une page HTML dont voici le code.
<!DOCTYPE html>
<html>
<head>
<title>Trouve le nombre</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
<script src="./jquery-3.6.0.min.js"></script>
<script src="./bootstrap.bundle.min.js"></script>
<script src="./approve.min.js"></script>
<script src="./main.js"></script>
<link rel="stylesheet" type="text/css" href="./main.css"/>
</head>
<body>
<div class="victoryOverlay bg-success">
<div class="titleVictoryOverlay">
<p>Bravo !</p>
<p>Vous avez gagné !</p>
</div>
<br>
<div id="victoryResult"></div>
<hr>
<button class="start-50 bottom-0 translate-middle-x btn btn-light" id="newGame">Nouvelle partie</button>
</div>
<div class="loseOverlay bg-success">
<div class="titleLoseOverlay">
<p>Perdu !</p>
</div>
<br>
<div class="loseOverlayNbrComputer"></div>
<hr>
<button class="start-50 bottom-0 translate-middle-x btn btn-light" id="newGameLoseOverlay">Nouvelle partie</button>
</div>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="title display-4 fw-bold lh-1 mb-3">Trouve le nombre</h1>
<input id="enterNumber" type="number" placeholder="Entrez un nombre" min="1"></input><button class="btn btn-primary" id="validNumber">entrer</button>
<div class="errorsEnterNumber errors"></div>
<div class="tryLeft">tentatives restantes :<div id="tryLeft"></div></div>
<div id="smallerOrBigger"></div>
<button class="btn btn-danger" id="stop">Arrêter</button>
</div>
<div class="col-md-10 mx-auto col-lg-5">
<div class="p-4 p-md-5 border rounded-3 bg-light">
<div class="form-floating mb-3">
<input type="number" class="form-control" id="nbrMaxToFind" min="2">
<label for="floatingInput">nombre à trouver entre 1 et</label>
</div>
<div class="form-floating mb-3">
<input type="number" class="form-control" id="nbrTry" min="1">
<label for="floatingPassword">nombre d'essais</label>
</div>
<button class="w-100 btn btn-lg btn-success" id="play">Jouer !</button>
<hr class="my-4">
<div id="errorsNbrMaxToFind" class="errors"></div>
<p>
<div id="errorsNbrTry" class="errors"></div>
<button type="button" class="btn btn-primary howToPlayButton" data-bs-toggle="modal" data-bs-target="#modalHowToPlay">Comment jouer ?</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalHowToPlay" tabindex="-1" aria-labelledby="modalHowToPlayLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalHowToPlayLabel">Règles du jeu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Votre but est de trouver un nombre que l'ordinateur a choisi avec un nombre max d'essais.
<br>
Vous pouvez sélectionner votre nombre maximum à trouver (par défaut : 100) et votre nombres d'essai (par défaut : Il est calculé par l'ordinateur)
<br>
Déroulement du jeu : Après avoir choisi vos nombres, cliquer sur jouer puis entrez un nombre dans le champ juste en dessous du bouton. L'ordinateur vous dira si son nombre est plus petit ou plus grand.
<br>
Les messages de victoire et de défaite seront affichés en bas.
</div>
</div>
</div>
</div>
</body>
</html>
Détail des balises link et script
La balise <link> vous permet de charger des fichiers CSS et la balise <script> des fichiers JS. L’attribut href (link) ou src (script) est le lien vers le fichier à charger.
Exemples
Ces quatre lignes chargent les frameworks nécessaires.
<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
<script src="./jquery-3.6.0.min.js"></script>
<script src="./bootstrap.bundle.min.js"></script>
<script src="./approve.min.js"></script>Ces deux lignes chargent le code du jeu.
<script src="./main.js"></script>
<link rel="stylesheet" type="text/css" href="./main.css"/>Code JavaScript
Bibliothèque Approve.js
Approve.js: c’est une bibliothèque qui sert à valider le contenu des champs d’un formulaire.
Création d’un test personnalisé
La création d’un test avec approve.js nécessite les trois paramètres suivants:
- expects: Désigne les paramètres qui seront utilisés pour valider le test.
- message: C’est le message qui sera retourné lorsque le test n’est pas validé.
- validate: C’est la fonction qui sera appelée pour valider le test.
Voici un exemple de test:
let testBornes1NoMax = {
expects: [ 'mininum' ],
message: 'Vous devez saisir un nombre supérieur ou égal à {mininum}',
validate: function(value, pars) {
return (parseInt(value) >= parseInt(pars.mininum));
}
};
approve.addTest(testBornes1NoMax, 'testBornes1NoMax');Dans ce test, la fonction validate va contrôler que la valeur fournie est supérieure ou égale au minimum.
Validation du formulaire
Afin de valider le formulaire, il faut décrire les tests à appliquer aux champs dans un objet.
Exemple d’objet de validation:
let controlInputs = {
//défini les règles du champ nbrMaxToFind
maxToFind: {
required: { message: 'Veuillez entrer un nombre.' },
numeric: { message: 'Veuillez n\'entrer que des chiffres.' },
decimal: { decimal: false, message: 'Entrez un nombre entier.' },
testBornes1NoMax: { mininum: '2' }
}
}Cet objet décrit les règles qui seront appliquées afin de vérifier que la valeur du champ nbrMaxToFind est bien un nombre entier supérieur ou égal à 2.
Dans le prochain épisode, je vous expliquerai le fonctionnement du programme.