登录  /  注册
首页 > web前端 > js教程 > 正文

使用vue实现的扫雷游戏(附代码)

不言
发布: 2018-11-14 10:05:13
转载
3352人浏览过

本篇文章给大家带来的内容是关于使用vue实现的扫雷游戏(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

2432327086-5beb78a383f59_articlex.png

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

let arr = []
for (var i = 0; i <p>第三步,制造一个json数组,让他循环生成页面上的格子。</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)
  }
登录后复制

大概是这样子的数据

362171790-5beb79ac27e50_articlex.png

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

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 // 安全区。。因为是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>
登录后复制

最后样子大概就是这样:

1470458595-5beb7a7f58f02_articlex.png

以上就是使用vue实现的扫雷游戏(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号