扫雷小游戏-纯网页版

这两天在恶补前端的相关知识，看到JQuery的动画部分时，突然心血来潮想做一个扫雷的网页版，于是花了差不多一天的时间完成了一个初始版本，权当对这几天学习成果的一个回顾，若某处功能有更好实现方式欢迎留言一起讨论。

========== 原创作品，未经本人允许，请勿转载，谢谢！ ==========

==========    作者：Yokeqi    出处：博客园    原文链接   ==========

先看看最后实现的效果：如何内嵌一个页面？

 一、知识点介绍

1. Html + CSS + JQuery库

• 要创建界面UI，所以需要用到各类Html标签还有CSS的布局美化。
• 要实现各类逻辑功能，所以需要用到JQuery的选择器、事件等知识。

2. 扫雷游戏的玩法

• 翻开某个格子，如果是雷，那么就会Boom，游戏结束。
• 如果是空白，则代表以这个格子为中心的九宫格范围内没有雷。
• 如果是数字，则根据数字代表这个格子为中心的九宫格范围内存在多少颗雷。
• 正确标记出所有的雷，并翻开多余的格子，则游戏胜利。

二、关键代码说明

1. 创建数据地图，接下来只需要根据数据地图创建对应UI就可以了。

function createMap() {
    //初始化为0
    for (var i = 0; i < num; i++) {
        map[i] = new Array();
        mark[i] = new Array();
        for (var j = 0; j < num; j++) {
            map[i][j] = 0;
            mark[i][j] = 0;
        }
    }

    var count = 0;
    // 生成雷
    while (count < boomNum) {
        var row = Math.floor(Math.random() * (num - 1));
        var col = Math.floor(Math.random() * (num - 1));
        if (isMine(row, col)) {
            // 这个位置已经有雷,重新生成位置
            continue</