所以，由于我之前的许多问题都与扫雷机率有关，因此，与扫雷机游戏相比，还有什么要做的更好？
该扫雷游戏虽然没有任何概率计算或其他炫酷的东西，但必须等到2.0版：）也不是多人游戏变种扫雷标志。只是普通的扫雷。我决定采用“中级”设置，即16 x 16和40个地雷。
自从我进行任何真正的JS编码以来已经有一段时间了，但是我不认为自己是初学者。
顺便说一句，第一次单击时如果它显示“ Kaboom”，请不要担心。这是一个错误功能，而不是功能错误。
带有JS + HTML的堆栈片段：（可以在github上找到经过稍微修改的版本）
var elements = [];
var fields = [];
var allFields = [];
function showField(thisButton) {
var thisX = Number(thisButton.attr('data-x'));
var thisY = Number(thisButton.attr('data-y'));
var button = fields[thisY][thisX];
var number = Number(button.attr('data-value'));
thisButton.attr('data-visible', true);
if (button.attr('data-mine') === 'true') {
button.text('X');
alert('KABOOM!');
allFields.forEach(function(entry) {
entry.attr('disabled', true);
});
}
else if (number === 0) {
button.text(number);
for (var xx = thisX - 1; xx <= thisX + 1; xx++) {
for (var yy = thisY - 1; yy <= thisY + 1; yy++) {
if (fields[yy] !== undefined && fields[yy][xx] !== undefined) {
var innerButton = fields[yy][xx];
if (innerButton.attr('data-visible') === 'false') {
showField(innerButton);
}
}
}
}
}
else {
button.text(number);
}
}
var table = $('#board').find('tbody');
for (var y = 0; y < 16; y++) {
var tr = $('<tr>');
var row = [];
for (var x = 0; x < 16; x++) {
var td = $('<td>');
var button = $('<button>').text('_').attr('data-value', 0)
.attr('data-x', x).attr('data-y', y).attr('data-visible', false)
.attr('data-mine', false)
.on('click', function() {
showField($(this));
});
td.append(button);
tr.append(td);
row.push(button);
elements.push(button);
allFields.push(button);
}
fields.push(row);
table.append(tr);
}
// Generate mines
for (var mines = 0; mines < 40; mines++) {
var random = Math.floor(Math.random() * elements.length);
var field = elements[random];
var thisX = Number(field.attr('data-x'));
var thisY = Number(field.attr('data-y'));
field.attr('data-mine', true);
for (var xx = thisX - 1; xx <= thisX + 1; xx++) {
for (var yy = thisY - 1; yy <= thisY + 1; yy++) {
if (fields[yy] !== undefined && fields[yy][xx] !== undefined) {
var innerButton = fields[yy][xx];
var previous = Number(innerButton.attr('data-value'));
innerButton.attr('data-value', previous + 1);
}
}
}
elements.splice(random, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="board"><tbody></tbody></table>
主要关注点：
使用
data-*属性存储数据是一个好主意吗？ 我可以很好地使用JQuery的功能吗？
欢迎任何其他评论！别害怕伤害我的感情，反正我更像是一个Java家伙...
#1 楼
thisButton.attr('data-x')
您可以使用jQuery的
.data()。它使用内部缓存来存储键/值对，但是如果在其中找不到键/值对，它将查找关联元素的data-*属性。这意味着您可以执行thisButton.data('x')。请注意，破折号空间变成了驼峰式大写字母。如果您使用jQuery的
.data()，它将自动为您转换类型。 。如果找到“ 2”，则将其转换为数字。 此外，您还可以使用一元
+将字符串转换为数字。接近parseFloat()。 Number(thisButton.attr('data-x'))
使用data- *属性存储数据是一个好主意吗？
/>
对于普通观众来说，也许。对于高级用户，您可能想要做其他事情（除非他们只是无聊并且想玩：P）
使用jQuery
.data()。数据存储在内部缓存中，而不是作为data-*属性写入。但是，如果您引用了该元素并对其调用.data()，它可能会显示该值。同样，afaik也可以通过jQuery._cache访问缓存。使用内部映射，并且使按钮仅带有索引/坐标。您可以在闭包内部创建2x2数组，只有您的代码才能访问该数组。点击后，您可以自由地宣布坐标。
此外，任何坚定的开发人员/开发人员都可以使用开发工具进行浏览，因此，您能做的最好的就是使其变得更难选择。
我是否很好地使用了JQuery的功能？
它没什么问题：D
评论
我不能举报地雷吗？@Malachi不，你不能举报地雷。但是，如果您找到了实现它的好方法，那将是一件很不错的事情；）