扫雷

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

3.4 事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值