当前位置： 首页 > article >正文

HTML实现 扫雷游戏

article 2024/11/26 11:57:35

前言：

游戏起源与发展

  • 扫雷游戏的雏形可追溯到 1973 年的 “方块（cube）” 游戏，后经改编出现了 “rlogic” 游戏，玩家需为指挥中心探出安全路线避开地雷。在此基础上，开发者汤姆・安德森编写出了扫雷游戏的雏形.

  • 1992 年，微软在 windows3.1 系统中首次预装了《扫雷》，将其作为训练用户鼠标操作能力的软件.

  • 虽从 windows8 开始，系统不再默认安装扫雷游戏，但它依旧凭借自身魅力受到众多玩家喜爱，甚至有玩家不断刷新时间记录来挑战自我.

游戏规则

  • 胜利条件：找出所有地雷且不踩到地雷，或者在规定时间内尽可能多地找出地雷.

  • 失败条件：翻开了埋有地雷的方块.

  • 基础操作：左键点击未打开的格子可将其打开；右键点击可标雷 / 取消标雷；双击（左右键同时点击）已打开的数字，若该数字周围标的雷数量等于该数字，会同时打开该数字周围剩余所有格子.

游戏界面及信息

  • 剩余雷数：显示在游戏界面左上角，为总雷数减去已标雷数，可据此了解雷区剩余雷的大致情况.

  • 计时器：位于右上角，从本局游戏第一次操作为 0.001 秒开始计时，可用于记录游戏所用时间及玩家挑战自我时作为参考

技巧与策略

  • 数字推理：数字代表其周围 8 个方格中的雷数，若数字为 0，游戏会自动打开周围所有格子；若一个方格周围已标记的雷数等于该方格上的数字，那么其周围未标记的方格都可安全打开.

  • 常见阵型判断：如 “111”“22”“112” 等常见数字组合，可依据特定规律快速判断雷的位置.

  • 边缘优先：可先从雷区边缘开始点击，因为边缘方格的周围方格数量相对较少，更容易判断雷的位置，降低推理难度7.

  • 标记问号：当无法确定方格是否有雷时，可右键点击两次标记问号，后续再根据其他信息进一步判断.

游戏变化与创新

  • 在线多人模式：如《一起来扫雷》，玩家可与世界各地的玩家合作或竞争，共同清除地图上的地雷，还能积累积分兑换装饰，装扮游戏界面.

  • VR 版扫雷：扫雷 VR 将平面的扫雷游戏搬到了 3D 场景中，增加了游戏的趣味性和沉浸感.

  • 融合其他元素：《扫雷俄罗斯方块》结合了扫雷和俄罗斯方块的元素，雷区不断向上生长，找到所有地雷时行才会被清除

以上内容由ai生成

正文：
1.自己实现一个扫雷游戏

2.使用HTML实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>扫雷游戏</title>
    <link
      href="https://fonts.googleapis.com/css?family=Space+Mono:400,700"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <style>
      @charset "UTF-8";
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
      }

      body {
        text-align: center;
        color: #333;
        padding: 20px 20px 100px;
        background-color: #efefef;
        font-family: 'Space Mono', monospace;
      }

      h1 {
        margin: 0 0 32px;
      }

      p {
        font-size: 1em;
        line-height: 1.25em;
      }

      a {
        color: inherit;
      }

      img {
        height: auto;
        max-width: 100%;
      }

      .wrap {
        text-align: center;
        position: relative;
        display: inline-block;
      }

      .legend {
        font-size: 14px;
        margin: 0 auto 32px;
      }
      .legend h4,
      .legend p {
        margin: 0 0 6px;
      }
      .legend code {
        background: #e3e3e3;
      }
      .legend code .key {
        color: #ec433c;
      }
      .legend code .click {
        color: #2a48ec;
      }

      .top {
        border: 6px solid #e3e3e3;
        background-color: #e3e3e3;
      }

      #scoreboard {
        display: flex;
        padding-bottom: 12px;
        justify-content: space-between;
      }
      #scoreboard .select-wrap {
        font-weight: 700;
        vertical-align: top;
        display: inline-block;
      }
      #scoreboard .select-wrap select {
        margin: 0;
        height: 36px;
        border-radius: 0;
        border-width: 3px;
        border-style: solid;
        background-color: #d1d1d1;
        border-color: white #9e9e9e #9e9e9e white;
      }
      #scoreboard .select-wrap select:hover,
      #scoreboard .select-wrap select:focus {
        backgroudn-color: #ebebeb;
      }
      #scoreboard .reset {
        padding: 0 4px;
        font-size: 24px;
        cursor: pointer;
        font-weight: 700;
        line-height: 30px;
        border-width: 3px;
        border-style: solid;
        background-color: #d1d1d1;
        border-color: white #9e9e9e #9e9e9e white;
      }
      #scoreboard .reset:hover,
      #scoreboard .reset:focus {
        outline: none;
        background-color: #ebebeb;
      }
      #scoreboard .counter {
        padding: 0 4px;
        color: #ec433c;
        border: 3px inset;
        line-height: 30px;
        letter-spacing: 0.08em;
        display: inline-block;
        background: #333;
        text-shadow: 0 0 2px #ec433c;
      }
      #scoreboard .counter:first-of-type {
        margin-right: 20px;
      }
      #scoreboard .counter:last-of-type {
        margin-left: 20px;
      }

      #grid {
        margin: 0 auto;
        position: relative;
        display: inline-block;
      }
      #grid ::-moz-selection {
        background-color: transparent;
      }
      #grid ::selection {
        background-color: transparent;
      }
      #grid.disabled .cell {
        pointer-events: none;
      }
      #grid.disabled .status-indicator {
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 8vw;
        height: 8vw;
        font-size: 4vw;
        cursor: pointer;
        line-height: 8vw;
        position: absolute;
        border-radius: 50%;
        pointer-events: auto;
        background-color: #d1d1d1;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(51, 51, 51, 0.25);
      }
      #grid.disabled .status-indicator::after {
        content: '';
      }
      #grid.disabled.win .status-indicator::after {
        content: '😎';
      }
      #grid.disabled.lose .status-indicator::after {
        content: '☹️';
      }
      #grid .row {
        display: flex;
      }
      #grid .cell {
        cursor: pointer;
        width: 24px;
        height: 24px;
        position: relative;
        background-color: #d1d1d1;
        border-width: 3px;
        border-style: solid;
        border-color: white #9e9e9e #9e9e9e white;
      }
      #grid .cell i {
        left: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        font-style: normal;
        position: absolute;
        line-height: 24px;
      }
      #grid .cell::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        content: '';
        position: absolute;
        background-color: #d1d1d1;
      }
      #grid .cell::after {
        top: 50%;
        left: 50%;
        content: '';
        position: absolute;
        transform: translate(-50%, -50%);
      }
      #grid .cell:hover::before {
        background-color: #ebebeb;
      }
      #grid .cell.revealed {
        border: 1px solid #b8b8b8;
      }
      #grid .cell.revealed::before {
        display: none;
      }
      #grid .cell.revealed .flag {
        display: none;
      }
      #grid .cell .flag {
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 10px;
        height: 4px;
        position: absolute;
        border-style: solid;
        border-width: 4px 0 4px 10px;
        transform: translate(-50%, -50%);
        border-color: transparent transparent transparent #ec433c;
      }
      #grid .cell.maybe .flag {
        border-color: transparent transparent transparent #d7af42;
      }
      #grid .cell.mine {
        background-color: #ec433c;
      }
      #grid .cell.mine::after {
        border-radius: 50%;
        width: 12px;
        height: 12px;
        background-color: #333;
      }
      #grid .cell.incorrect .flag::before,
      #grid .cell.incorrect .flag::after {
        top: 50%;
        z-index: 1;
        left: -13px;
        height: 2px;
        width: 16px;
        content: '';
        position: absolute;
        background-color: black;
      }
      #grid .cell.incorrect .flag::before {
        transform: rotate(-45deg);
      }
      #grid .cell.incorrect .flag::after {
        transform: rotate(45deg);
      }
      #grid .cell.mousedown {
        border: none;
      }

      #leaderboard {
        margin-top: 20px;
        text-align: center;
      }
      #leaderboard h4 {
        margin: 0 0 10px;
      }
      #leaderboard ul {
        margin: 0;
        padding: 10px;
        display: inline-block;
        background-color: rgba(209, 209, 209, 0.5);
      }
      #leaderboard ul li {
        padding: 2px;
        list-style: none;
      }
      #leaderboard ul li span {
        font-weight: 900;
        text-transform: capitalize;
      }
      #leaderboard ul li.highlight {
        background-color: #fef178;
      }
      #leaderboard button {
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        text-decoration: underline;
      }

      .cell.white {
        color: #fff;
      }

      .cell.gray-light {
        color: #efefef;
      }

      .cell.gray-mid {
        color: #e3e3e3;
      }

      .cell.gray {
        color: #d1d1d1;
      }

      .cell.gray-dark {
        color: #808080;
      }

      .cell.black {
        color: #333;
      }

      .cell.red {
        color: #ec433c;
      }

      .cell.maroon {
        color: #a6070f;
      }

      .cell.purple {
        color: #a42887;
      }

      .cell.yellow {
        color: #d7af42;
      }

      .cell.yellow-light {
        color: #fef178;
      }

      .cell.blue {
        color: #2a48ec;
      }

      .cell.blue-dark {
        color: #233db7;
      }

      .cell.green {
        color: #2bb13d;
      }

      .cell.turquoise {
        color: #28907d;
      }

      #devbox {
        top: 10px;
        right: 10px;
        position: fixed;
        text-align: left;
        max-width: 300px;
        color: #fff;
        background-color: #333;
      }
      #devbox p {
        margin: 0;
        font-size: 12px;
        padding: 10px 20px;
      }
      #devbox p + p {
        padding-top: 5px;
      }
    </style>
  </head>
  <body>
    <header class="site-header" role="banner">
      <div class="wrap">
        <h1>扫雷</h1>
        <div class="legend">
          <p>
            <strong>插旗:</strong>
            <code
              ><span class="key">alt</span>+<span class="click"
                >click（单击）</span
              ></code
            >
          </p>
        </div>
      </div>
    </header>
    <main class="site-main" role="main">
      <div class="wrap">
        <div id="board">
          <div class="top">
            <div id="scoreboard">
              <div id="minecounter" class="counter"></div>
              <div>
                <div class="select-wrap">
                  <select name="level" id="level">
                    <option value="beginner">初级</option>
                    <option value="intermediate">中级</option>
                    <option value="expert" selected>高级</option>
                  </select>
                </div>
                <button class="reset">🙂</button>
              </div>
              <div id="timer" class="counter"></div>
            </div>
            <div id="grid"></div>
          </div>
          <div class="bottom"></div>
        </div>
      </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var $body, $document, $board, $grid, timer, time, unstarted;

        function _init() {
          // Cache some common DOM queries
          $document = $(document);
          $body = $('body');
          $body.addClass('loaded');

          // Start Minesweeper
          $board = $('#board');
          $grid = $('#grid');
          var $timer = $('#timer');
          var $mineCounter = $('#minecounter');
          var $levelSelect = $('#level');
          var levels = {
            beginner: '9x9x10',
            intermediate: '16x16x44',
            expert: '16x30x99',
          };
          var level = $levelSelect.val();
          var levelParams,
            rows,
            $rows,
            columns,
            cellCount,
            mines,
            freeCells,
            mineTally,
            pauseTime,
            beginnerHighScore = 999,
            intermediateHighScore = 999,
            expertHighScore = 999;

          var countColors = {
            0: '',
            1: 'blue',
            2: 'green',
            3: 'red',
            4: 'blue-dark',
            5: 'maroon',
            6: 'turquoise',
            7: 'purple',
            8: 'gray-dark',
          };

          time = 0;
          timer = false;
          unstarted = true;
          var statusIndicator = '<div class="status-indicator"></div>';

          // Check for existing high score
          // if (localStorage.getItem('beginner')) {
          //   beginnerHighScore = localStorage.getItem('beginner');
          //   populateHighScore('beginner', localStorage.getItem('beginner'));
          // }
          // if (localStorage.getItem('intermediate')) {
          //   intermediateHighScore = localStorage.getItem('intermediate');
          //   populateHighScore('intermediate', localStorage.getItem('intermediate'));
          // }
          // if (localStorage.getItem('expert')) {
          //   expertHighScore = localStorage.getItem('expert');
          //   populateHighScore('expert', localStorage.getItem('expert'));
          // }

          function setLevel(level) {
            levelParams = levels[level];
            rows = parseInt(levelParams.split('x')[0]);
            columns = parseInt(levelParams.split('x')[1]);
            cellCount = rows * columns;
            mines = levelParams.split('x')[2];
            freeCells = cellCount - mines;
          }

          function setBoard(level) {
            // Clear Grid
            $grid
              .html(statusIndicator)
              .removeClass('disabled lose win')
              .addClass('unstarted');

            // Set Up Grid
            setLevel(level);

            // Set unstarted
            unstarted = true;

            // Build Rows
            for (r = 0; r < rows; r++) {
              var newCells = '';
              // Build Cells
              for (c = 0; c < columns; c++) {
                newCells += '<div class="cell"></div>';
              }
              $grid.append('<div class="row">' + newCells + '</div>');
            }

            // Set Minecounter
            mineTally = mines;
            $mineCounter.html(mineTally);

            // Set Timer
            resetTimer();
          }

          // Set initially
          setBoard(level);
          // Set on reset
          $('html')
            .on('mousedown', '.reset', function () {
              $(this).text('😮');
            })
            .on('mouseup', '.reset', function () {
              $(this).text('🙂');
              stopTimer();
              level = $levelSelect.val();
              setBoard(level);
            });
          // Set when clicking status indicator
          $('html').on('click', '.status-indicator', function () {
            level = $levelSelect.val();
            setBoard(level);
          });
          // Set on level change
          $levelSelect.on('change', function () {
            stopTimer();
            resetTimer();
            level = $levelSelect.val();
            setBoard(level);
          });

          // Lay Mines
          function layMines(level, clickedCellIndex) {
            $rows = $('.row');
            var freeCells = $('.cell');
            var takenCells = [clickedCellIndex];

            // Lay Mines
            for (m = 0; m < mines; m++) {
              var mineCell = Math.floor(
                Math.random() * Math.floor(freeCells.length)
              );
              // If it happens to be the clicked cell, skip it
              if ($.inArray(mineCell, takenCells) > -1) {
                m--;
                continue;
              }
              takenCells.push(mineCell);
              $(freeCells[mineCell]).addClass('mine');
            }

            // Identify Cell Numbers
            var $cells = $('.cell');
            for (c = 0; c < $cells.length; c++) {
              var $cell = $($cells[c]);
              $cell.attr('data-cell', c);
              // Skip if it's a mine
              if ($cell.is('.mine')) {
                continue;
              }

              var mineCount = 0;
              var rowPos = Math.floor(c / columns);
              var $currentRow = $cell.closest('.row');
              $currentRow.attr('data-row', rowPos);
              var rowCells = $currentRow.find('.cell');
              var cellPos = c % columns;

              if ($(rowCells[cellPos - 1]).is('.mine')) {
                mineCount++;
              }
              if ($(rowCells[cellPos + 1]).is('.mine')) {
                mineCount++;
              }

              if (rowPos > 0) {
                var prevRowCells = $($rows[rowPos - 1]).find('.cell');
                if ($(prevRowCells[cellPos - 1]).is('.mine')) {
                  mineCount++;
                }
                if ($(prevRowCells[cellPos]).is('.mine')) {
                  mineCount++;
                }
                if ($(prevRowCells[cellPos + 1]).is('.mine')) {
                  mineCount++;
                }
              }

              if (rowPos < rows - 1) {
                var nextRowCells = $($rows[rowPos + 1]).find('.cell');
                if ($(nextRowCells[cellPos - 1]).is('.mine')) {
                  mineCount++;
                }
                if ($(nextRowCells[cellPos]).is('.mine')) {
                  mineCount++;
                }
                if ($(nextRowCells[cellPos + 1]).is('.mine')) {
                  mineCount++;
                }
              }

              if (mineCount > 0) {
                $cell.html('<i>' + mineCount + '</i>');
                // Styling classes
                var colorClass = countColors[mineCount];
                $cell.addClass(colorClass);
              } else {
                $cell.addClass('zero');
              }
            }
          }

          // Click cell to start game
          $('html')
            .off('click', '#grid.unstarted .cell')
            .on('click', '#grid.unstarted .cell', function (e) {
              $grid.removeClass('unstarted');
              if (unstarted && !$(e.target).is('.mine')) {
                layMines(level, $('.cell').index(this));
                timer = window.setInterval(startTimer, 1000);
                unstarted = false;
              }
            });

          // Timer Functions
          function resetTimer() {
            $timer.html('000');
            time = 0;
          }
          function startTimer() {
            time++;
            if (time < 10) {
              $timer.html('00' + time);
            } else if (time > 9 && time < 100) {
              $timer.html('0' + time);
            } else {
              $timer.html(time);
            }
          }

          function stopTimer() {
            window.clearInterval(timer);
          }

          function pauseTimer() {
            stopTimer();
            pauseTime = parseInt($('#timer').html());
          }

          function unpauseTimer() {
            time = pauseTime;
            timer = window.setInterval(startTimer, 1000);
            pauseTime = false;
          }

          // Pause when window loses focus
          $(window)
            .on('blur', function () {
              pauseTimer();
            })
            .on('focus', function () {
              if (pauseTime) {
                unpauseTimer();
              }
            });

          // Check Cell
          function checkCell($cell) {
            if (!$cell.is('.mine') && !$cell.is('.revealed')) {
              cellClick($cell, 'reveal');

              if ($cell.is('.zero')) {
                $cell.trigger('click');
              }
            }
          }

          // Clicking on a cell
          function cellClick($cell, action) {
            // If Flagging
            if (action === 'flag' && !$cell.is('.revealed')) {
              if ($cell.is('.flagged')) {
                $cell.removeClass('flagged');
                $cell.addClass('maybe');
                mineTally++;
                updateMinecounter(mineTally);
              } else if ($cell.is('.maybe')) {
                $cell.removeClass('maybe');
                var flag = $cell.find('.flag');
                flag.remove();
              } else {
                $cell.addClass('flagged');
                $cell.append('<span class="flag"></span>');
                mineTally--;
                updateMinecounter(mineTally);
              }
              // If Revealing
            } else if (action === 'reveal') {
              $cell.addClass('revealed');

              // If it's a mine you lose!
              if ($cell.is('.mine')) {
                lose();
              }

              statusCheck();
            } else if (action === 'clear') {
              if (!$cell.is('.revealed') || $cell.is('.zero')) {
                return;
              }

              clearClick($cell);
            }
          }

          // Update Minecounter
          function updateMinecounter(mineTally) {
            if (mineTally < 10) {
              $mineCounter.html('0' + mineTally);
            } else {
              $mineCounter.html(mineTally);
            }
          }

          // Clicking on a Zero cell
          function zeroClick($cell) {
            var cellPos = $cell.prevAll().length;
            var $currentRow = $cell.closest('.row');
            var rowPos = parseInt($currentRow.attr('data-row'));
            var rowCells = $currentRow.find('.cell');

            checkCell($(rowCells[cellPos - 1]));
            checkCell($(rowCells[cellPos + 1]));

            if (rowPos > 0) {
              var prevRowCells = $($rows[rowPos - 1]).find('.cell');
              checkCell($(prevRowCells[cellPos - 1]));
              checkCell($(prevRowCells[cellPos]));
              checkCell($(prevRowCells[cellPos + 1]));
            }

            if (rowPos < rows) {
              var nextRowCells = $($rows[rowPos + 1]).find('.cell');
              checkCell($(nextRowCells[cellPos - 1]));
              checkCell($(nextRowCells[cellPos]));
              checkCell($(nextRowCells[cellPos + 1]));
            }
          }

          // Clicking on a number to clear free cells
          function clearClick($cell) {
            var cellPos = $cell.prevAll().length;
            var $currentRow = $cell.closest('.row');
            var rowPos = parseInt($currentRow.attr('data-row'));
            var rowCells = $currentRow.find('.cell');
            var adjacentCells = [];
            var correctClear = true;
            var adjacentMines = 0;
            var adjacentFlags = 0;
            var i;
            adjacentCells.push($(rowCells[cellPos - 1]));
            adjacentCells.push($(rowCells[cellPos + 1]));

            if (rowPos > 0) {
              var prevRowCells = $($rows[rowPos - 1]).find('.cell');
              adjacentCells.push($(prevRowCells[cellPos - 1]));
              adjacentCells.push($(prevRowCells[cellPos]));
              adjacentCells.push($(prevRowCells[cellPos + 1]));
            }

            if (rowPos < rows) {
              var nextRowCells = $($rows[rowPos + 1]).find('.cell');
              adjacentCells.push($(nextRowCells[cellPos - 1]));
              adjacentCells.push($(nextRowCells[cellPos]));
              adjacentCells.push($(nextRowCells[cellPos + 1]));
            }

            for (i = 0; i < adjacentCells.length; i++) {
              // add to mine count
              if ($(adjacentCells[i]).is('.mine')) {
                adjacentMines++;
              }
              // add to flag cout
              if ($(adjacentCells[i]).is('.flagged')) {
                adjacentFlags++;
              }
            }

            if (adjacentFlags === adjacentMines) {
              for (i = 0; i < adjacentCells.length; i++) {
                if ($(adjacentCells[i]).is('.mine')) {
                  if ($(adjacentCells[i]).is('.flagged')) {
                    continue;
                  } else {
                    $(adjacentCells[i]).addClass('revealed');
                    correctClear = false;
                  }
                } else if ($(adjacentCells[i]).is('.flagged')) {
                  correctClear = false;
                  $(adjacentCells[i]).addClass('incorrect');
                  lose();
                }
              }

              if (correctClear) {
                for (i = 0; i < adjacentCells.length; i++) {
                  if (!$(adjacentCells[i]).is('.mine')) {
                    if ($(adjacentCells[i]).is('.zero')) {
                      zeroClick($(adjacentCells[i]));
                    }
                    cellClick($(adjacentCells[i]), 'reveal');
                  }
                }
              }
            } else {
              return;
            }
          }

          // Check status
          function statusCheck() {
            if ($('.cell.revealed').length == freeCells) {
              stopTimer();
              var winTime = $('#timer').html();
              $grid.addClass('disabled win');
              resetHighScore(level, winTime);
            }
          }

          function lose() {
            $grid.addClass('disabled lose');
            stopTimer();
          }

          // Clicking on a cell
          $('html').on('click', '.cell', function (e) {
            e.preventDefault();
            var action = 'reveal';
            var $cell = $(this);

            if (e.altKey || e.which === 3) {
              action = 'flag';
            } else if (
              $cell.is('.revealed') ||
              (e.which === 1) & (e.which === 3)
            ) {
              action = 'clear';
            }

            if ($cell.is('.flagged') && !e.altKey) {
              return;
            }

            if ($cell.is('.zero')) {
              zeroClick($cell);
            }

            cellClick($cell, action);
          });

          // Mouse down on a cell
          $('html')
            .on('mousedown', '.cell:not(.revealed,.flagged)', function (e) {
              if (!e.altKey && e.which !== 3) {
                $(this).addClass('mousedown');
              }
            })
            .on('mouseup mouseleave', '.cell.mousedown', function () {
              $(this).removeClass('mousedown');
            });

          // Scoreboard functionality
          function resetHighScore(level, winTime) {
            if (localStorage.getItem(level)) {
              if (winTime < localStorage.getItem(level)) {
                localStorage.setItem(level, winTime);
                populateHighScore(level, winTime, true);
              }
            } else {
              localStorage.setItem(level, winTime);
              populateHighScore(level, winTime, true);
            }
          }

          function populateHighScore(level, highScore, highlight) {
            if (!$('#leaderboard').length) {
              $board
                .find('.bottom')
                .append(
                  '<div id="leaderboard"><h4>High Scores</h4><ul><li class="beginner"></li><li class="intermediate"></li><li class="expert"></li></ul><div><button id="score-reset" class="score-reset">Clear Scores</button></div></div>'
                );
            }
            if (highlight === true) {
              $('#leaderboard .highlight:not(.' + level + ')').removeClass(
                'highlight'
              );
              $('#leaderboard .' + level).addClass('highlight');
            }
            var highScoreDisplay = parseInt(highScore, 10);
            $('#leaderboard .' + level).html(
              '<span>' + level + '</span>: ' + highScoreDisplay + ' seconds'
            );
          }

          function clearScores() {
            localStorage.clear();
            $('#leaderboard').remove();
          }

          // Clicking on score reset to clear scores
          $('html').on('click', '#score-reset', clearScores);
        }

        _init();
      });
    </script>
  </body>
</html>

3.电脑单机就可玩耍

最后：

你今天扫雷了吗？后台回复“扫雷”获取在线连接。
扫雷游戏


http://www.kler.cn/a/409900.html

相关文章：

  • LLC与反激电路设计【学习笔记】
  • 累积局部效应 (ALE) 图分析记录
  • Element UI 打包探索【2】
  • vue3(十九)-基础入门之vue-nuxt反向代理
  • Python 获取微博用户信息及作品（完整版）
  • 算法训练-双指针
  • Rust编程与项目实战-模块std::thread（之二）
  • 文本数据分析(nlp)
  • vue3 + ts：开发插件 / Plugins / 注册全局实例 / 在 template 与 setup 中使用 / provide、inject
  • react后台管理系统(三)
  • 下载并安装Visual Studio 2017过程
  • Vue.observable 全解析：Observable 是什么及使用场景剖析
  • React 前端框架深度剖析
  • Macos远程连接Linux桌面教程；Ubuntu配置远程桌面；Mac端远程登陆Linux桌面；可能出现的问题
  • RT-DETR：替代YOLO的更快实时目标检测模型及其Pytorch实现【附源码】
  • VirtIO实现原理之数据结构与数据传输演示（1）
  • python小课堂（一）
  • 二进制 分析工具：Radare2、r2frida、Binutils、file、string、as、nm、ldd、objdump、readelf、strip
  • pywinauto常见用法详解
  • 【linux】基础-Git使用
  • Redis 在实际业务中的高效应用
  • 递推进阶与入门递归
  • [Java]微服务体系下的用户身份认证方案
  • 【MySQL】数据库精细化讲解：内置函数知识穿透与深度学习解析
  • C++：用红黑树封装map与set-2
  • 数据结构每日一题|判断链表环形结构并返回环的起始节点