jQuery扫雷小游戏

下载代码

html

css

分享到微信朋友圈

html

<header class="site-header" role="banner">
  <div class="wrap">
    <h1>minesweeper</h1>
    <div class="legend">
      <h4>Controls</h4>
      <p><strong>flag:</strong> <code><span class="key">alt</span>+<span class="click">click</span></code></p>
      <p><strong>clear surrounding unflagged cells:</strong> <code><span class="key">shift</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">Beginner</option>
                <option value="intermediate">Intermediate</option>
                <option value="expert" selected>Expert</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>

css

@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: .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;
  -webkit-transform: translate(-50%, -50%);
          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;
  -webkit-transform: translate(-50%, -50%);
          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;
  -webkit-transform: translate(-50%, -50%);
          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 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#grid .cell.incorrect .flag::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#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;
}

JavaScript

$(document).ready(function() {

var $body,
      $document,
      $board,
      $grid,
      timer,
      time,
      unstarted,
      $devbox,
      dev = true;

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

// If dev mode is set
    if (dev === true) {
      $body.append('<div id="devbox"></dev>');
      $devbox = $('#devbox');
    }

// 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,
        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>');
      }
      $rows = $('.row');

var $freeCells = $('.cell');

// Lay Mines
      for (m=0;m<mines;m++) {
        var mineCell = Math.floor(Math.random() * Math.floor($freeCells.length));
        $($freeCells[mineCell]).addClass('mine');
        $freeCells.splice(mineCell,1);
      }

// 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');
        }
      }

// 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);
    });

// Click to start timer
    $('html').off('click', '#grid.unstarted').on('click', '#grid.unstarted', function(e) {
      $grid.removeClass('unstarted');
      if (unstarted && !$(e.target).is('.mine')) {
        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);
    }

// 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')) {
          $grid.addClass('disabled lose');
          stopTimer();
        }

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');
            $grid.addClass('disabled 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 clearScores() {
      localStorage.clear();
      $('#leaderboard').remove();
    }

$('html').on('click', '#score-reset', clearScores);

// 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 (e.shiftKey || e.which === 1 & e.which === 3) {
        action = 'clear';
      }

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

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

cellClick($cell, action);
    });

} // end init()

function _printToDev(description, content) {
    if (dev !== true) {
      return;
    }

if (typeof content === 'string' || typeof content === 'number') {
      $devbox.append('<p>'+description+': '+content+'</p>');
    } else if (typeof content.isArray) {
      for (var i = 0; i < content.length; i++) {
        $devbox.append('<p>'+description+': '+content[i]+'</p>');
      }
    } else if (typeof content === 'object') {
      $devbox.append('<p>'+description+': '+JSON.stringify(content, null, 4)+'</p>');
    }
  }

function _clearDevBox() {
    if ($devbox) {
      $devbox.html('');
    }
  }

_init();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg