扫雷-CSDN博客

本文链接：https://blog.csdn.net/qq_39903918/article/details/114747891

1. HTML

有选择难度的下拉列表
开始按钮

重新加载按钮

画板(显示的小方格)

在这里插入图片描述
#set_num 是选择难度
#start 是开始游戏
#refresh 是重新加载
#content 画板
.tile默认样式
.showed 已点击样式
.boom 雷的样式
.tile current 鼠标移入样式
.tile tag 右键小红旗样式
#title 友情提示

2. CSS

布局
在这里插入图片描述
按钮样式
提示文字样式
格子默认样式

已点击样式
在这里插入图片描述
鼠标移入样式

雷的样式
小红旗样式

3. JS

3.1 接口定义

在这里插入图片描述

3.2 参数初始化

在这里插入图片描述

3.3 生成画板

    // 生成画板
    buildTiles();
    /**
     * 生成画板
     */ 
    function buildTiles(){
        // 判断行和列是否合法
        if(settings.column <=0 || settings.row <= 0){
            alert('行和列必须大于 0 哦~');
            return;
        }
        // 判断雷
        if(settings.mine_num <= 0){
            alert("没雷你玩啥?");
            return;
        }
        if(settings.mine_num >= (settings.column*settings.row)){
            alert("全是雷");
            return;
        }
        // 到这里说明数据没啥问题
        // 获取画板的DOM对象
        var obj = $(settings.obj)[0];
        // 设置画板的宽高
        // 每个盒子宽高是49,边框都是1,所以实际宽高为 51
        // 画板的宽度 = 列数 * 51
        obj.style.width = 51*settings.column +"px";
        obj.style.height = 51*settings.row +"px";
        
        // 对div添加索引,0,1,2,3,.....
        // 方便我们操作,我们能够根据点击的是谁,获取它和周边8个元素
        // 比如 3行4列,  我们点的是第6个,索引就是 5
        // 5 % 列数 = 1 
        // (5-1) % 行数 = 1
        var indexOfdiv = 0 ;
        // 根据行和列 生成div 并设置索引
        for(var i = 0; i< settings.row ; i++){
            for(var j = 0; j < settings.column; j++){
                // 创建div标签
                var tile = document.createElement("div");
                // 设置class属性值为 tile
                tile.className = 'tile';
                // 添加索引
                tile.setAttribute('index',indexOfdiv);
                // 把div保存到 settings.tiles数组中,方便我们后续操作
                settings.tiles[indexOfdiv] = tile;
                indexOfdiv++;
                // 把div添加到 画板中
                obj.appendChild(tile);
            }
        }
    }