Jeu de bataille navale

Description du projet

Dans ce projet on réalise un jeu de bataille navale en JavaScript.

Le plateau de jeu est une grille de 10 par 10 cases :

L'ordinateur place au hasard sur cette grille (sans le montrer) :

Le joueur saisit successivement des positions dans un champs de texte, selon le cas l'ordinateur affiche un message qui indique :

Le plateau de jeu est également mis à jour : une case colorée en bleu indique un coup « à l'eau », une case colorée en rouge indique un coup « touché ».

Lorsque tous les bateaux ont été coulés un message de félicitations s'affiche avec le nombre de coups joués.

Interface utilisateur

Le jeu s'insère dans une page web qui contient l'interface utilisateur. Cette interface est constituée :

Le programme JavaScript du jeu, quant à lui, figure dans le fichier séparé bataille.js.

Programme en JavaScript

Représentation interne du jeu

On décide de conserver l'état du jeu dans un tableau JavaScript à deux dimensions qui contient des nombres selon le codage suivant :

Déroulement du jeu

Le joueur saisit son coup en entrant la lettre de la colonne (A à J) suivie du numéro de la ligne (1 à 10).

Lorsqu'il clique sur le bouton ou appuie sur la touche "entrée" le programme doit :

L'étude de ce scénario permet d'organiser le code du programme JavaScript en différentes fonctions :

Placement au hasard des bateaux

Dans un premier temps on ne programme pas le placement aléatoire au sort des bateaux sur la grille. On travaille avec le tableau plateau suivant tout prêt :

var plateau=[[0,0,0,0,0,0,0,0,0,0],
[0,5,0,0,0,0,2,2,2,2],
[0,5,0,1,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,3,0,0],
[4,4,4,0,0,0,0,3,0,0],
[0,0,0,0,0,0,0,3,0,0]];

Ce n'est qu'une fois le jeu réalisé et testé qu'on se penche sur la problématique du positionnement au hasard des bateaux.

La stratégie est de partir d'un tableau rempli de 0 et d'ajouter successivement les différents bateaux en évitant qu'ils se superposent.

Pour cela une position de départ est tirée au harsard et équiprobablement nous essayons de placer le bateau horizontalement ou verticalement à partir de cette position en vérifiant qu'il ne vient pas télescoper un bateau déjà placé.

Les fonctions utilisées sont les suivantes :