Untitled

<html>
  <head>
    <style>
      .element {
        border: 1px solid #ccc;
        width: 50px;
        height: 50px;
        display: inline-block;
      }
      .moneda {
        border: 1px solid #ccc;
        width: 50px;
        height: 50px;
        display: inline-block;
        background-color: yellow;
      }
      #matriu {
        width: 850px;
      }
    </style>
  </head>
  <body>

    <div id="matriu">

    </div>

    <div id="temps">
      <p> hola </p>
    </div>

    <script>
      const totalNumber = 50;
      var matriu = [];
      var count = 0;
      var time = 25;
      var countWin = 0;

      for(let _i = 0; _i < 16; _i++) {
        matriu.push([]);
        for(let _j = 0; _j < 16; _j++) {
          var element = document.createElement('div');
          element.onclick = function () {
              test(_i, _j, element)
          };
          element.id = `element_${_i}_${_j}`

          if(getRandomInt(1, 5) > 3 && count < totalNumber) {
            matriu[_i].push(1);
            element.className = 'moneda';
            count++;
          }
          else {
            matriu[_i].push(0);
            element.className = 'element';
          }

          document.getElementById('matriu').appendChild(element);
        }
      }

      function test(x, y, element) {
        if(matriu[x][y] == 1) {
          countWin++;
          matriu[x][y] = 0;
        }
        document.getElementById(`element_${x}_${y}`).className = 'element';
      }

      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }

      setInterval(function() {
        time = time - 1;
        document.getElementById('temps').innerHTML = `<p>${time}</p>`;

        if(countWin === 50) {
          alert("win");
        }

        if(time < 1) {
          if(countWin === 50) alert("win");
          else alert("lose");
        }
      }, 1000);
    </script>
  </body>
</html>