使用vue如何实现扫雷游戏

这篇文章将为大家详细讲解有关使用vue如何实现扫雷游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司成立于2013年，我们提供高端重庆网站建设、成都网站制作、网站设计、网站定制、营销型网站、成都小程序开发、微信公众号开发、营销推广服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都塑料袋企业提供源源不断的流量和订单咨询。

上班闲来没事做，，心血来潮。想用刚学的vue，写一个扫雷游戏。。好了，直入正题.

第一步，先制作一个10x10的格子图。。这个pcss就不说了。。大家都会。

使用vue如何实现扫雷游戏

第二步，制造一个数组，用来生成随机雷区。

let arr = []
for (var i = 0; i < 10; i++) {
  arr.push(Math.floor(Math.random() * 100))
}

第三步，制造一个json数组，让他循环生成页面上的格子。

  let arrs = []
  for (var j = 0; j < 100; j++) {
    let obj = {}
    if (arr.indexOf(j) > -1) {
      obj.isLei = true // 是否是地雷
    } else {
      obj.isLei = false // 是否是地雷
    }
    obj.id = j
    obj.isTrue = false // 安全区样式
    obj.isFalse = false // 雷区样式
    arrs.push(obj)
  }

大概是这样子的数据

使用vue如何实现扫雷游戏

第四步，点击格子，触发事件。判断是否这个是雷区。如果安全就显示绿色，否则显示红色。

toclick (e) {
  console.log(e.isTrue)
  if (e.isLei === true) {
    e.isFalse = true
  } else {
    e.isTrue = true
    this.surPlus = this.surPlus - 1
  }
}

以下是所有代码：

最后样子大概就是这样：

使用vue如何实现扫雷游戏

关于使用vue如何实现扫雷游戏就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网页名称：使用vue如何实现扫雷游戏
分享网址：http://cdiso.cn/article/podpjp.html

使用vue如何实现扫雷游戏

其他资讯