/**
扫雷区域 x * y，雷数 mines
sizeX = 9;
sizeY = 9;
mines = 10;
*/
// 定义扫雷区域和雷数
conf = {
'sizeX': 10,
'sizeY': 10,
'mines': 20
};
// 剩余地雷数（未标记的地雷数）
minesLeft = conf.mines;
// 剩余待翻开砖块数
bricksLeft = conf.sizeX * conf.sizeY - conf.mines;
// 游戏是否结束（胜利/失败）
var flag = 0;
/** 随机生成地雷数组函数
生成二维数组地雷数据，格式为 res[x][y] = value ，x、y 代表位置，value 含义如下：
value: 10-18 代表周围的地雷数为 0-8（未翻开），
0-8 代表周围地雷数为 0-8（已翻开）
20-28 代表周围的地雷数为 0-8（已标记），
19 代表此处有地雷（未翻开）
9 代表此处有地雷（已翻开）
29 代表此处有地雷（已标记）
备注：为了省事，就用了一个变量的不同取值表示所有情况
*/
function generateMinesData(sizeX, sizeY, mines) {
var size = sizeX * sizeY;
var numList = [];
var minesList = [];
var res = [];
// 准备一个 0 到 sizeX * sizeY - 1 的自然数列表（即所有砖块的顺序编号）
for (var k = 0; k < size; k++) {
numList.push(k);
}
// 从 numList 自然数列表中抽地雷
for (var m = 0; m < mines; m++) {
// 从 numList 中随机抽取一个元素，通过 splice 将其删除，并存入 minesList
minesList.push(numList.splice(Math.floor(Math.random() * numList.length), 1)[0]);
}
// 生成二维数组地雷数据，格式为 res[x][y] = value 先全部置 10
for (var i = 0; i < sizeX; i++) {
res[i] = [];
for (var j = 0; j < sizeY; j++) {
res[i].push(10);
}
}
// 遍历地雷列表，更新二维数组地雷数据，标记地雷 + 更新地雷周围的数字（砖块的附近地雷数）
for (var n = 0; n < minesList.length; n++) {
// 地雷顺序号换算 x,y 坐标
x = Math.floor(minesList[n] / sizeX);
y = minesList[n] % sizeY;
// 标记地雷
res[x][y] = 19;
// 雷周围砖块数字加 1
typeof(res[x][y + 1]) != 'undefined' && (res[x][y + 1] != 19) && (res[x][y + 1] += 1);
typeof(res[x][y - 1]) != 'undefined' && (res[x][y - 1] != 19) && (res[x][y - 1] += 1);
if (typeof(res[x + 1]) != 'undefined') {
typeof(res[x + 1][y]) != 'undefined' && (res[x + 1][y] != 19) && (res[x + 1][y] += 1);
typeof(res[x + 1][y + 1]) != 'undefined' && (res[x + 1][y + 1] != 19) && (res[x + 1][y + 1] += 1);
typeof(res[x + 1][y - 1]) != 'undefined' && (res[x + 1][y - 1] != 19) && (res[x + 1][y - 1] += 1);
}
if (typeof(res[x - 1]) != 'undefined') {
typeof(res[x - 1][y]) != 'undefined' && (res[x - 1][y] != 19) && (res[x - 1][y] += 1);
typeof(res[x - 1][y + 1]) != 'undefined' && (res[x - 1][y + 1] != 19) && (res[x - 1][y + 1] += 1);
typeof(res[x - 1][y - 1]) != 'undefined' && (res[x - 1][y - 1] != 19) && (res[x - 1][y - 1] += 1);
}
/** 最开始通过 sizeX 和 sizeY 判断，后来换掉了……
y - 1 >= 0 && (res[x][y - 1] != 19) && (res[x][y - 1] += 1);
y + 1 < sizeY - 1 && (res[x][y + 1] != 19) && (res[x][y + 1] += 1);
x - 1 >= 0 && (res[x - 1][y] != 19) && (res[x - 1][y] += 1);
x + 1 < sizeX - 1 && (res[x + 1][y] != 19) && (res[x + 1][y] += 1);
x - 1 >= 0 && y - 1 >= 0 && (res[x - 1][y - 1] != 19) && (res[x - 1][y - 1] += 1);
x + 1 < sizeX - 1 && y + 1 <= sizeY && (res[x + 1][y + 1] != 19) && (res[x + 1][y + 1] += 1);
x - 1 >= 0 && y + 1 <= sizeY && (res[x - 1][y + 1] != 19) && (res[x - 1][y + 1] += 1);
x + 1 < sizeX - 1 && y - 1 >= 0 && (res[x + 1][y - 1] != 19) && (res[x + 1][y - 1] += 1);
*/
}
return res;
}
// 地雷数组转换为 heatmap 数据：[[value,value,value,value,...],...] => [[x,y,value],...]
function covertData(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
// 调换一下 x、y，这样横着看是 (0,0),(0,1),(0,2),个人感觉比较舒服……
res.push([j, i, arr[i][j]]);
}
}
return res;
}
// 使用 conf 配置生成地雷数据
var minesData = generateMinesData(conf.sizeX, conf.sizeY, conf.mines);
// 使用地雷数据生成 heatmap数据
var heatmapData = covertData(minesData);
// option设置，通过回调函数自定义标签文字（P 代表标记，* 代表地雷，数字代表周围地雷数）和砖块颜色（浅色代表翻开）
function getOption(data) {
option = {
title: {
text: '扫雷游戏',
subtext: '剩余雷数：' + minesLeft
},
tooltip: {
show: false
},
grid: {
width: '80%',
height: '80%',
left: '10px',
top: '15%'
},
xAxis: {
show: false,
type: 'category',
splitArea: {
show: true
}
},
yAxis: {
show: false,
type: 'category',
splitArea: {
show: true
}
},
series: [{
id: 'btnPanel',
type: 'heatmap',
label: {
normal: {
show: true,
color: '#000',
// 回调函数自定义标签文字
formatter: function(params) {
if (params.data[2] >= 20) {
return 'P';
} else if (params.data[2] >= 10 || params.data[2] === 0) {
return '';
} else if (params.data[2] === 9) {
return '*';
} else {
return params.data[2];
}
}
}
},
itemStyle: {
// 回调函数自定义砖块颜色
color: function(params) {
if (params.data[2] >= 10) {
return '#ddd';
}
return '#fff';
},
borderColor: '#AAA',
borderWidth: 2
},
data: data
}]
};
return option;
}
// 渲染图表
myChart.setOption(getOption(heatmapData));
// 点击热力图时调用 btnClick 函数 (翻开砖块)
myChart.on('click', function(params) {
if (params.seriesId === 'btnPanel' && flag === 0) {
// 因为调换了 x、y，这里也要把 params.data[1] 放在前面
btnClick(params.data[1], params.data[0]);
}
});
// 按钮点击响应函数
function btnClick(btnX, btnY) {
// 点中已标记的砖块，不做操作，退出
if (minesData[btnX][btnY] > 19) {
return;
}
// 如果点中地雷（19），则游戏结束（失败）
if (minesData[btnX][btnY] === 19) {
flag = 1;
minesData[btnX][btnY] -= 10;
// 更新地图数据，修改自定义标签规则，把所有地雷显示出来
return myChart.setOption({
title: {
subtext: '游戏结束…'
},
series: {
label: {
formatter: function(params) {
if (params.data[2] >= 20) {
return 'P';
} else if (params.data[2] === 9 || params.data[2] === 19) {
return '*';
} else if (params.data[2] >= 10 || params.data[2] === 0) {
return '';
} else {
return params.data[2];
}
}
},
data: covertData(minesData)
}
});
// 翻到附近有地雷的砖块，更新 value 值，更新剩余待翻开砖块数，显示数字（更新 heatmap 数据）
} else if (minesData[btnX][btnY] > 10) {
minesData[btnX][btnY] -= 10;
bricksLeft--;
// 三元表达式，如果剩余带翻开砖块为 0 则提示胜利，否则正常更新 heatmap 数据
bricksLeft === 0 ?
myChart.setOption({
title:{
subtext:'胜利'
},
series: {
data: covertData(minesData)
}
}) :
myChart.setOption({
series: {
data: covertData(minesData)
}
});
// 翻到附近没有地雷的砖块，自动翻开周围的砖块（更新其 value 值），然后更新
} else if (minesData[btnX][btnY] === 10) {
// 调用自动翻开周围砖块的函数
autoClick(btnX, btnY);
// 三元表达式，如果剩余带翻开砖块为 0 则提示胜利，否则正常更新 heatmap 数据
bricksLeft === 0 ?
myChart.setOption({
title:{
subtext:'胜利'
},
series: {
data: covertData(minesData)
}
}) :
myChart.setOption({
series: {
data: covertData(minesData)
}
});
}
}
// 对 minesData[x][y] 周围的砖块进行递归验证、翻开
function autoClick(x, y) {
// 定义子函数,翻开某些砖块，并判断该砖块是否需要递归处理，返回 true/false
function check(x1, y1) {
// 如果 minesData[x1] 未定义（目标砖块不存在）则退出
if (typeof(minesData[x1]) == 'undefined') {
return false;
}
// 如砖块未翻开并且未标记，则翻开判断周围有没有地雷，没有雷返回 true
if (minesData[x1][y1] > 10 && minesData[x1][y1] < 20) {
minesData[x1][y1] -= 10;
bricksLeft--;
return false;
}
if (minesData[x1][y1] === 10) {
return true;
}
}
// 翻开当前砖块
minesData[x][y] -= 10;
bricksLeft--;
// 判断周围砖块，根据情况递归
check(x, y + 1) && autoClick(x, y + 1);
check(x, y - 1) && autoClick(x, y - 1);
check(x + 1, y) && autoClick(x + 1, y);
check(x - 1, y) && autoClick(x - 1, y);
check(x + 1, y + 1) && autoClick(x + 1, y + 1);
check(x + 1, y - 1) && autoClick(x + 1, y - 1);
check(x - 1, y + 1) && autoClick(x - 1, y + 1);
check(x - 1, y - 1) && autoClick(x - 1, y - 1);
}
// 去除默认的鼠标事件
document.oncontextmenu = function() {
return false;
};
// 新加上鼠标右击事件(标记地雷 / 取消标记)
myChart.on('contextmenu', function(params) {
if (params.seriesId === 'btnPanel' && flag === 0) {
// 如果 value 大于 19 ，将已标记的砖块取消标记
if (minesData[params.data[1]][params.data[0]] > 19) {
minesData[params.data[1]][params.data[0]] -= 10;
minesLeft++;
// 或者如果 value 大于等于 10 ，标记砖块
} else if (minesData[params.data[1]][params.data[0]] >= 10) {
minesData[params.data[1]][params.data[0]] += 10;
minesLeft--;
}
// 更新 heatmap 数据
myChart.setOption({
title:{
subtext: '剩余雷数：' + minesLeft
},
series: {
data: covertData(minesData)
}
});
}
console.log(params);
});