Day44 扫雷
- HTML
有选择难度的下拉列表
开始按钮
重新加载按钮
画板(显示的小方格)
标题提示文字
#set_num 是选择难度
#start 是开始游戏
#refresh 是重新加载
#content 画板
.tile默认样式
.showed 已点击样式
.boom 雷的样式
.tile current 鼠标移入样式
.tile tag 右键小红旗样式
#title 友情提示
2. CSS
布局
按钮样式
提示文字样式
格子默认样式
已点击样式
鼠标移入样式
雷的样式
小红旗样式
- 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.columnsettings.row)){
alert(“全是雷”);
return;
}
// 到这里说明数据没啥问题
// 获取画板的DOM对象
var obj = $(settings.obj)[0];
// 设置画板的宽高
// 每个盒子宽高是49,边框都是1,所以实际宽高为 51
// 画板的宽度 = 列数 * 51
obj.style.width = 51settings.column +“px”;
obj.style.height = 51settings.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 事件