Minesweeper game implemented using vue (with code)

The content of this article is about the minesweeper game implemented using vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have nothing to do when I have free time at work, and I do it on a whim. I want to use the vue I just learned to write a minesweeper game. . Okay, let’s get straight to the point.

The first step is to make a 10x10 grid map. . I won’t talk about this pcss. . Everyone does.

The second step is to create an array to generate random minefields.

let arr = []
for (var i = 0; i <p>The third step is to create a json array and let it loop to generate the grid on the page. </p><pre class="brush:php;toolbar:false">  let arrs = []
  for (var j = 0; j  -1) {
      obj.isLei = true // 是否是地雷
    } else {
      obj.isLei = false // 是否是地雷
    }
    obj.id = j
    obj.isTrue = false // 安全区样式
    obj.isFalse = false // 雷区样式
    arrs.push(obj)
  }

The data looks like this

The fourth step is to click on the grid to trigger the event. Determine whether this is a minefield. It displays green if it is safe, otherwise it displays red.

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

The following is all the code:

<script>
export default{
  data () {
    return {
      lattice: null, // 100个格子
      surPlus: 90 // 安全区。。因为是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 // 安全区样式
        obj.isFalse = false // 雷区样式
        arrs.push(obj)
      }
      this.lattice = arrs
      console.log(arrs)
    }
  },
  mounted () {
    this.random()
  }
}
</script>
<template>
  <div>
      <div>
        <div></div>
      </div>
      <div>剩余{{surPlus}}个安全格子</div>
  </div>
</template>
<style>
.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>

The final look is probably like this:

The above is the detailed content of Minesweeper game implemented using vue (with code). For more information, please follow other related articles on the PHP Chinese website!