Javascript 综合示例网页扫雷游戏-白红宇

Javascript 综合示例网页扫雷游戏

阅读量：5120 次

发布时间：2019-06-13

本文共 8103 字，大约阅读时间需要 27 分钟。

---------------认定了的事情,只要是对的,干到底!

----------------------------------------------------------------------------------------------------------------------------------------------

分别建立 HTML CSS JS 三个文件

加上保存好的图片

----------------------------------------------------------------------------------------------------------------------------------------------

HTML代码

----------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------------------

CSS代码

----------------------------------------------------------------------------------------------------------------------------------------------

*{
      margin:0;     padding:0; } .wrapper {
      width:100%;     height:1000px;     position: fixed;     top:0;     left:0;     background-image: url('img/bg.jpg');     background-size: 100% 100%; } .btn{
      height:140px;     width:170px;     position:absolute;     left:50px;     background-image: url('img/startGame.png');     background-size: 100% 100%;     cursor: pointer; } .box{
      height:500px;     width:500px;     transform: perspective(800px) rotateX(45deg);     margin:20px auto;     border-top:1px solid #B25F27;     border-left:1px solid #B25F27;     box-shadow:  5px 5px 5px rgba(0,0,0,0.3);     display:none; } .flagBox{
      position:absolute;     top:50px;     left:50%;     width:200px;     height:50px;     margin-left:-100px;     color:#333;     font-size:20px;     font-weight: bolder;     display:none; } .alertBox{
      display:none;     position:absolute;     width:100%;     height:100%;     left:0;     top:0;     background-color: rgba(0,0,0,0.2); } .alertImg{
      width:600px;     height:400px;     background-size: 100% 100%;     position:absolute;     left:0;     top:0;     right:0;     bottom:0;     margin:auto;     border-radius: 20px; } .close{
      position:absolute;     right:0;     top:0;     height:40px;     width:40px;     background-image: url('img/closeBtn.png');     background-size: 100% 100%;     cursor: pointer; } .block{
      width:49px;     height:49px;     border-right:1px solid #B25F27;     border-bottom:1px solid #B25F27;     box-shadow: 0 0 4px #333 inset;     background-image: url('img/cao.jpg');     float: left; } .show{
      background-image: url('img/dilei.jpg');     background-size: 100% 100%; } .num{
      background:#ECD0A1;     font-size:18px;     font-weight:bold;     line-height: 49px;     text-align: center; } .flag{
      background-image:url('img/hongqi.jpg');     background-size:100% 100%; }

----------------------------------------------------------------------------------------------------------------------------------------------

JS代码

----------------------------------------------------------------------------------------------------------------------------------------------

//点击开始游戏 -》 动态生成100个小格--》100div //leftClick  没有雷  --》显示数字（代表以当前小格为中心周围8个格的雷数） 扩散（当前周围八个格没有雷） //           有累 --》game Over //rightClick 没有标记并且没有数字--》进行标记。 有标记 --》取消标记 --》标记是否正确，10个都正确标记，提示成功 //已经出现数字--》无效果 var startBtn = document.getElementById('btn'); var box = document.getElementById('box'); var flagBox = document.getElementById('flagBox'); var alertBox = document.getElementById('alertBox'); var alertImg = document.getElementById('alertImg'); var closeBtn = document.getElementById('close'); var score = document.getElementById('score'); var minesNum; var mineOver; var block; var mineMap = []; var startGameBool = true; bindEvent(); function bindEvent() {
      startBtn.onclick = function () {
          if(startGameBool){
              box.style.display = 'block';             flagBox.style.display = 'block';             init();             startGameBool = false;         }     }     box.oncontextmenu = function () {
          return false;     }     box.onmousedown = function (e) {
          var event = e.target;         if (e.which == 1) {
              leftClick(event);         } else if (e.which == 3) {
              rightClick(event);         }     }     closeBtn.onclick = function () {
          alertBox.style.display = 'none';         flagBox.style.display = 'none';         box.style.display = 'none';         box.innerHTML = '';         startGameBool = true;     } } function init() {
      minesNum = 10;     mineOver = 10;     score.innerHTML = mineOver;     for (var i = 0; i < 10; i++) {
          for (var j = 0; j < 10; j++) {
              var con = document.createElement('div');             con.classList.add('block');             con.setAttribute('id', i + '-' + j);             box.appendChild(con);             mineMap.push({ mine: 0 });         }     }     block = document.getElementsByClassName('block');     while (minesNum) {
          var mineIndex = Math.floor(Math.random() * 100);         if (mineMap[mineIndex].mine === 0) {
              mineMap[mineIndex].mine = 1;             block[mineIndex].classList.add('isLei');             minesNum--;         }     } } function leftClick(dom) {
      if(dom.classList.contains('flag')){
          return;     }     var isLei = document.getElementsByClassName('isLei');     if (dom && dom.classList.contains('isLei')) {
          for (var i = 0; i < isLei.length; i++) {
              isLei[i].classList.add('show');         }         setTimeout(function () {
              alertBox.style.display = 'block';             alertImg.style.backgroundImage = 'url("img/over.jpg")';         }, 800)     } else {
          var n = 0;         var posArr = dom && dom.getAttribute('id').split('-');         var posX = posArr && +posArr[0];         var posY = posArr && +posArr[1];         dom && dom.classList.add('num');         for (var i = posX - 1; i <= posX + 1; i++) {
              for (var j = posY - 1; j <= posY + 1; j++) {
                  var aroundBox = document.getElementById(i + '-' + j);                 if (aroundBox && aroundBox.classList.contains('isLei')) {
                      n++;                 }             }         }         dom && (dom.innerHTML = n);         if (n == 0) {
              for (var i = posX - 1; i <= posX + 1; i++) {
                  for (var j = posY - 1; j <= posY + 1; j++) {
                      var nearBox = document.getElementById(i + '-' + j);                     if (nearBox && nearBox.length != 0) {
                          if (!nearBox.classList.contains('check')) {
                              nearBox.classList.add('check');                             leftClick(nearBox);                         }                     }                 }             }         }     } } function rightClick(dom){
      if(dom.classList.contains('num')){
          return;     }     dom.classList.toggle('flag');     if(dom.classList.contains('isLei') &&dom.classList.contains('flag')){
          mineOver --;     }     if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
          mineOver ++;     }     score.innerHTML = mineOver;     if(mineOver == 0){
          alertBox.style.display = 'block';         alertImg.style.backgroundImage = 'url("img/success.png")';     } }