Code source du projet de la bataille navale

Tous les éléments td de la table du jeu sont de classe caseBataille. Cela permet d'uniformiser les dimensions de toutes les cases.

Le réglage text-align:center est utilisé pour que les nombres et lettres affichées sur la première ligne et la première colonne du tableau soient centrés dans les cases.

Voici l'élément table du jeu. L'attribut border="1" indique que les bordures des éléments du tableau doivent être affichées.

L'élément table contient des éléments tr qui représentent les lignes. Chaque élément tr contient des éléments td qui représentent les différentes cases de la ligne. Comme nous l'avons déjà dit tous les éléments td sont de classe caseBataille ce qui entraîne que la règle CSS vue plus haut s'applique.

Les éléments td des cases du jeu sont identifiés par leur position selon le système de repérage utilisé à la bataille navale : lettre de la colonne suivie du numéro de la ligne.

Ici nous avons la zone de saisie et le bouton.

Le code JavaScript du programme figure dans le fichier séparé : bataille.js

C'est le tableau plateau qui contient l'état des cases du jeu. Le codage est le suivant :

• 0 : case eau,

• 1 : case de porte-avions,

• 2 : case de croiseur,

• 3 : case de contre-torpilleur,

• 4 : case de sous-marin,

• 5 : case torpilleur.

En outre une case déjà jouée est codée par un nombre négatif : -1 pour le porte-avions, -2 pour le croiseur, etc.

Une case eau jouée est codée -6.

Le contenu initial est généré de façon aléatoire en appelant la fonction placeBateaux.

Le tableau navires contient le nombre de cases restantes à découvrir pour chacun des bateaux.

• navires[0] : ne sert à rien,

• navires[1] : 5 cases pour le porte-avion,

• navires[2] : 4 cases pour le croiseur,

• navires[3] : 3 cases pour le contre-torpilleur,

• navires[4] : 3 cases pour le sous-marin,

• navires[5] : 2 cases pour le torpilleur.

Nombre total de cases de navires trouvées par le joueur, pour gagner il doit découvrir les 17 cases de bateaux.

La variable finPartie est mise à la valeur true lorsque la partie est terminée.

La variable nbCoups, comme son nom l'indique, compte le nombre de coups joués.

Le tableau message contient tous les messages possibles selon les différentes situations.

Les lignes qui suivent mettent en place le dispositif d'interaction du joueur avec le programme.

• le coup proposé par le joueur (saisi dans la zone de texte) est joué en appelant jouerCoup, cela peut être déclenché soit en appuyant sur le bouton, soit en appuyant sur la touche "entrée".

• la fonction attenteCoup remet l'interface utilisateur prête à recevoir une nouvelle proposition du joueur : la zone de saisie est vidée et elle reçoit le curseur.

conversion(position)

Fonction pour convertir une position au format "bataille navale" en position au format numéros de ligne/colonne du tableau plateau.

• Paramètre : une chaine de caractères qui doit contenir une position au format "bataille navale" comme par exemple A1, C5, etc.

• Retour : un objet contenant deux propriétés colonne et ligne qui indiquent la position correspondante dans le tableau plateau.

La lettre de colonne est précisée par le premier caractère de position, l'instruction charCodeAt(0) retourne le code ASCII de cette lettre (en position 0 dans la chaîne). Le code de A est 65, de B est 66 etc., du coup en retranchant 65 on obtient le numéro de colonne de 0 à 9.

Le numéro de ligne figure dans position à partir du caractère numéroté 1, l'instruction slice(1) donne cette partie de la chaîne de caractères ; avec le parseInt nous la convertissons en nombre entier. A la bataille navale le premier numéro de ligne est 1, par contre dans le tableau la numérotation commence à 0, donc nous retranchons 1 pour terminer la conversion.

Nous retournons un objet avec les deux propriétés colonne et ligne.

getCodeCase(position)

Fonction pour connaître le code de l'état d'une case du jeu.

• Paramètre :

  • position : position d'une case au format "bataille navale".

• Retour : code de l'état de la case obtenu depuis le tableau plateau.

setCodeCase(position,valeur)

Fonction pour définir le code de l'état d'une case du jeu.

• Paramètres :

  • position : position d'une case au format "bataille navale".

  • valeur : code de l'état à attribuer à cette case (dans le tableau plateau).

majVueJeu(position,situation)

Fonction pour mettre à jour l'affichage du jeu et informer le joueur.

• Paramètres :

  • position : position de la case qui doit être mise à jour à l'affichage (au format "bataille navale").

  • situation : numéro de la situation de jeu (les différentes situations sont numérotées entre 0 et 15).

Lorsque la partie est terminée finPartie vaut true et le joueur est informé par un ajout au message. Le joueur peut alors rejouer grâce à l'instruction location.reload() qui recharge tout simplement la page.

Dans le cas contraire seul le message de situation est affiché.

Par défaut la nouvelle couleur de la case est rouge, sauf si le code de la case vaut -6 ("à l'eau") où elle est bleue claire.

jouerCoup(position)

Fonction qui contient la logique du jeu. Cette fonction est exécutée chaque fois que le joueur fait une proposition.

• Paramètre :

  • position : position de la case proposée par le joueur au format "bataille navale".

Par défaut le numéro de situation prend la valeur du code de l'état de la case.

• si la case est à l'état 0 : c'est de l'eau, elle devient une case "à l'eau" (codée -6),

• si la case est celle d'un navire (états 1 à 5), c'est touché :

  • le navire perd un élément,

  • si le nombre d'éléments du navire tombe à 0, le numéro de situation est augmenté de 10 : en effet les messages qui indiquent qu'un navire est coulé sont numérotés de 11 à 15,

  • le code de l'état de la case est opposé,

  • le nombre total de cases "touché" est incrémenté,

  • si les 17 éléments de bateau ont été trouvés la variable finPartie prend la valeur true.

• autrement, le joueur a proposé une case déjà jouée, ce qui correspond à la situation numérotée 6.

Une fois les données du jeu mises à jour et le numéro de situation déterminé, nous appelons la fonction majVueJeu pour communiquer au joueur le résultat de son action via l'interface utilisateur.

placeBateau(ligneDepart,colonneDepart,vertical,code,longueur)

Fonction qui tente de placer dans le tableau plateau les codes de cases associés à un bateau.

• Paramètres :

  • ligneDepart,colonneDepart : position de départ du bateau dans le tableau.

  • vertical : si ce paramètre vaut true le bateau est placé verticalement, s'il vaut false il est placé horizontalemment.

  • code : code du bateau (1 pour le porte-avions, 2 pour le croiseur, etc.)

  • longueur : nombre de cases occupées par le bateau (5 pour le porte-avions, 4 pour le croiseur, etc.)

• Retour : true ou false selon que le placement a réussi ou non.

Définition des incréments en ligne et en colonne pour calculer les différentes positions des éléments du bateau à partir de la position de départ et selon qu'il est placé verticalement ou horizontalement.

Boucle pour tester si toutes les cases où doit prendre place le bateau son disponibles. Si une case est déjà occupée, nous sortons immédiatement de la boucle avec succes qui vaut false pour indiquer l'échec.

En cas de succès le tableau plateau est réellement modifié avec le code du navire aux emplacements qui sont donc libres.

positionHasardBateau(code,longueur)

Fonction qui positionne au hasard un navire dans le tableau plateau. Cette fonction est appelée par la fonction placeBateaux pour positionner aléatoirement les 5 navires au début de la partie.

• Paramètres :

  • code : code des cases du navire à placer : 1 pour le porte-avions, 2 pour un croiseur, etc.

  • longueur : nombre de cases du navire : 5 pour le porte-avions, 4 pour le croiseur, etc.

La position de départ du bateau est tirée au sort, mais il n'est pas toujours possible de le placer car il ne faut pas qu'une des cases se superpose avec une case d'un autre bateau déjà placé. La fonction placeBateau tente de placer le navire et retourne true ou false selon que le placement a réussi ou non.

La boucle while permet de tirer de nouvelles positions pour le bateau jusqu'à ce qu'il puisse être placé.

La variable departLimite tient compte de la longueur du bateau dans le tirage aléatoire, par exemple si le bateau occupe 3 cases, departLimite sera un nombre entier au hasard entre 0 et 7 : horizontalement ou verticalement le bateau ne peut pas être placé à moins de 3 cases du bord.

Equiprobablement, nous tentons de placer le bateau horizontalement ou verticalement.

placeBateaux()

Fonction qui initialise le tableau des cases du jeu (tableau plateau) en positionnant au hasard les 5 navires.

Tableau rempli de 0.

Placement au hasard des 5 bateaux.

Fonction appelée au chargement de la page pour donner le curseur à la zone de saisie.