這篇文章將為大家詳細講解有關(guān)使用vue如何實現(xiàn)掃雷游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)站定制、營銷型網(wǎng)站、成都小程序開發(fā)、微信公眾號開發(fā)、營銷推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為成都塑料袋企業(yè)提供源源不斷的流量和訂單咨詢。

上班閑來沒事做，，心血來潮。想用剛學(xué)的vue，寫一個掃雷游戲。。好了，直入正題.

第一步，先制作一個10x10的格子圖。。這個pcss就不說了。。大家都會。

第二步，制造一個數(shù)組，用來生成隨機雷區(qū)。

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

第三步，制造一個json數(shù)組，讓他循環(huán)生成頁面上的格子。

  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 // 安全區(qū)樣式
    obj.isFalse = false // 雷區(qū)樣式
    arrs.push(obj)
  }

大概是這樣子的數(shù)據(jù)

第四步，點擊格子，觸發(fā)事件。判斷是否這個是雷區(qū)。如果安全就顯示綠色，否則顯示紅色。

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

以下是所有代碼：

最后樣子大概就是這樣：

關(guān)于使用vue如何實現(xiàn)掃雷游戲就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。