写的一个小扫雷

最新推荐文章于 2024-11-01 15:19:31 发布

weixin_45802798

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/weixin_45802798/article/details/105873072

版权

本文深入剖析了一款基于HTML、CSS和JavaScript实现的扫雷游戏代码。从内联代码片段中，我们详细解读了游戏的布局设计、样式设置以及核心算法，包括随机地雷生成、点击事件处理和游戏逻辑实现等关键部分。

摘要由CSDN通过智能技术生成

下面展示一些 内联代码片。

// 这个是html
<div id="a"></div>
// 这个是css
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
  }
  #a {
   width: 200px;
  }
  ul {
   display: grid;
  }
  li {
   border: 1px solid gray;
   font-size: 0px;
   text-align: center
  }
  input {
   width: 30px;
  }

// 
var arrs = [],
   arr = [],
   num = 0,
   gezi = 10,  
   zhadan = 10
  //创建格子
  function main() {
   this.height = 20;
   this.width = 20;
  }
  main.prototype.uls = function() {
   //创建ul
   this.a = document.querySelector("#a");
   this.ul = document.createElement('ul');
   this.ul.style.display = 'grid'
   this.ul.style.cssText = `grid-template-columns: repeat(${gezi}, 1fr)`
   this.a.appendChild(this.ul);
  }
  main.prototype.lis = function() {
   //创建li
   this.li = document.createElement('li')
   this.li.style.width = this.width + 'px'
   this.li.style.height = this.height + 'px'
   this.ul.appendChild(this.li);
  }
  function init(a, b) {
   //初始化
   var mains = new main();
   for (let i = 0; i < a; i++) {
    arrs.push([]);
    mains.uls();
    for (let j = 0; j < a; j++) {
     arrs[i].push(0)
     mains.lis();
    }
   }
   suiji(b);
  }
  init(gezi, zhadan) //第一个是格子数，第二个是雷数量
  //在html上添加div
  var ul = document.querySelectorAll("ul")
  for (let i = 0; i < arrs.length; i++) {
   var lis = ul[i].querySelectorAll("li");
   for (let j = 0; j < arrs[i].length; j++) {
    lis[j].innerText = arrs[i][j];
    btn(i, j)
   }
  }
  function btn(i, j) {
   //点击事件
   lis[j].onclick = function() {
    if (arrs[i][j] == 0) {
     fz(i, j, true)
    } else if (arrs[i][j] != 9) {
     color(i, j)
    } else if (arrs[i][j] == 9) {
     for (let x = 0; x < arrs.length; x++) {
      let lis = ul[x].querySelectorAll("li");
      for (let y = 0; y < arrs[x].length; y++) {
       if (lis[y].innerText == 9) {
        console.log(y)
        lis[y].style.fontSize = 15 + 'px';
        lis[y].style.backgroundColor = "red"
       }
      }
     }
    }
   }
  }
  function color(i, j) {
   //改变颜色 测试
   let li = ul[i].querySelectorAll("li");
   li[j].style.fontSize = 15 + 'px';
   li[j].style.backgroundColor = "gainsboro"
   if (arrs[i][j] == 0) {
    fz(i, j, true)
   }
  }
  function suiji(n) {
   //创建随机数
   let nn = n
   let x = Math.round(Math.random() * (arrs.length - 1))
   let y = Math.round(Math.random() * (arrs.length - 1))
   arr.push([x, y]);
   aa(nn);
  }
  function aa(n) {
   //进行重复数的运算，删减重复数
   console.log(arr.length)
   for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
     if (arr[i][0] == arr[j][0] && arr[i][1] == arr[j][1]) {
      arr.splice(j, 1)
      j--
     }
    }
   }
   if (arr.length != n) {
    suiji(n)
   } else {
    //进行从小到大排序
    arr.sort(function(a, b) {
     if (a[0] != b[0]) {
      return a[0] - b[0]
     } else if (a[0] == b[0]) {
      return a[1] - b[1]
     }
    })
    charu()
   }
  }
  function charu() {
   //将地雷插入到arrs的数组里面
   var ul = document.querySelectorAll("ul")
   for (let i = 0; i < arrs.length; i++) {
    for (let j = 0; j < arrs.length; j++) {
     if (i == arr[num][0] && j == arr[num][1]) {
      arrs[i][j] = 9;
      fz(i, j, false)
      num++
      if (num >= arr.length) {
       return
      }
     }
    }
   }
  }
  function fz(i, j, bool) {
   //封装一下地雷对应8个角的数值
   if (bool) {
    arrs[i][j] = -1
    let li = ul[i].querySelectorAll("li");
    li[j].innerText = ""
    li[j].style.backgroundColor = "gainsboro"
    // color(i, j);
   }
   if (i - 1 >= 0 && j - 1 >= 0 && arrs[i - 1][j - 1] != 9) {
    if (bool) {
     color(i - 1, j - 1)
    } else {
     arrs[i - 1][j - 1] += 1;
    }
   }
   if (i - 1 >= 0 && arrs[i - 1][j] != 9) {
    if (bool) {
     color(i - 1, j)
    } else {
     arrs[i - 1][j] += 1
    }
   }
   if (i - 1 >= 0 && j + 1 < arrs.length && arrs[i - 1][j + 1] != 9) {
    if (bool) {
     color(i - 1, j + 1)
    } else {
     arrs[i - 1][j + 1] += 1
    }
   }
   if (j - 1 >= 0 && arrs[i][j - 1] != 9) {
    if (bool) {
     color(i, j - 1)
    } else {
     arrs[i][j - 1] += 1
    }
   }
   if (j + 1 < arrs.length && arrs[i][j + 1] != 9) {
    if (bool) {
     color(i, j + 1)
    } else {
     arrs[i][j + 1] += 1
    }
   }
   if (i + 1 < arrs.length && j - 1 >= 0 && arrs[i + 1][j - 1] != 9) {
    if (bool) {
     color(i + 1, j - 1)
    } else {
     arrs[i + 1][j - 1] += 1
    }
   }
   if (i + 1 < arrs.length && arrs[i + 1][j] != 9) {
   if (bool) {
     color(i + 1, j)
    } else {
     arrs[i + 1][j] += 1
    }
   }
   if (i + 1 < arrs.length && j + 1 < arrs.length && arrs[i + 1][j + 1] != 9) {
    if (bool) {
     color(i + 1, j + 1)
    } else {
     arrs[i + 1][j + 1] += 1
    }
   }
  }