ES6 面向对象之经典扫雷小游戏

最新推荐文章于 2022-03-19 12:16:49 发布
最新推荐文章于 2022-03-19 12:16:49 发布
阅读量471 收藏 2
点赞数 1
分类专栏： 前端练手项目 文章标签： javascript es6 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiqiang_xiong/article/details/114421609
版权

闲话不多说，先上效果图

在这里插入图片描述

实现的功能

  • 点击控制后按钮可以生成对应难度的雷盘

  • 鼠标左右键点击每个格子可显示里面的数字或做标记

  • 当点击出的数字为 0 时，通过扩散算法让这个格子周围为 0 的格子显示出来

  • 随机雷的位置时不能将雷的信息保存在元素的类名上，防止用户通过检查元素类名来找到雷。

  • 游戏结束时弹出当前游戏的时间。

主要思路：

  • 由于有多个游戏难度供用户选择，所以采用面向对象的方式进行编程。

  • 生成雷盘

    • 根据用户选择的难度通过循环雷盘行与列的方式来创建相应数量的表格，并以一个二维数组的格式好保存每个格子的 DOM 对象，然后将元素插入到页面中
  constructor(tr, td, mineNum) {

    // 行
    this.tr = tr;

    // 列
    this.td = td;

    // 地图里雷的总数
    this.mineNum = mineNum;

    // 按行与列的顺序保存所有方块信息对象的数组
    this.squares = [];

    // 存储所有格子的DOM元素对象
    this.allDom = [];

    // 剩余雷的数量
    this.surplusMine = mineNum;

    // 当最后一面小红旗标记后，每面旗下面是否都是雷
    this.allIn = false;

    // 获取雷盘元素
    this.parent = document.getElementsByClassName('gameBox')[0];

    // 剩余雷数的元素
    this.mineNumDom = document.getElementsByClassName('mineNum')[0];
  }
  

// 创建表格
  creatDom() {

    // 创建table标签
    let table = document.createElement('table');
    for (let i = 0; i < this.tr; i++) {

      // 创建tr标签
      let trDom = document.createElement('tr');

      // 创建保存每列里所有格子DOM对象的数组
      this.allDom[i] = [];

      for (let j = 0; j < this.td; j++) {

        // 创建td标签
        let tdDom = document.createElement('td');

        // 给每个td标签绑定鼠标左右键的点击事件
        tdDom.onmousedown = (e) => {
          this.play(e);
        }

        // 把每个格子的行与列坐标保存到格子身上
        tdDom.pos = [i, j];


        // 保存格子的DOM对象
        this.allDom[i][j] = tdDom;

        // 每创建一个td标签，就插入到tr中
        trDom.appendChild(tdDom);
      }

      // 每创建一个tr标签，就插入到table中
      table.appendChild(trDom);
    }

    // 选择其他难度等级前要清空上一个雷盘
    this.parent.innerHTML = '';

    // 将table标签插入到页面中
    this.parent.appendChild(table);
  }

  • 生成随机数，并将每个方块的信息保存到二维数组中

    • 把雷盘每个格子的索引添加到一个数组中并截取出前 n 个数字进行乱序。

  // 生成n个随机不重复的数字
  randomNum() {

    // 生成一个空的数组，长度为格子的总数
    let arr = new Array(this.tr * this.td);

    for (let i = arr.length; i > 0; i--) {

      arr[i] = i
    }

    // 将数组里的数据乱序并取出前n个作为雷
    return arr.sort(() => 0.5 - Math.random()).slice(0, this.mineNum);
  }
  • 以行与列的形式遍历，将雷的信息以对象的形式保存到一个二维数组中，类似于：
    [
  [
  {type: 'number', x: 1, y: 7, value: 0 }
  {type: 'number', x: 13, y: 4, value: 1 }
  {type: 'number', x: 3, y: 12, value: 4 }
  {type: 'number', x: 4, y: 14, value: 6 }
        ....
  ],
  [
  {type: 'number', x: 10, y: 4, value: 1 }
  {type: 'number', x: 2, y: 7, value: 2}
  {type: 'number', x: 11, y: 9, value: 6 }
  {type: 'number', x: 5, y: 2, value: 7 }
        ......
  ],
  [.......],
  ......
]
里面一层的所有[]可以理解成一个列，[]里的每个对象可以理解为每列里有n个，展开后就是一个阵列。



  // 将所有方块信息的对象保存到数组中
  saveSquaresInfo() {

    // 保存随机数的数组
    let randomArr = this.randomNum();

    let n = 0;

    for (let i = 0; i < this.tr; i++) {
      this.squares[i] = [];

      for (let j = 0; j < this.td; j++) {

        // 为了能以行与列的形式遍历所有格子
        n++;

        if (randomArr.indexOf(n) == -1) {

          // 找到的是数字(行和列的x,y与像素坐标的x,y的值刚好是相反的)
          this.squares[i][j] = { type: 'number', x: j, y: i, value: 0 }
        } else {

          // 找到的是雷
          this.squares[i][j] = { type: 'mine', x: j, y: i }
        }
      }
    }
  }

  • 找某个格子的四周格子的坐标

    • 首先必须要知道一个格子的坐标，然后通过以下的规律遍历九宫格，剔除周围非数字的格子、越界、传入的格子本身和雷的情况后，就可以将得到的坐标以数组的形式保存起来。
      找格子的规律
x-1, y-1       x, y-1        x+1, y-1

x-1, y         x, y          x+1, y

x-1, y+1       x, y+1        x+1, y+1
    • 由于这种规律遍历是通过像素坐标的方式进行的，为了使保存的具有一致性，就得让得到的像素的 x,y 的顺序对调。


  // 通过某个格子的像素坐标找到周围的八个格子
  getAround(square) {
    let x = square.x;
    let y = square.y;

    // 用于保存找到的坐标
    let result = [];

    //找格子的规律
    // x-1, y-1       x, y-1        x+1, y-1

    // x-1, y         x, y          x+1, y    

    // x-1, y+1       x, y+1        x+1, y+1

    // 通过像素坐标进行循环
    for (let i = x - 1; i <= x + 1; i++) {
      for (let j = y - 1; j <= y + 1; j++) {

        // 剔除周围非数字的格子、越界的情况、传入的格子本身
        if (
          i < 0 ||                              //左
          j < 0 ||                              //右
          i > this.td - 1 ||                    //下
          j > this.tr - 1 ||                    //上
          (i == x && j == y) ||                 //本身

          // 行与列的格式坐标与像素格式坐标相反
          this.squares[j][i].type == 'mine'     //雷
        ) {
          continue;
        }

        // 以行与列的格式返回出去，后面要用这种格式的坐标去取squares里的数据
        result.push([j, i]);
      }
    }
    return result;
  }

  • 更新每个雷周围的数字

    • 通过遍历雷盘里所有的格子来找到是雷的格子的坐标，然后将雷的坐标依次调用找四周的方法来找到周围是数字的格子，并让里面的数字++。


  // 更新雷周围格子的数字
  updataNum() {
    for (let i = 0; i < this.tr; i++) {
      for (let j = 0; j < this.td; j++) {

        if (this.squares[i][j].type == 'number') {
          continue;
        }

        // 保存找到的雷周围格子的坐标
        let num = this.getAround(this.squares[i][j]);

        // 把找到的坐标相对应的格子里的数字加一
        for (let k = 0; k < num.length; k++) {
          this.squares[num[k][0]][num[k][1]].value += 1;
        }
      }
    }
  }

  • 扩散算法

    • 接收一个格子的坐标和保存有颜色类名的数组
    • 将接收到的坐标先调用找格子四周的方法，找到每个数字不为0的格子，让这个格子的数字和颜色显示在页面中。如果找到的是数字为0的格子，就要把找过的格子做个标记，将周围剩下的所有没有标记过的数字为格子的坐标，依次传入扩散算法中递归。


  // 扩散算法
  diffusion(square, clArr) {
    // 1.显示自己的·数字
    //    2.展示四周（四周有不为0的格子，那就不用以这个不为0的格子为中心往它的四周找了）
    //        1.显示自己的·数字
    //            2.展示四周（四周有不为0的格子，那就不用以这个不为0的格子为中心往它的四周找了）
    //                    ......类推


    // 找到周围的八个格子
    let around = this.getAround(square);
    for (let i = 0; i < around.length; i++) {

      let x = around[i][0];
      let y = around[i][1];

      // 显示自己（0的）
      this.allDom[x][y].className = clArr[this.squares[x][y].value];


      // 找到的某个格子为中心往四周找到vlaue的值为0
      if (this.squares[x][y].value == 0) {

        // 找过的格子要被记录，只有没被找过的格子才需要接着调用（递归）
        if (!this.allDom[x][y].check) {
          this.allDom[x][y].check = true;
          this.diffusion(this.squares[x][y], clArr);
        }

        // 显示自身的数字value不为0时， 
      } else {
        this.allDom[x][y].innerHTML = this.squares[x][y].value;
      }
    }
  }

  • 给雷盘绑定鼠标事件

    • 将事件源身上触发的事件冒泡到雷盘元素上执行。
    • 左键点击
      • 点击到数字
        • 非0数字：显示数字，并给一个class类名以展示字体颜色和背景色
    // 事件源对象
    let currDom = event.target;

    // 只有每游标红旗的格子才能被鼠标左键点击
    if (event.button == 0 && currDom.className != 'flag') {

      // 获取当前点击到的格子里的信息
      let currSquare = this.squares[currDom.pos[0]][currDom.pos[1]];

      // 保存数字颜色的类名
      let colorArr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']

      // 点击到的是数字
      if (currSquare.type == 'number') {

        // 给每个格子里的非0数字添加到页面的元素中并给一个颜色的class类名
        currDom.innerHTML = currSquare.value;
        currDom.className = colorArr[currSquare.value];


      } 

  - 数字0：不显示数字值，给一个class类名以展示背景色，并去调用扩散算法，让当前被点击到的格子，显示周围数字为0的格子，实现那种一点一大片的操作。

        if (currSquare.value == 0) {
          currDom.innerHTML = '';

          this.diffusion(currSquare, colorArr);
        }

- 点击到雷
  - 调用游戏结束的方法。
  • 右键点击
    • 多次点击时小红旗的切换及其剩余雷数的变化
// 多次点击时小红旗的切换及其剩余雷数的变化
      // 没有被左键点击时右键触发
      if (!currDom.className) {
        currDom.className = 'flag';
        this.mineNumDom.innerHTML = --this.surplusMine;

        // 已被右键点击过的右键触发
      } else if (currDom.className == 'flag') {
        currDom.className = '';
        this.mineNumDom.innerHTML = ++this.surplusMine;
      }
  • 将所有小红旗都标完后，只要有一个雷没有标中，就去调用游戏结束方法，否则就是游戏通过。
// 每次右键点击到的都是是雷
      if (this.squares[currDom.pos[0]][currDom.pos[1]].type == 'mine') {
        this.allIn = true;

        // 有一次右键点击到的不是雷
      } else {
        this.allIn = false;
      }

      // 用户标完小红旗
      if (this.surplusMine == 0) {
        if (this.allIn) {

          alert('恭喜你，游戏过关！' + '所用时间为：' + this.getGameTime());
        } else {

          this.over();
        }
      }

  • 游戏结束

    • 如果点到雷就让点到的格子标个颜色。

    // 点中的雷标黄
    if (dom) {
      dom.style.backgroundColor = '#ff0';
    }
  • 显示所有的雷。
    // 显示所有的雷
    for (let i = 0; i < this.tr; i++) {
      for (let j = 0; j < this.td; j++) {
        if (this.squares[i][j].type == 'mine') {
          this.allDom[i][j].className = 'mine';
        }


      }
    }
  • 取消所有格子的点击事件，最后弹个文字。
        // 取消所有格子的点击事件
        this.allDom[i][j].onmousedown = null;

  • 获取游戏时长

    • 主要是将毫秒格式的时间转换为00:00:00格式的时间。
    • 时间超过3600秒时，最左边的两个0是十进制的数，其余的都是60进制的数，然后摩除再拼接就得到了，最后记得更新上次保留的时间。

  // 获取游戏时长（将毫秒数的时间转为00:00:00的格式）
  getGameTime() {
    lastTime = new Date().getTime();

    let time = (lastTime - newTime) / 1000;
    let str, hours, minute, second;

    if (time > 3600) {
      let num = parseInt(parseInt(time / 3600));
      hours = num >= 10 ? num + ':' : '0' + num + ':';
      minute = (time - num * 3600) / 60 >= 10 ? parseInt((time - num * 3600) / 60) + ':' : '0' + parseInt((time - num * 3600) / 60) + ':';
    } else {
      hours = parseInt(time / 3600) > 0 ? (parseInt(time / 3600) >= 10 ? (parseInt(time / 3600) + ':') : ('0' + parseInt(time / 3600) + ':')) : '';
      minute = parseInt(time / 60) >= 10 ? (parseInt(time % 3600) >= 59 ? (parseInt(parseInt(time % 3600) / 60) + ':') : (parseInt(time / 60) + ':')) : ('0' + parseInt(time / 60) + ':');
    }

    second = parseInt(time % 60) >= 10 ? parseInt(time % 60) : '0' + parseInt(time % 60);

    // 更新上次保留的时间
    newTime = lastTime;
    return str = hours + minute + second;
  }

  • 游戏难度按钮相关

    • 给按钮绑定事件，当按钮被点击就可以根据索引拿到相对应的雷盘的数据并生成，并做到按钮的切换。
    • 当点击的是重新开始可直接初始化一个新的同等难度等级的雷盘。

oBtnArr.forEach(function (oBtn, index) {
  oBtn.onclick = function () {

    // 重新开始游戏
    if (index == 3) {

      // // 创建一个新的同等难度等级的雷盘
      mine = new Mine(...arr[lastActiveIndex]);
      mine.init();

    // 选择游戏难度 
    } else {
      // button按钮的选中和切换
      oBtnArr[lastActiveIndex].className = '';
      oBtnArr[index].className = 'active';

      // 创建一个新的难度等级的雷盘
      mine = new Mine(...arr[index]);
      mine.init();
      lastActiveIndex = index;
    }
  }
})

项目完整代码

html

<!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">
  <title>扫雷游戏</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="mine">
    <div class="level">
      <button class="active">初级</button>
      <button>中级</button>
      <button>高级</button>
      <button>重新开始</button>
    </div>

    <div class="gameBox"></div>

    <div class="info">
      剩余雷数： <sapn class="mineNum"></sapn>
    </div>
  </div>

</body>
<script src="./index.js"></script>

</html>

css

*{
  padding: 0px;
  margin: 0px;
  list-style: none;
}

#mine{
  margin: 50px auto;
}

.level{
  text-align: center;
  margin-bottom: 10px;
}

.level button{
  padding: 5px 15px;
  border: none;
  color: #fff;
  background-color: #02a4ad;
  border-radius: 3px;

  outline: none;
  cursor: pointer;
}

.level button.active{
  background-color: #00abff;
}

table{
  border-spacing: 1px;
  background-color: #929196;
  margin: 20px auto;
}

td{
  width: 20px;
  height: 20px;
  padding: 0px;
  border: 2px solid;
  border-color: #fff #a1a1a1 #a1a1a1 #fff;
  background-color: #ccc;

  text-align: center;
  line-height: 20px;
  font-weight: bold; 
  font-family:'宋体';
}

td.zero{
  background: #d9d9d9;
  border-color: #d9d9d9;
}

td.one{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #0332fe;
}

td.two{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #019f02;
}

td.three{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #ff2600;
}

td.four{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #93208f;
}

td.five{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #ff7f29;
}

td.six{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #ff3fff;
}

td.seven{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #3fffbf;
}

td.eight{
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #22ee0f;
}

.gameBox ::selection {
  background: none;
}

.info{
  margin-top: 20px;
  text-align: center;
}

.info div{
  margin-top: 15px;
}

.mine{
  background: #d9d9d9 url(./pic/mine.png) no-repeat center;
  background-size: cover;
}

.flag{
  background: #ccc url(./pic/flag.png) no-repeat center;
  background-size: cover;
}



// ES6面向对象方式

// 定义创建雷盘的对象
class Mine {
  constructor(tr, td, mineNum) {

    // 行
    this.tr = tr;

    // 列
    this.td = td;

    // 地图里雷的总数
    this.mineNum = mineNum;

    // 按行与列的顺序保存所有方块信息对象的数组
    this.squares = [];

    // 存储所有格子的DOM元素对象
    this.allDom = [];

    // 剩余雷的数量
    this.surplusMine = mineNum;

    // 当最后一面小红旗标记后，每面旗下面是否都是雷
    this.allIn = false;

    // 获取雷盘元素
    this.parent = document.getElementsByClassName('gameBox')[0];

    // 剩余雷数的元素
    this.mineNumDom = document.getElementsByClassName('mineNum')[0];
  }



  // 初始化
  init() {

    this.saveSquaresInfo();

    this.updataNum();

    this.creatDom();

    // 取消鼠标右键的点击事件
    this.parent.oncontextmenu = () => false;

    // 在页面显示雷的数量
    this.mineNumDom.innerHTML = this.mineNum;
  }


  // 创建表格
  creatDom() {

    // 创建table标签
    let table = document.createElement('table');
    for (let i = 0; i < this.tr; i++) {

      // 创建tr标签
      let trDom = document.createElement('tr');

      // 创建保存每列里所有格子DOM对象的数组
      this.allDom[i] = [];

      for (let j = 0; j < this.td; j++) {

        // 创建td标签
        let tdDom = document.createElement('td');

        // 给每个td标签绑定鼠标左右键的点击事件
        tdDom.onmousedown = (e) => {
          this.play(e);
        }

        // 把每个格子的行与列坐标保存到格子身上
        tdDom.pos = [i, j];


        // 保存格子的DOM对象
        this.allDom[i][j] = tdDom;

        // 每创建一个td标签，就插入到tr中
        trDom.appendChild(tdDom);
      }

      // 每创建一个tr标签，就插入到table中
      table.appendChild(trDom);
    }

    // 选择其他难度等级前要清空上一个雷盘
    this.parent.innerHTML = '';

    // 将table标签插入到页面中
    this.parent.appendChild(table);
  }



  // 生成n个随机不重复的数字
  randomNum() {

    // 生成一个空的数组，长度为格子的总数
    let arr = new Array(this.tr * this.td);

    for (let i = arr.length; i > 0; i--) {

      arr[i] = i
    }

    // 将数组里的数据乱序并取出前n个作为雷
    return arr.sort(() => 0.5 - Math.random()).slice(0, this.mineNum);
  }



  // 将所有方块信息的对象保存到数组中
  saveSquaresInfo() {

    // 保存随机数的数组
    let randomArr = this.randomNum();

    let n = 0;

    for (let i = 0; i < this.tr; i++) {
      this.squares[i] = [];

      for (let j = 0; j < this.td; j++) {

        // 为了能以行与列的形式遍历所有格子
        n++;

        if (randomArr.indexOf(n) == -1) {

          // 找到的是数字(行和列的x,y与像素坐标的x,y的值刚好是相反的)
          this.squares[i][j] = { type: 'number', x: j, y: i, value: 0 }
        } else {

          // 找到的是雷
          this.squares[i][j] = { type: 'mine', x: j, y: i }
        }
      }
    }
  }



  // 通过某个格子的像素坐标找到周围的八个格子
  getAround(square) {
    let x = square.x;
    let y = square.y;

    // 用于保存找到的坐标
    let result = [];

    //找格子的规律
    // x-1, y-1       x, y-1        x+1, y-1

    // x-1, y         x, y          x+1, y    

    // x-1, y+1       x, y+1        x+1, y+1

    // 通过像素坐标进行循环
    for (let i = x - 1; i <= x + 1; i++) {
      for (let j = y - 1; j <= y + 1; j++) {

        // 剔除周围非数字的格子、越界的情况、传入的格子本身
        if (
          i < 0 ||                              //左
          j < 0 ||                              //右
          i > this.td - 1 ||                    //下
          j > this.tr - 1 ||                    //上
          (i == x && j == y) ||                 //本身

          // 行与列的格式坐标与像素格式坐标相反
          this.squares[j][i].type == 'mine'     //雷
        ) {
          continue;
        }

        // 以行与列的格式返回出去，后面要用这种格式的坐标去取squares里的数据
        result.push([j, i]);
      }
    }
    return result;
  }



  // 更新雷周围格子的数字
  updataNum() {
    for (let i = 0; i < this.tr; i++) {
      for (let j = 0; j < this.td; j++) {

        if (this.squares[i][j].type == 'number') {
          continue;
        }

        // 保存找到的雷周围格子的坐标
        let num = this.getAround(this.squares[i][j]);

        // 把找到的坐标相对应的格子里的数字加一
        for (let k = 0; k < num.length; k++) {
          this.squares[num[k][0]][num[k][1]].value += 1;
        }
      }
    }
  }



  // 扩散算法
  diffusion(square, clArr) {
    // 1.显示自己的·数字
    //    2.展示四周（四周有不为0的格子，那就不用以这个不为0的格子为中心往它的四周找了）
    //        1.显示自己的·数字
    //            2.展示四周（四周有不为0的格子，那就不用以这个不为0的格子为中心往它的四周找了）
    //                    ......类推


    // 找到周围的八个格子
    let around = this.getAround(square);
    for (let i = 0; i < around.length; i++) {

      let x = around[i][0];
      let y = around[i][1];

      // 显示自己（0的）
      this.allDom[x][y].className = clArr[this.squares[x][y].value];


      // 找到的某个格子为中心往四周找到vlaue的值为0
      if (this.squares[x][y].value == 0) {

        // 找过的格子要被记录，只有没被找过的格子才需要接着调用（递归）
        if (!this.allDom[x][y].check) {
          this.allDom[x][y].check = true;
          this.diffusion(this.squares[x][y], clArr);
        }

        // 显示自身的数字value不为0时， 
      } else {
        this.allDom[x][y].innerHTML = this.squares[x][y].value;
      }
    }
  }

  

  // 开始游戏的方法
  play(event) {

    // 事件源对象
    let currDom = event.target;

    // 只有每游标红旗的格子才能被鼠标左键点击
    if (event.button == 0 && currDom.className != 'flag') {

      // 获取当前点击到的格子里的信息
      let currSquare = this.squares[currDom.pos[0]][currDom.pos[1]];

      // 保存数字颜色的类名
      let colorArr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']

      // 点击到的是数字
      if (currSquare.type == 'number') {

        // 给每个格子里的非0数字添加到页面的元素中并给一个颜色的class类名
        currDom.innerHTML = currSquare.value;
        currDom.className = colorArr[currSquare.value];
        if (currSquare.value == 0) {
          currDom.innerHTML = '';

          this.diffusion(currSquare, colorArr);
        }

      } else if (currSquare.type == 'mine') {

        // 结束游戏
        this.over(currDom);
      }

      // 鼠标右键点击
    } else if (event.button == 2) {

      // 多次点击时小红旗的切换及其剩余雷数的变化
      // 没有被左键点击时右键触发
      if (!currDom.className) {
        currDom.className = 'flag';
        this.mineNumDom.innerHTML = --this.surplusMine;

        // 已被右键点击过的右键触发
      } else if (currDom.className == 'flag') {
        currDom.className = '';
        this.mineNumDom.innerHTML = ++this.surplusMine;
      }


      // 每次右键点击到的都是是雷
      if (this.squares[currDom.pos[0]][currDom.pos[1]].type == 'mine') {
        this.allIn = true;

        // 有一次右键点击到的不是雷
      } else {
        this.allIn = false;
      }

      // 用户标完小红旗
      if (this.surplusMine == 0) {
        if (this.allIn) {

          alert('恭喜你，游戏过关！' + '所用时间为：' + this.getGameTime());
        } else {

          this.over();
        }
      }
    }
  }



  // 结束游戏
  over(dom) {

    // 显示所有的雷
    for (let i = 0; i < this.tr; i++) {
      for (let j = 0; j < this.td; j++) {
        if (this.squares[i][j].type == 'mine') {
          this.allDom[i][j].className = 'mine';
        }

        // 取消所有格子的点击事件
        this.allDom[i][j].onmousedown = null;
      }
    }

    // 点中的雷标黄
    if (dom) {
      dom.style.backgroundColor = '#ff0';
    }
    alert( '游戏结束！' + '所用时间为：' + this.getGameTime());
  }



  // 获取游戏时长（将毫秒数的时间转为00:00:00的格式）
  getGameTime() {
    lastTime = new Date().getTime();

    let time = (lastTime - newTime) / 1000;
    let str, hours, minute, second;

    if (time > 3600) {
      let num = parseInt(parseInt(time / 3600));
      hours = num >= 10 ? num + ':' : '0' + num + ':';
      minute = (time - num * 3600) / 60 >= 10 ? parseInt((time - num * 3600) / 60) + ':' : '0' + parseInt((time - num * 3600) / 60) + ':';
    } else {
      hours = parseInt(time / 3600) > 0 ? (parseInt(time / 3600) >= 10 ? (parseInt(time / 3600) + ':') : ('0' + parseInt(time / 3600) + ':')) : '';
      minute = parseInt(time / 60) >= 10 ? (parseInt(time % 3600) >= 59 ? (parseInt(parseInt(time % 3600) / 60) + ':') : (parseInt(time / 60) + ':')) : ('0' + parseInt(time / 60) + ':');
    }

    second = parseInt(time % 60) >= 10 ? parseInt(time % 60) : '0' + parseInt(time % 60);

    // 更新上次保留的时间
    newTime = lastTime;
    return str = hours + minute + second;
  }
}



// 游戏难度按钮
let oBtnArr = [...document.getElementsByTagName('button')];
let arr = [[15, 15, 15], [20, 25, 50], [25, 35, 175]];
let lastActiveIndex = 0;
let mine;

// 游戏用时相关
let newTime;
let lastTime;

oBtnArr.forEach(function (oBtn, index) {
  oBtn.onclick = function () {

    // 重新开始游戏
    if (index == 3) {

      // // 创建一个新的同等难度等级的雷盘
      mine = new Mine(...arr[lastActiveIndex]);
      mine.init();

    // 选择游戏难度 
    } else {
      // button按钮的选中和切换
      oBtnArr[lastActiveIndex].className = '';
      oBtnArr[index].className = 'active';

      // 创建一个新的难度等级的雷盘
      mine = new Mine(...arr[index]);
      mine.init();
      lastActiveIndex = index;
    }
  }
})



// 游戏初始化
oBtnArr[0].onclick();
newTime = new Date().getTime();

原创不易，各位看官老爷三连可好。🍻🍻🍻

Zhiqiang_Xiong
关注
专栏目录
纯原生JS用面向对象class方法实现简易扫雷小游戏
qq_23539691的博客
05-29 1772
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏：布局为10*10的网格，随机生成10-20个雷。 左键点击扫雷。右键标记该地方有雷。该demo下载下来复制到html文件中直接可以使用。不需要下载任何插件和引入任何框架。 小游戏源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
javascript进阶面向对象ES6
weixin_45732235的博客
06-21 1646
js进阶部分知识笔记
ES6 手写一个“辨色”小游戏
weixin_34007906的博客
09-18 225
1. 前言 依稀记得几年前朋友圈流行的辨色小游戏，找出颜色不同的矩形。前些天突发奇想，打算自己手写一个类似的游戏，话不多说，先上 Demo . --项目源码 本实例基于 ES6 实现，并兼容 ie9及以上。 2. 项目结构 index.html index.css index.js 本文主要讲述如何使用 js 实现功能，html css 不在此范围。直接上代码。 <!--index.html...
面相对象扫雷
qq_43581857的博客
12-15 781
如题所示 HTML代码 这个代码基本跟老师的一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="s
面向对象js开发扫雷小游戏
09-03
面向对象，js，开发扫雷小游戏已封装，只需要创建一个对象就可以。
扫雷：面向对象分析与设计（第三版）
动画宅
03-18 2693
即使冒着被板砖砸飞的风险，我也要说：   Object-Oriented Analysis and Design with Applications (3rd Edition)   对于ruby程序员（也许再加上使用敏捷的团队）并不实用   让我稍微借鉴某位名人说的话来评论这本书： 书分两种，一种是写的尽量简单，并且没有明显问题，另一种是写的尽量复杂，并且没有明显问题   本书...
es6面向对象学习笔记整理版.md
06-16
md文件，可用Typora软件打开编辑。### 1....- ###### 面向对象编程OOP（Object Oriented programming） - 含义：把事务分解成一个个对象，通过对象之间分工与合作解决；（**拟人化，把万物写活**）
Mine-Clearance:ES6针对对象
03-06
ES6面向对象之经典扫雷小游戏 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说，先上效果图 闲话不多说...
ES6顶层对象、global对象实例分析
10-16
ES6顶层对象和global对象是JavaScript语言中非常重要的概念，特别是在ES6（ECMAScript 6，即ECMAScript 2015）版本中对顶层对象的属性与全局变量关系进行了调整，引入了let和const命令，这些变化对于开发者理解全局...
H5 打飞机小游戏 webpack+html+css+ES6+canvas
05-04
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。 涉及了面向对象、继承的概念 移动端兼容（如ios音频问题） 资源预加载和HTML5标签 audio 的使用
Python 扫雷游戏 完整源代码+图片素材
11-22
基于Python3.7实现，参考。实现完整扫雷游戏逻辑，含随机雷分布，第一步必不踩雷，一片区域无雷自动点开，双键同时按下操作的逻辑，记分牌等等。 按下屏幕中间脸蛋重置游戏
使用ES6写一个贪吃蛇小游戏
qq_43806075的博客
03-19 4910
贪吃蛇小游戏
JAVA实现简单扫雷（续）
Y_KolaFish_Y的博客
12-26 690
前言 我这次写的这个扫雷程序是java面向对象编程的结课作业，说实话一开始我没想到我会遇到这么多问题，也没想到这么一个小程序会让我有这么多的收获，从简陋的Demo1，到稍微完善的Demo2，再到现在有点样子的Demo3，感受颇多，在这里我想稍微花一点时间总结一下我的思路，和我在实际编写代码时遇到的问题。 整体思路 （有空再写） 遇到的困难 （1）&amp;amp;amp;gt;遇到困难的地方主要是广搜那段算法...
es6版打灰机游戏 --- 玩家飞机类的构建
wujimiao的专栏
09-18 736
JavaScript新标准es6语法已经被大多数主流浏览器所支持，像谷歌，edge等最新版都支持ES6大多数语法。不需要额外编译器，Babel之类的。 为了适应社会潮流，我在看了阮一峰es6入门和一些网络教程，决定移植以前es5版本灰机游戏。由于时间原因，分步骤进行，此篇只讲玩家飞机类构建和键盘事件控制 主要变化 变量声明： var  --->  let 箭头函数使用  functio
概述ES5和ES6中面向对象的实现方法
qq_32614411的博客
07-04 957
大部分前端开发是做一些交互处理， 基本是面向过程的， 一溜烟的写下去， 但是在游戏开发和插件编写的时候是需要运用面向对象的思想实现的。接下来，就简单介绍一下ES5和ES6中面向对象的实现方法。 写在前面——声明函数function的方式、‘use strict’ 声明函数function时有两种方式： 方式一：函数声明 function fn2 {} 函数声明 是Google不推荐的写...
C#面向对象基于winform的扫雷游戏和简单的算法改进
勿忘初心
05-08 3794
由于实验室有一个演示系统的
Python学习笔记（一）：命令行界面扫雷（详细）
qq_43777823的博客
04-07 1385
起因 因为最近刚刚开始学习Python，想编点东西来熟悉一下语法，想起来之前用C语言编过一个简单的命令行界面的扫雷，故用Python来重新编一个，大致效果如下图，我会在文章中梳理一下我当时的大致思路。 过程 首先我们需要构建出来一个雷阵，我们需要的参数有两个，一个是雷阵的大小，另一个就是雷数。 n = eval(input("请输入雷阵的大小")) m = eval(input(...
ES6面向对象编程学习笔记
"ES6面向对象学习笔记整理版" ES6 中的面向对象编程是一种编程思想，可以帮助开发者更好地组织和结构化代码。面向对象编程的核心思想是将问题分解成一个个对象，然后通过对象之间的分工和合作来解决问题。 在 ES6 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值