HTML代码

<title>

  扫雷

</title>

<!-- ondragstart:防拖拽生成新页面 oncontextmenu:屏蔽右键菜单-->

<body ondragstart='return false' oncontextmenu='self.event.returnValue=false'>

  <div id='bar'>

    <span class='bar'>

      剩余雷数：

      <label id='count'>

        0

      </label>

    </span>

    <span class='bar'>

      计时：

      <label id='time'>

        0

      </label>

      s

    </span>

  </div>

  <table id='grid'>

  </table>

CSS代码

#bar {

      text-align: center;

      margin-bottom: 20px;

    }

    .bar {

      height: 25px;

      width: 150px;

      line-height: 25px;

      display: inline-block;

      border: solid 1px #000;

      margin-left: 20px;

      margin-right: 20px;

    }

    #grid {

      margin: auto;

    }

    .blocks {

      width: 30px;

      height: 30px;

      line-height: 30px;

      display: block;

      text-align: center;

      border: solid 1px #000;

      user-select: none;

      cursor: pointer;

    }

    .blocks:hover {

      background: #0af;

    }

JS代码

var row = 10; //行数

var col = 10; //列数

var maxCount = 10; //最大地雷数量

var isFirstOpen = true; //第一次打开方格

var grid = init_grid(); //初始化

var count = document.getElementById('count'); //剩余地雷数

count.innerHTML = maxCount; //初始化剩余雷数

var time = document.getElementById('time'); //计时器

var timer = setInterval(function() {

  let seconds = (parseFloat(time.innerHTML) + 0.1).toFixed(1); //保留一位小数

  time.innerHTML = seconds;

},

100) //定时器 100ms执行一次

//初始化矩阵 (row-行数 col-列数)

function init_grid() {

  //生成矩阵html <tr>--行标签 <td>--列标签

  let gridHtml = '';

  for (let i = 0; i < row; i++) {

    gridHtml += '<tr>'

    for (let j = 0; j < col; j++) {

      gridHtml += '<td><span class="blocks" onmousedown="block_click(' + i + ',' + j + ',event)"></span></td>';

    }

    gridHtml += '<tr>'

  }

  //写入html

  document.getElementById('grid').innerHTML = gridHtml;

  //返回矩阵二维数组

  let blocks = document.getElementsByClassName('blocks');

  let grid = new Array();

  for (let i = 0; i < blocks.length; i++) {

    if (i % col === 0) {

      grid.push(new Array());

    }

    //初始化计雷数

    blocks[i].count = 0;

    grid[parseInt(i / col)].push(blocks[i]);

  }

  return grid;

}

//方格点击事件 _i：坐标i _j:坐标j e:鼠标事件

function block_click(_i, _j, e) {

  //跳过已打开的方格

  if (grid[_i][_j].isOpen) {

    return;

  }

  //鼠标左键打开方格

  if (e.button === 0) {

    //第一次打开

    if (isFirstOpen) {

      isFirstOpen = false;

      let count = 0; //当前地雷数

      //生成地雷

      while (count < maxCount) {

        //生成随机坐标

        let ri = Math.floor(Math.random() * row);

        let rj = Math.floor(Math.random() * col);

        //坐标不等于第一次点击方格的坐标 && 非雷方格

        if (! (ri === _i && rj === _j) && !grid[ri][rj].isMine) {

          grid[ri][rj].isMine = true; //自定义属性isMine代表方格为地雷

          count++; //当前地雷数+1

          //更新九宫格内非雷方格的计雷数

          for (let i = ri - 1; i < ri + 2; i++) {

            for (let j = rj - 1; j < rj + 2; j++) {

              //判断坐标防越界

              if (i > -1 && j > -1 && i < row && j < col) {

                //计雷数+1

                grid[i][j].count++;

              }

            }

          }

        }

      }

    }

    //执行打开方格函数

    block_open(_i, _j);

    //打开方格函数

    function block_open(_i, _j) {

      let block = grid[_i][_j];

      op(block);

      //设定打开方格的状态与样式

      function op(block) {

        block.isOpen = true; //isOpen为自定义属性，设置为true代表已打开

        block.style.background = '#ccc'; //将背景设置为灰色

        block.style.cursor = 'default'; //将鼠标停留样式设置为默认

      }

      if (block.isMine) {

        //踩雷

        block.innerHTML = '雷'; //显示为 '雷'

        //遍历矩阵打开所有的地雷方格

        for (let i = 0; i < row; i++) {

          for (let j = 0; j < col; j++) {

            //找到地雷

            block = grid[i][j];

            if (!block.isOpen && block.isMine) {

              op(block); //设置打开状态和样式

              block.innerHTML = '雷'; //显示为 '雷'

            }

          }

        }

        clearInterval(timer); //游戏结束停止计时，清除定时器

        //提示游戏结束

        alert("游戏结束");

      } else if (block.count === 0) {

        //打开计雷数为0的方格

        //遍历九宫格内的方格

        for (let i = _i - 1; i < _i + 2; i++) {

          for (let j = _j - 1; j < _j + 2; j++) {

            //判断是否越界&&跳过已打开的方格&&非雷

            if (i > -1 && j > -1 && i < row && j < col && !grid[i][j].isOpen && !grid[i][j].ismine) {

              //递归打开方格函数

              block_open(i, j);

            }

          }

        }

      } else {

        //打开计雷数不为0的方格

        block.innerHTML = block.count; //显示计雷数

      }

    }

  }

  //鼠标右键标记方格

  else if (e.button === 2) {

    let block = grid[_i][_j];

    if (block.innerHTML !== '▲') {

      block.innerHTML = '▲';

    } else {

      block.innerHTML = '';

    }

  }

  //遍历矩阵

  let isWin = true;

  count.innerHTML = maxCount; //重置剩余地雷数

  for (let i = 0; i < row; i++) {

    for (let j = 0; j < col; j++) {

      let block = grid[i][j];

      //找到标记

      if (block.innerHTML === '▲') {

        count.innerHTML = parseInt(count.innerHTML) - 1; //剩余地雷数-1

      }

      //判断游戏胜利条件(所有的非雷方格已打开)

      if (!block.isMine && !block.isOpen) {

        //如果有未打开的非雷方块 条件不成立

        isWin = false;

      }

    }

  }

  if (isWin) {

    clearInterval(timer); //游戏胜利结束计时，清除定时器

    alert("游戏胜利");

  }

}

JS扫雷小游戏的更多相关文章

  1. Angular4 扫雷小游戏

    扫雷小游戏,可以升级过关,难度随关卡增加.但是有很明显的bug,以后有时间会继续优化! HTML: <div class="mainContent"> <div ...

  2. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  3. 扫雷小游戏PyQt5开发【附源代码】

    也没啥可介绍哒,扫雷大家都玩过. 雷的分布算法也很简单,就是在雷地图(map:二维数组)中,随机放雷,然后这个雷的8个方位(上下左右.四个对角)的数字(非雷的标记.加一后不为雷的标记)都加一. 如何判 ...

  4. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  5. web版扫雷小游戏（一）

    作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如windows下自带的游戏扫雷(秀一下,高级下最高纪录110s). 现阶段正在致力于web ...

  6. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

  7. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  8. C++扫雷小游戏（基于CMD命令行）

    这个小游戏是笔者在大一C语言课程设计的时候写的,基于命令行,为了显得漂亮一些,特别加上了彩色特效~~~ 注意:Win10系统须将命令行调为旧版命令行,否则有可能会显示乱码! 代码示例: #includ ...

  9. 无聊的周末用Java写个扫雷小游戏

    周末无聊,用Java写了一个扫雷程序,说起来,这个应该是在学校的时候,写会比较好玩,毕竟自己实现一个小游戏,还是比较好玩的.说实话,扫雷程序里面核心的东西,只有点击的时候,去触发更新数据这一步. Sw ...

随机推荐

  1. 图片去水印工具：Inpaint 7.2中文专业破解版下载及使用方法

    下载地址: 点我 Inpaint 是一款可以从图片上去除不必要的物体,让您轻松摆脱照片上的水印.划痕.污渍.标志等瑕疵的实用型软件:简单说来,Inpaint 就是一款强大实用的图片去水印软件,您的图片 ...

  2. Java虚拟机详解（三）------垃圾回收

    如果对C++这门语言熟悉的人,再来看Java,就会发现这两者对垃圾(内存)回收的策略有很大的不同. C++:垃圾回收很重要,我们必须要自己来回收!!! Java:垃圾回收很重要,我们必须交给系统来帮我 ...

  3. [1045] PDOException in Connection.php line 295

    tp5实现登录功能时报错 在使用tp5框架实现登录功能的时候,点击login出现了 [1045] PDOException in Connection.php line 295 这个问题, 报错是 S ...

  4. php编写刷网课自助下单系统（第三方支付实例）

    此项目是由于本人刚刚入门php且在校代刷网课而编写的,由于在上课时间不方便接单,故特意写一个自助下单系统来实现客户自助下单.本项目主要实现以下功能:1.用户下单2.用户支付3.用户通过账号查询订单4. ...

  5. VUE+element tree 实现权限管理

    先写个标题~ ~,后续有空在写 具体功能: 1. 获取所有角色权限列表展示,点击进行编辑,编辑用terr树形结构显示页面结构 2.提交的数据格式(页面名称,角色ID,父节点ID,子节点ID) 3.后面 ...

  6. AT173 単位：题解

    题目链接:https://www.luogu.org/problemnew/show/AT173 分析: 首先,我们可以做如下排序: sort(a+1,a+1+n); 因为题目告诉我们了要出席最少的次 ...

  7. React躬行记（9）——组件通信

    根据组件之间的嵌套关系(即层级关系)可分为4种通信方式:父子.兄弟.跨级和无级. 一.父子通信 在React中,数据是自顶向下单向流动的,而父组件通过props向子组件传递需要的信息是组件之间最常见的 ...

  8. InstantiationException:mybatis.spring.transaction.SpringManagedTransactionFactory

    问题表现 Error creating bean with name 'sqlSessionFactory' Invocation of init method failed; nested exce ...

  9. C#8.0 新增功能

    连载目录    [已更新最新开发文章,点击查看详细] C#8.0提供了许多增强功能 01 Readonly 成员 可将 readonly 修饰符应用于结构的任何成员. 它指示该成员不会修改状态. 这比 ...

  10. hdu6396 Swordsman（贪心）

    Swordsman 题目传送门 解题思路 先将每种属性排序,因为打倒怪兽会使属性增强,所以肯定是能打就打,用cnt[i]记录怪兽i已经被超过的属性数量,如果被超过的属性数为k了,则打倒此怪兽,将获得的 ...