JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c">

CSS

#c{
  width:300px;
  height:300px;
}
button{
  width:12.5%;
  height:12.5%;
  line-height:30px;
}
.f,.z{
  background:#fff;
  border:solid 1px #fff;
}
.z{
  color:#fff;
}
.b{background:#f00}

JavaScript

(function(){
    f=Math.floor;r=Math.random;b=8,s=[-1,0,1],o='',m='*',l=0;

    for(g=[i=b];i;)g[--i]=[0,0,0,0,0,0,0,0];
    for(i=10,a=f(r()*64);i--;g[f(a/b)][a%b]=m)while(g[f(a/b)][a%b])a=f(r()*64);
    for(i=64;i--;z.id='b'+(63-i),c.appendChild(z))z=document.createElement('button');
    for(d=b;d--;)
      for(r=b;r--;)
        s.map(function(y){
          s.map(function(x){
            if(g[d][r]!=m&&g[d+y]&&g[d+y][r+x]==m)g[d][r]++;
          });
        });

    c.onclick=function(e){
        var t=e.target,
            i=t.id.slice(1),
            x=i%b,
            y=f(i/b),
            n=t.className=='b';

      if(t.innerHTML||(n&&!e.ctrlKey))return;
      if(e.ctrlKey)return t.className=(n?'':'b')

      if(q(x,y))alert('boom')
      if(l==54)alert('win')
    };
  function q(x,y){
    if(x<0||x>7||y<0||y>7)return;

    var p=y*b+x,
        v=g[y][x],
        t=document.all['b'+p];

    if(v!=m&&!t.innerHTML){
      t.innerHTML=g[y][x];
      t.className='f';
      l++;
      if(!v){t.className='z';s.map(function(d){s.map(function(r){q(x+r,y+d)})})}
    }
    return v==m
  }
})();