扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关使用vue如何实现扫雷游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联专注于企业成都营销网站建设、网站重做改版、细河网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为细河等各大城市提供网站开发制作服务。上班闲来没事做，，心血来潮。想用刚学的vue，写一个扫雷游戏。。好了，直入正题.
第一步，先制作一个10x10的格子图。。这个pcss就不说了。。大家都会。
第二步，制造一个数组，用来生成随机雷区。
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)
}大概是这样子的数据
第四步，点击格子，触发事件。判断是否这个是雷区。如果安全就显示绿色，否则显示红色。
toclick (e) {
console.log(e.isTrue)
if (e.isLei === true) {
e.isFalse = true
} else {
e.isTrue = true
this.surPlus = this.surPlus - 1
}
}以下是所有代码：
剩余{{surPlus}}个安全格子
最后样子大概就是这样：
关于使用vue如何实现扫雷游戏就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网