Présentation du projet
Ce projet est un jeu de Dames que j’ai réalisé durant la 2ème année de mon BTS, . Ce projet est JavaScript, HTML, CSS. Ce projet nous permet de jouer a ce jeu de manière transparent et fluide. Dans la suite de cette présentation je vais vous expliquez les différent ligne de code.
Nous retrouvons en premier lieu le début avec la la création du tableau avec les pions. C’est à dire un tableau représentant l’état initial du plateau de jeux
const board = [
null, 0, null, 1, null, 2, null, 3,
4, null, 5, null, 6, null, 7, null,
null, 8, null, 9, null, 10, null, 11,
null, null, null, null, null, null, null, null,
null, null, null, null, null, null, null, null,
12, null, 13, null, 14, null, 15, null,
null, 16, null, 17, null, 18, null, 19,
20, null, 21, null, 22, null, 23, null
]
En suite j’ai fait une déclaration de fonction findPiece qui prend un identifiant de pièce, le parse en entier et renvoie l’indice de cette pièce sur le plateau.
Sélectionne différents éléments du DOM pour les cellules, les pièces rouges et noires, les textes indiquant le tour et un diviseur.
const cells = document.querySelectorAll(« td »);
let redsPieces = document.querySelectorAll(« p »);
let blacksPieces = document.querySelectorAll(« span »)
const redTurnText = document.querySelectorAll(« .red-turn-text »);
const blackTurntext = document.querySelectorAll(« .black-turn-text »);
const divider = document.querySelector(« #divider »)
Initialisation des variables pour suivre l’état du jeu : le tour, le score des joueurs et une variable pour les pièces du joueur actuel.
let turn = true;
let redScore = 12;
let blackScore = 12;
let playerPieces;
Initialisation un objet selectedPiece qui stocke différentes propriétés pour la pièce sélectionnée et ses déplacements possibles.
let selectedPiece = {
pieceId: -1,
indexOfBoardPiece: -1,
isKing: false,
seventhSpace: false,
ninthSpace: false,
fourteenthSpace: false,
eighteenthSpace: false,
minusSeventhSpace: false,
minusNinthSpace: false,
minusFourteenthSpace: false,
minusEighteenthSpace: false
}
On a les fonctions qui nous montre la logique du jeu.
On a les fonctions suivantes
La fonction getPlayerPieces permet de déterminer quelles pièces appartiennent au joueur dont c’est le tour, puis effectue quelques réinitialisations.
En suite function removeCellonclick permet de supprimer les attributs ‘onclick’ de toutes les cellules du tableau, la function resetBorders Réinitialise les bordures des pièces du joueur, réinitialise les propriétés de la pièce sélectionnée et obtient la pièce sélectionnée, function makeMove(number) Effectue le mouvement sélectionné et met à jour l’affichage des pièces sur le plateau, et function changeData Met à jour les données du plateau après le déplacement des pièces et les événements associés.
Dans le déroulement de la logique du jeu, on a d’autre fonction qui permet le bon fonctionnement du jeu.
Exemple:
function removeEventListeners qui permet en eneffet de supprimer les écouteurs d’événements des pièces après le mouvement et vérifie s’il y a un vainqueur. On a aussi function checkForWin() qui permet de vérifier s’il y a un vainqueur en fonction du score des joueurs et change de joueur pour le prochain tour. Les deux fonctions function changePlayer() et la givePiecesEventListeners() permet de passer au joueur suivant pour le prochain tour et met à jour l’affichage pour indiquer le tour du prochain joueur et l’initialisation des écouteurs d’événements pour les pièces au début du jeu.
Dans la suite de ce projet, je compte le continué a fin que deux personnes peuvent jouer en ligne ou entre Ami
