Untitled


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<table border id=damier></table>


<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

  <script>
  // Declaration des variable

  size = 8;
  nbMines = parseInt(size * size / 10 );


  $(document).ready(function()
    { // Demarage du jeu

  for(row = 0; row < size ; row++ )
  {
  $('#damier').append('<tr>');

  for(col = 0; col < size ; col++ )
  {
  $('#damier tr:last-child').append('<td><button data-col= '+col + '
data-row=' +row +' id='+ col + '-' + row +'>'); // ajout a la fin du
dernier tr
  }
  }

  //tirer au hasard la position des mines
  for (iMine = 0 ; iMine < nbMines; iMine++)
  {
  do
  {
  col = parseInt(Math.random() * size);
  row = parseInt(Math.random() * size);
  }
  while($('#'+col+'-'+row).data('mine') =='true')
  {
  $('#'+col+'-'+row).data('mine','true');
  $('#'+col+'-'+row).html('X');

  }


  }

      $('button').on('click',function()
      {

        if($(this).data('mine')=='true')
        {
          alert('Vous vous etes fait peter la tete');
          document.location.reload(true);

        }
        ouvrir($(this));

      })


      function nbMinesAutour(col,row)
      {
        var nbMines = 0 ;
        for(iCol = -1; iCol<=1 ;iCol++)
        {
          for(iRow = -1; iRow <= 1 ; iRow++)
          {
            if($('#' + (col+iCol) + '-' + (row + iRow)).data('mine')=='true')
            {
              nbMines++;
            }

          }

        }
        return nbMines

      }


      function ouvrir(boutton)
      {

         var col = $(boutton).data('col');
         var row = $(boutton).data('row');
          // Si la case n'est pas deja ouverte
          if($(boutton).data('ouverte')!='true')
          {


            $(boutton).data('ouverte','true');
              // si il y a des mines autour
            if(nbMinesAutour(col,row))
            {
              //on ecrit le nombre de mines
              $(boutton).html(nbMinesAutour(col,row))
            }
            else
            {
              // sinon
              // on efface la case
              $(boutton).css('visibility','hidden');
              // on ouvre les 4 cases autour

              if(col< size) ouvrir($('#'+(col + 1)+'-'+row));
              if(col>0) ouvrir($('#'+(col - 1)+'-'+row));
              if(row>0) ouvrir($('#'+col+'-'+(row-1)));
              if(row<size) ouvrir($('#'+col+'-'+(row+1)));
            }

          }

              // on écrit le nombre de mines
          //sinon
              // on efface la case
              // on ouvre les 4 cases autour

      }

    })


  </script>
  <style>
  button{
  width: 30px;height: 30px;
  }
  </style>
</body>
</html>