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

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、細河網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5高端網(wǎng)站建設、商城網(wǎng)站制作、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為細河等各大城市提供網(wǎng)站開發(fā)制作服務。

上班閑來沒事做，，心血來潮。想用剛學的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
  }
}

以下是所有代碼：

<script>
export default{
  data () {
    return {
      lattice: null, // 100個格子
      surPlus: 90 // 安全區(qū)。。因為是10個雷。所以就是100-10 = 90
    }
  },
  methods: {
    toclick (e) {
      console.log(e.isTrue)
      if (e.isLei === true) {
        e.isFalse = true
      } else {
        e.isTrue = true
        this.surPlus = this.surPlus - 1
      }
    },
    random () {
      let arr = []
      for (var i = 0; i < 10; i++) {
        arr.push(Math.floor(Math.random() * 100))
      }
      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)
      }
      this.lattice = arrs
      console.log(arrs)
    }
  },
  mounted () {
    this.random()
  }
}
</script>
<template>
  <div class="page">
      <div class="bg">
        <div v-for="item in lattice" class="lattice" :class="{ 'security' : item.isTrue , 'danger': item.isFalse }" :key="item.id" @click="toclick(item)"></div>
      </div>
      <div class="surplus">剩余{{surPlus}}個安全格子</div>
  </div>
</template>
<style scoped>
.page{
    overflow: hidden;
}
.bg{
    border:1px solid #000;
    width:600px;
    height:600px;
    margin:20px auto;
}
.lattice{
    border: 1px solid #ccc;
    box-sizing: border-box;
    float:left;
    width:60px;
    height:60px;
}
.surplus{
    line-height: 38px;
    height:38px;
    width:150px;
    margin:0 auto;
}
.security{
    background-color: green;
}
.danger{
    background-color: red;
}
</style>

最后樣子大概就是這樣：

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

分享名稱：使用vue如何實現(xiàn)掃雷游戲-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.rwnh.cn/article42/ccschc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、外貿(mào)建站、全網(wǎng)營銷推廣、網(wǎng)站導航、定制網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)