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) :
1 porte-avions (5 cases)
1 croiseur (4 cases)
1 contre-torpilleur (3 cases)
1 sous-marin (3 cases)
1 torpilleur (2 cases)
Le joueur saisit successivement des positions dans un champs de texte, selon le cas l'ordinateur affiche un message qui indique :
si le coup a déjà été joué,
si le coup est dans l'eau,
si le coup a touché un navire (sans le couler),
si le coup a fini de couler un navire.
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.
Le jeu s'insère dans une page web qui contient l'interface utilisateur. Cette interface est constituée :
d'un élément table pour le plateau de jeu,
d'un élément input de type text pour saisir le coup,
et d'un élément input de type button pour valider le coup.
Le programme JavaScript du jeu, quant à lui, figure dans le fichier séparé bataille.js.
On décide de conserver l'état du jeu dans un tableau JavaScript à deux dimensions qui contient des nombres selon le codage suivant :
0 pour une case « eau » non jouée,
un nombre de 1 à 5 pour une case de bateau (non encore trouvée) :
1 pour une case de porte-avions,
2 pour une case de croiseur,
3 pour une case de contre-torpilleur,
4 pour une case de sous-marin
5 pour une case de torpilleur.
un nombre de -5 à -1 pour un case de bateau touchée :
-1 pour une case de porte-avions,
-2 pour une case de croiseur,
-3 pour une case de contre-torpilleur,
-4 pour une case de sous-marin
-5 pour une case de torpilleur,
-6 pour une case « eau » jouée.
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 :
accéder à/modifier l'état de la case,
informer le joueur sur le coup,
mettre à jour l'affichage du plateau à l'écran.
L'étude de ce scénario permet d'organiser le code du programme JavaScript en différentes fonctions :
getCodeCase(position), setCodeCase(position,valeur) : fonctions utilitaires pour accéder à/modifier la représentation interne du jeu.
jouerCoup(position) : fonction qui exécute la logique du jeu à partir de la position proposée par le joueur,
majVueJeu(position,situation) : fonction appelée à la fin de jouerCoup, pour rendre compte à l'utilisateur des conséquences du coup qui vient d'être joué.
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 :
placeBateau : fonction qui tente de placer un bateau et retourne true en cas de réussite, (false sinon),
positionHasardBateau : fonction qui place au hasard un bateau en appelant la fonction placeBateau jusqu'à obtenir un succès,
placeBateaux : fonction qui place les 5 bateaux au hasard au début du jeu en appelant 5 fois positionHasardBateau.