资讯专栏INFORMATION COLUMN

使用vue写扫雷游戏

JinB / 564人阅读

摘要:想用刚学的,写一个扫雷游戏。。第二步,制造一个数组,用来生成随机雷区。是否是地雷是否是地雷安全区样式雷区样式大概是这样子的数据第四步,点击格子,触发事件。判断是否这个是雷区。如果安全就显示绿色,否则显示红色。

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

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

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

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
  }
}

以下是所有代码:




最后样子大概就是这样:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99269.html

相关文章

  • 使用vue扫雷游戏

    摘要:想用刚学的,写一个扫雷游戏。。第二步,制造一个数组,用来生成随机雷区。是否是地雷是否是地雷安全区样式雷区样式大概是这样子的数据第四步,点击格子,触发事件。判断是否这个是雷区。如果安全就显示绿色,否则显示红色。 上班闲来没事做,,心血来潮。想用刚学的vue,写一个扫雷游戏。。好了,直入正题. 第一步,先制作一个10x10的格子图。。这个divcss就不说了。。大家都会。 showImg...

    e10101 评论0 收藏0
  • C语言初阶学习——扫雷游戏(递归)

    摘要:目录前言前言前期的准备前期的准备游戏代码的具体实现游戏代码的具体实现完整版的扫雷小游戏代码完整版的扫雷小游戏代码总结总结前言扫雷是一款大众类的益智小游戏,于年发行。 目录 前言 前期的准备 游戏代码的具体实现 1、text.c 2、game.h 3、game.c 完整版的扫雷小游戏代码: 1...

    zhonghanwen 评论0 收藏0
  • 扫雷游戏(C语言实现)

    摘要:写在前面我们已经写过了三子棋小游戏肯定没玩过瘾,我们再写个扫雷小游戏吧目录写在前面认识游戏游戏规则游戏框架游戏实现效果展示全部代码文件文件文件认识游戏相信大家对扫雷都不陌生每台电脑必备的小游戏游戏规则就是在规定的时间将 ...

    Coding01 评论0 收藏0
  • C/C++游戏项目详细教学:《扫雷

    摘要:扫雷最原始的版本可以追溯到年一款名为方块的游戏。两年后,汤姆安德森在的基础上又编写出了游戏地雷,由此奠定了现代扫雷游戏的雏形。年,微软公司的罗伯特杜尔和卡特约翰逊两位工程师在系统上加载了该游戏,扫雷游戏才正式在全世界推广开来。 扫雷最原始的版本可以追溯到1973年一款名为方块的游戏。 不久,...

    meteor199 评论0 收藏0
  • c语言实现扫雷

    摘要:上一篇讲了三子棋,今天我们来讲扫雷原理都是一样的通常我们写代码的时候,写之前都要整理分析好逻辑,要做到分段分块来写,以便于代码阅读和后期维护这里我将代码分为三个文件头文件通常用来完成函数声明头文件的引用宏定义变量用于游戏功能函数的实现作为 上一篇讲了三子棋,今天我们来讲扫雷原理都是一样的; ...

    LiangJ 评论0 收藏0

发表评论

0条评论

JinB

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<