console 命令行工具 X clear

console

window.onload = function () {

  // 图片资源
  const imgs = [];

  // 记录点击次数
  let counter = 0;

  // 记录消灭的数量
  let num = 0;


  // trans[] 数组用来记录方块状态
  // 0 为初始状态
  // 1 为点击未配对
  // 2 为点击了, 已配对
  const trans = [];

  // 记录生成背景图片地址的随机序列
  // 12 个数据
  var source = [];

  // 初始化 
  // 返回图片资源地址
  function init() {
    source = getList();
    for (let i = 0; i < source.length; i++) {
      trans[i] = 0;
      imgs[i] = '' + source[i] + '.png';
    }
    console.log(imgs);
  }

  // 获取随机序列
  function getList() {
    let len = 9;
    let arr = [];
    for (let i = 0; i < len; i++) {
      arr[i] = parseInt(Math.random() * 10 + 1);
    }
    arr = arr.concat(arr);
    console.log(arr);

    // 将随机序列打乱
    arr = shuffle(arr);
    console.log(arr);

    return arr;
  }

  // 随机打乱数组
  function shuffle(arr) {
    var len = arr.length;
    for (let i = 0; i < len - 1; i++) {
      var index = parseInt(Math.random() * (len - i));
      var temp = arr[index];
      arr[index] = arr[len - i - 1];
      arr[len - i - 1] = temp;
    }
    return arr;
  }


  // 刷新统计消息
  function statistics() {
    document.getElementById("counter").innerHTML = counter;
    document.getElementById("num").innerHTML = num;
    setTimeout(function () {
      statistics();
    }, 100);
  }


  function runGame() {
    let container = document.getElementsByClassName("box");
    let limit = 0;

    // 记录上一次点击的方块
    let last = -1;

    for (let i = 0; i < container.length; i++) {
      // 监听点击
      container[i].onclick = function () {

        url = `url("./images/${imgs[i]}")`;
        this.style.background = "no-repeat center";
        this.style.backgroundImage = url;

        // console.log("点击的模块背景为" + container[i].style.backgroundImage);
        trans[i] = 1;
        limit++;
        counter++;

        if (limit % 2 != 0) {
          last = i;
        } else {
          setTimeout(() => {
            if (url == container[last].style.backgroundImage) {
              num += 2;
              container[i].style.visibility = "hidden";
              container[last].style.visibility = "hidden";
              trans[i] = 2;
              trans[last] = 2;
            }
            for (let j = 0; j < trans.length; j++) {
              if (trans[j] == 1) {
                container[j].style.backgroundImage = 'url("./images/emoji.png")';
                trans[j] = 0;
              }
            }
          }, 500);
          limit = 0;
        }
      }
    }
  }

  init();
  runGame();
  statistics()
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/layout.css">
  <script src="./js/main.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="container">
    <div class="line">
      <div id="1_1" class="box">
      </div>
      <div id="1_2" class="box"></div>
      <div id="1_3" class="box"></div>
      <div id="1_4" class="box"></div>
      <div id="1_5" class="box"></div>
      <div id="1_6" class="box"></div>
    </div>
    <div class="line">
      <div id="2_1" class="box"></div>    
      <div id="2_2" class="box"></div>
      <div id="2_3" class="box"></div>
      <div id="2_4" class="box"></div>
      <div id="2_5" class="box"></div>
      <div id="2_6" class="box"></div>
    </div>
    <div class="line">
      <div id="3_1" class="box"></div>
      <div id="3_2" class="box"></div>
      <div id="3_3" class="box"></div>
      <div id="3_4" class="box"></div>
      <div id="3_5" class="box"></div>
      <div id="3_6" class="box"></div>
    </div>
  </div>
  <div id="summary">
    <h3>您共点击了<span id="counter"></span>次</h3>
    <h3>您已消灭<span id="num"></span>块</h3>
  </div>
</body>
</html>

* {
  padding: 0;
  margin: 0;
}

#container {
  padding: 5% 0;
}

.line {
  margin: 0 auto;
  line-height: 20%;
  display: flex;
  width: 50%;
  height: 100px;
}

.line>div{
  width: 16%;
  border: 2px pink solid;
  background-image: url("../images/emoji.png");
  background-position: left center;
}

h3 {
  text-align: center;
}

span {
  display: inline-block;
  width: 25px;
}