SOURCE

var row = 8; //行数
var col = 8; //列数
var clickCount = 0;
var grid = init_grid();
var time = document.getElementById('time'); //计时
var timer = setInterval(function () {
  let seconds = (parseFloat(time.innerHTML) + 0.1).toFixed(1); //保留一位小数
  time.innerHTML = seconds;
}, 100) //定时器 100ms执行一次

//初始化矩阵 (row-行数 col-列数)
function init_grid() {

    //生成矩阵html <tr>--行标签 <td>--列标签
    let gridHtml = '';
    for (let i = 0; i < row; i++) {
        gridHtml += '<tr>'
        for (let j = 0; j < col; j++) {
            gridHtml += '<td><span class="blocks" onmousedown="block_click(' + i + ',' + j + ',event)"></span></td>';
        }
        gridHtml += '<tr>'
    }
    //写入html
    document.getElementById('grid').innerHTML = gridHtml;

    //返回矩阵二维数组
    let blocks = document.getElementsByClassName('blocks');
    let grid = new Array();
    for (let i = 0; i < blocks.length; i++) {
        if (i % col === 0) {
            grid.push(new Array());
        }
        //初始化计雷数
        blocks[i].count = 0;
        grid[parseInt(i / col)].push(blocks[i]);
    }
    return grid;
}

//方格点击事件 _i：坐标i _j:坐标j e:鼠标事件
function block_click(_i, _j, e) {

    //跳过已打开的方格
    if (grid[_i][_j].isOpen) {
        return;
    }

    //鼠标左键打开方格
    if (e.button === 0&&clickCount < 1) {
        let block = grid[_i][_j];
        clickCount++;
        if (block.innerHTML !== 'I') {
          block.innerHTML = 'I';
        } else {
          block.innerHTML = '';
        }
    }
    else if (e.button === 0&&clickCount < 2) {
        let block = grid[_i][_j];
        clickCount++;
        if (block.innerHTML !== '♥') {
          block.innerHTML = '♥';
        } else {
          block.innerHTML = '';
        }
    }
    else if (e.button === 0&&clickCount < 3) {
        let block = grid[_i][_j];
        clickCount++;
        if (block.innerHTML !== 'U') {
          block.innerHTML = 'U';
        } else {
          block.innerHTML = '';
        }
        clearInterval(timer);
        setTimeout("alert('浩浩的case必须是这么与众不同，略略略-------mohao')",600);
    
    }
        //执行打开方格函数
        block_open(_i, _j);

        //打开方格函数
        function block_open(_i, _j) {

          let block = grid[_i][_j];
          op(block);
          }
          //设定打开方格的状态与样式
    function op(block) {
      block.isOpen = true; //isOpen为自定义属性，设置为true代表已打开
      block.style.background = '#FFECF5'; //将背景设置为灰色
      block.style.cursor = 'default'; //将鼠标停留样式设置为默认
      }
}
// 为了防止第二次创建
		let playState= true
		function testAutoPlay () {
    // 返回一个promise以告诉调用者检测结果
        return new Promise(resolve => {
		if(playState){
			        let audio = document.createElement('audio');
        audio.src = "https://oss.hqgq.com/mp3/piano/2018/0710/1531200652119.mp3"
        //循环播放，如果不需要可注释
		audio.loop="loop"
        document.body.appendChild(audio);
        let autoplay = true;
        // play返回的是一个promise
        audio.play().then(() => {
            // 支持自动播放
            autoplay = true;
			console.log("正常播放")
        }).catch(err => {
            // 不支持自动播放
			console.log("不支持播放")
            autoplay = false;
        }).finally((e) => {
            resolve(autoplay);
        });
		playState=false
		}else{
			resolve(false)
		}

    });
}

let audioInfo = {
    autoplay: false,
    testAutoPlay () {
        return testAutoPlay()
    },
    // 监听页面的点击事件，一旦点过了就能autoplay了
    setAutoPlayWhenClick () {
        function setAutoPlay () {
            // 设置自动播放为true
            audioInfo.autoplay = true;
            document.removeEventListener('click', setAutoPlay);
            document.removeEventListener('touchend', setAutoPlay);
        }
        document.addEventListener('click', setAutoPlay);
        document.addEventListener('touchend', setAutoPlay);
    },
    init () {
        // 检测是否能自动播放
        audioInfo.testAutoPlay().then(autoplay => {
            if (!audioInfo.autoplay) {
                audioInfo.autoplay = autoplay;
            }
        });
        // 用户点击交互之后，设置成能自动播放
        audioInfo.setAutoPlayWhenClick();
    }
};
        // PC端
        document.addEventListener('click', ()=>{
	    audioInfo.init();
        });
        // 移动端
         document.addEventListener('touchend', ()=>{
	      audioInfo.init();
         });

<title>
  220214❤
</title>
<!-- ondragstart:防拖拽生成新页面 oncontextmenu:屏蔽右键菜单-->
<body ondragstart='return false' oncontextmenu='self.event.returnValue=false'>
  <div id='bar'>
    <span class='bar'>
      剩余雷数：
      <label id='count'>
        99
      </label>
    </span>
    <span class='bar'>
      计时：
      <label id='time'>
        0
      </label>
      s
    </span>
  </div>
  <table id='grid'>
  </table>
</body>

#bar {
      text-align: center;
      margin-bottom:20px;
    }

    .bar {
      height: 25px;
      width: 125px;
      line-height: 25px;
      display: inline-block;
      border: solid 1px #000;
      margin-left: 20px;
      margin-right: 20px;
    }
#grid {
    margin: auto;  /* 让矩阵居中显示于页面 */
}

.blocks {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;   /* 让span以block方式显示 */
    text-align: center;
    border: solid 1px #000;
    user-select: none;  /* 设置不可拖拽选中 */
    cursor: pointer;  /* 设置鼠标停留样式 */
}

.blocks:hover {
    background:#ffaad5;  /* 鼠标停留时背景颜色变化 */
}