Editions ENI Livres | Vidéos | e-Formations
Le taquin
Un petit jeu
1. Présentation
Après quelques chapitres consacrés aux feuilles de style et à jQuery, il serait intéressant de les mettre en pratique pour créer une vraie application. Un jeu se prêterait bien à une telle mise en pratique. Le taquin est un jeu créé vers 1870 aux États-Unis. Il se compose d’un cadre carré dans lequel quinze pièces, également carrées, peuvent coulisser. Chaque pièce est numérotée de 1 à 15 et peut se déplacer horizontalement ou verticalement. La seizième case est vide, ce qui permet de déplacer les pièces une par une. Le but du jeu étant de remettre les pièces dans l’ordre.
L’avantage d’un jeu de taquin, c’est qu’il ne faut pas beaucoup de code : moins de cent lignes sont nécessaires pour tout faire fonctionner, c’est la preuve que l’utilisation conjointe des CSS et de jQuery est la clé d’une application légère et efficace. Le programme commence par la déclaration des styles.
<!DOCTYPE html>
<html>
<head>
<title>TAQUIN</title>
<meta charset='utf-8'></meta>
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<style>
body {user-select:none}
div.cadre {width:22em; height:22em; border:1em solid #900;
border-radius:2em; background-color:#CCC;
margin:auto; position:relative}
div.case {width:5em; height:5em; position:absolute}
div.piece {border-radius:1em; background-color:#FFF;
border-style:ridge; text-align:center; line-height:5em} ...Le script
1. L’initialisation
Le script commence par la déclaration de deux variables globales dx et dy, qui vont stocker la distance réelle (en pixels) entre deux cases du jeu. On utilise deux variables, car rien ne garantit que la résolution de l’affichage soit la même suivant les deux axes. Ces deux variables vont servir à déterminer si une case peut être déplacée.
On passe ensuite au gestionnaire d’événement ready qui se déclenche lorsque la page est complètement chargée pour effectuer les initialisations nécessaires.
<script>
var dx,dy;
$(document).ready(function()
{
for(let i=0; i<15; i++)
{
let piece=$('<div>')
.appendTo('div.cadre')
.addClass('case piece')
.attr('id',i)
.html('<span>'+(i+1)+'</span>')
.css('left',((i&3)*5.5)+'em')
.css('top',((i>>2)*5.5)+'em');
piece
.data('left',piece.css('left'))
.data('top',piece.css('top'));
}
dx=$('#1').position().left-$('#0').position().left;
dy=$('#4').position().top-$('#0').position().top;
couleur();
}); La fonction d’initialisation du programme commence par créer les 15 pièces du jeu et à les mettre en place. Chaque pièce est un bloc div, on leur applique toute une série de commandes jQuery pour les créer.
appendTo(’div.cadre’)
Cette instruction rattache la pièce nouvellement créée au cadre.
addClass(’case piece’)
Cette instruction définit les propriétés de style de la pièce. La classe case contient les propriétés de dimension, et la classe piece l’apparence graphique.
attr(’id’,i)
Cette instruction identifie ensuite la pièce. L’attribut id reçoit tout simplement la valeur de l’indice de boucle, donc un nombre entre 0 et 14.
html(’<span>’+(i+1)+’</span>’)...
