如何用javascript创建扫雷板？

我使用div元素来创建扫雷板（8x8或其他）。我使用2 for循环来创建div板

window.onload = function () {
    var container = document.getElementById('container');
    for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
            var elem = document.createElement('div');
            container.appendChild(elem);
            elem.className = 'myclass';
        }
        var breaker = document.createElement('div');
        container.appendChild(breaker);
        breaker.className = 'clear';
    }
}

window.onload=函数（）{
var container=document.getElementById（'container'）；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
var elem=document.createElement（'div'）；
子容器（elem）；
elem.className='myclass'；
}
var breaker=document.createElement（'div'）；
容器。子容器（断路器）；
breaker.className='clear'；
}
}

所有内容都显示得很好，但我不知道如何跟踪每个磁贴（div）的位置，比如（x，y）坐标系，所以稍后我可以根据这些坐标来执行游戏逻辑。

---

那么如何映射这个网格系统呢？

在创建元素时，为每个元素指定一个唯一的名称。例如

elem.id='row'+i+'col'+j

然后您可以稍后使用
document.getElementById（…）
我对一个项目做了类似的操作，我使用数据属性来保存“坐标”，并在需要坐标时引用数据属性。这是我的功能

基于maxRow和maxColumn创建div

function createDivs(maxRow) {

var wrapperDiv = document.getElementById("mazeWrapper");
var rowDiv;
  for (var i=0; i < maxRow; i++) {
      var thisDiv = document.createElement("div");
  thisDiv.id = "mazeRow-" + i;
  thisDiv.className = "row";
    wrapperDiv.appendChild(thisDiv);
    for (var j=0; j < maxColumn; j++) {
      rowDiv = document.getElementById("mazeRow-" + i);
          var thisColumnDiv = document.createElement("div");
            thisColumnDiv.id = (i*maxRow)+j;               
            thisColumnDiv.className = "mazehole";
            rowDiv.appendChild(thisColumnDiv);
            //Adding in a html data-set to hold X,Y values for coordinate system
            var elemID = (thisColumnDiv.id).toString();
            var elem = document.getElementById(elemID);
            var att = document.createAttribute("data-coords");
            att.value = j+","+i;
            elem.setAttributeNode(att);
    }
  }  
}

函数createDivs（maxRow）{
var wrapperDiv=document.getElementById（“mazeWrapper”）；
var-rowDiv；
对于（变量i=0；i
您可以使用
元素.setAttribute
向元素添加自定义属性：


window.onload=function（）{
var container=document.getElementById（'container'）；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
var elem=document.createElement（'div'）；
子容器（elem）；
elem.className='myclass'；
元素setAttribute（'data-row'，i）；
元素setAttribute（'data-col'，j）；
}
var breaker=document.createElement（'div'）；
容器。子容器（断路器）；
breaker.className='clear'；
}
}
.myclass{
宽度：20px；
高度：20px；
显示：块；
浮动：左；
边框：1px纯红；
}
.清楚{
清除：左；
}
Yo可以将每个
元素（x和y坐标）的位置存储为“数据”属性

例如：

elem.setAttribute('data-x', i);
elem.setAttribute('data-y', j);

var x = elem.getAttribute('data-x');
var y = elem.getAttribute('data-y');

您可以稍后使用getAttribute（）读取数据属性的值

例如：

elem.setAttribute('data-x', i);
elem.setAttribute('data-y', j);

var x = elem.getAttribute('data-x');
var y = elem.getAttribute('data-y');

或者更简单地说：

var x = elem.dataset.x;
var y = elem.dataset.y;

有关更多详细信息，请参见MDN。
您可以使用它的坐标（x:y）作为每个块的id。

您也可以使用单个循环来编写它


功能块单击（事件）{
const selected=document.querySelector（“#board.block.selected”）；
如果（已选择！=null）{
selected.classList.remove（'selected'）；
}
document.querySelector（'#coords'）.innerHTML=this.id；
this.classList.add（'selected'）；
}
函数createBoard（列、行、块大小）{
这个._boardDom=document.getElementById（'board'）；
const noBlocks=cols*行；
for（设i=0；i

#板{
背景色：#eee；
显示器：flex；
柔性流：行换行；
}
#董事会，董事会{
边框：纯灰1px；
}
#board.block.selected{
边框：纯灰1px；
背景色：红色；
}

单击图元以查看其坐标
我最近很喜欢创建这个，所以我想与大家分享。我使用SVG是因为它们灵活且易于生成

这些是基板回路：


//MakeBaseBoard.js
//命名导出-genGuiBoard
var genGuiBaseBoard=函数（lastRow、lastCol、gameBoardWidth、gameBoardHeight）{
//创建基本元素和属性
var boardTiles=document.getElementById（“board”）；
var tile=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
var squareElem=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
var textElem=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
//使用定义平方，并将循环值设置为0
var宽度=20；
高度=宽度；
var行=0；
var-col=0；
var xcord=0；
var-ycord=0；
//文本元素坐标
var textXcord=6；
var textYcord=15；
//董事会
setAttribute（“width”，`${gameBoardWidth}`）；
setAttribute（“height”，`${gameBoardHeight}`）；
tile.setAttribute（“id”、“游戏板”）；
boardTiles.appendChild（瓷砖）；
//划船
对于（行=0；行<最后一行；行++）{
//上校
for（col=0；col