Jeu similaire a démineur

Bonjours sa fait quel que heure que je suis coincé je cherche une solution je vous explique les règle du jeu.

dans mon jeu il faut trouvé une casse en particulier celle-ci une fois découverte est de couleur verte et vous gagnez la partie. si vous avez gagnée les cliques dans le jeu de son plus permis.
les casses de couleur rouge sont le nombre d'essais que vous avez utilisé et affiche un nombre qui indique la distance ou se situe la casse a découvrir

voici une photo du rendu final que j'aimerais avoir.

Pièce jointe 558518

Premier problème.
il me reste à indiquer dans la case que je clique l'écart maximum (de lignes ou de la colonne) par rapport à la cible(casse vert)

comme on peut voir sur l'image les casses de couleur rouge ont un chiffre 1 et 3 pour dire la distance que la casse verte ce situ

deuxième problème
si la cible est atteinte (casse verte) empêcher tout nouveau clic

voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
let jeuModulePattern = (function () {
  // déclarer les variables du module
  let eTr;
  let eTd;
  let randomY;
  let randomX;
  let eNbCoups = 0;
 
  let oCibleDansGrille = {
    // fonction au chargement de la page
    // =================================
 
    initialiserPage: function () {
      // - initialiser le jeu
 
      oCibleDansGrille.initialiserJeu();
 
      //recuperation de l'id bouton   nouvejeu
      let nouveauJeu = document.getElementById("nouveauJeu");
 
      nouveauJeu.addEventListener("click", function () {
        oCibleDansGrille.initialiserJeu();
      });
    },
 
    // fonction d'initialisation d'un nouveau jeu
    // ==========================================
 
    initialiserJeu: function () {
      //Reset la grille avec les nouvelles valeur.
      document.getElementById("grille").innerHTML = "";
 
      //Reset le nombre de coups.
      eNbCoups = document.getElementById("nbCoups").innerHTML = 0;
 
      //recuperation des valeur input html nlignes et nbColonnes
      let axeX = document.querySelector("input[name=nbLignes]").value;
      let axeY = document.querySelector("input[name=nbColonnes]").value;
 
      // donne un possition aléatoire  selon la position X Y
      randomY = Math.floor(Math.random() * axeY);
      randomX = Math.floor(Math.random() * axeX);
 
      //Recuperation de l'id grille
      let eGrille = document.getElementById("grille");
 
      //creation des TR dans le dom via le nombre entré dans le nbLignes(axeY)
      for (var i = 0; i < axeY; i++) {
        eTr = document.createElement("tr");
 
        eGrille.appendChild(eTr).setAttribute("data-c", [i]);
 
        //creation des TD dans le dom via le nombre entré dans le nbColonnes(axeX)
        for (var j = 0; j < axeX; j++) {
          eTd = document.createElement("td");
 
          eTr.appendChild(eTd).setAttribute("data-l", [j]);
 
          //apelle la fonction jouer
          eTd.addEventListener("click", function (evt) {
            oCibleDansGrille.jouer(evt);
          });
        }
      }
    },
 
    // fonction de traitement d'un clic sur une case
    // =============================================
 
    jouer: function (evt) {
      //recupere la colonne et sa valeur.
      let bonneReponceColonne = evt.target.parentNode.getAttributeNode("data-c")
        .value;
 
      //recupere la ligne et sa valeur.
      let bonneReponceLigne = evt.target.getAttributeNode("data-l").value;
 
      //verification si le nombre randomY et randomX sont egale aux bonnereponses
      if (bonneReponceColonne == randomY && bonneReponceLigne == randomX) {
        evt.target.classList.add("ok");
      } else {
        evt.target.classList.add("ko");
      }
 
      document.getElementById("nbCoups").innerHTML = eNbCoups += 1;
    },
  };
 
  return oCibleDansGrille;
})();

voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>TP2, partie 1 avec un module pattern</title>
    <style>
      body {
        margin: 40px auto;
        width: 80%;
        font-family: Arial, sans-serif;
      }
      label {
        margin-right: 20px;
      }
      label:nth-of-type(2) {
        margin-left: 40px;
      }
      input {
        padding: 0 5px;
        line-height: 28px;
        font-size: 16px;
        font-family: Arial, sans-serif;
      }
      input[type="button"] {
        display: block;
        margin: 20px 0;
        padding: 5px 20px;
      }
      #nbCoups {
        font-weight: bold;
      }
      table {
        border-collapse: collapse;
        text-align: center;
      }
      .cliquable {
        cursor: pointer;
      }
      td {
        width: 40px;
        height: 40px;
        border: 3px solid #000;
      }
      .ok {
        background-color: limegreen;
      }
      .ko {
        background-color: salmon;
      }
    </style>
 
    <script src="jeuModulePattern.js"></script>
    <script>
      window.addEventListener("load", function () {
        jeuModulePattern.initialiserPage();
      });
    </script>
  </head>
  <body bgcolor="lightblue">
    <form name="frm">
      <label>Nombre de lignes</label
      ><input
        name="nbLignes"
        id="nbLignes"
        type="number"
        value="10"
        min="2"
        max="20"
      />
      <label>Nombre de colonnes</label
      ><input
        name="nbColonnes"
        id="nbColonnes"
        type="number"
        value="10"
        min="2"
        max="20"
      />
      <input
        type="button"
        id="nouveauJeu"
        name="nouveauJeu"
        value="Nouveau jeu"
      />
    </form>
    <section>
      <h2>Trouvez la cible</h2>
      <p>Nombre de coups joués : <span id="nbCoups"></span></p>
      <table id="grille">
        <!-- exemple de structure de grille à générer dans le module pattern,
			chaque ligne tr a un dataset "l" qui contient le numéro de ligne,
			chaque cellule td a un dataset "c" qui contient le numéro de colonne:
 
			<tr data-l=1><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr>
			<tr data-l=2><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr>
			<tr data-l=3><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr> 
		 -->
      </table>
    </section>
  </body>
</html>

si vous avez de l'inspiration ou des conseilles je suis toujours ouvert au suggestion merci de prendre de votre temps.