替换类javascript

Question

我创建了一个生成表的脚本，每个框的id都是0到99（因为有100个框） 每个其他框都包含不同的背景。 （每隔一个框包含“case1”类，其他包含“case2”） 我想通过随机生成20个数字（从0到99）来替换包含我刚刚由不同类生成的数字的框（这将是“case3”）

我的代码：

function generateMap() { // Generate the table
  var Y = 10;
  var X = 10;
  var v = -1;
  var table = document.getElementById('gameTable');
  for (var r = 0; r < Y; r++) {
    var row = table.insertRow(-1);
    for (var c = 0; c < X; c++) {
      var cell = row.insertCell(-1);
      cell.setAttribute('id', v + 1);
      cell.setAttribute('class', 'cell ' + ((c + r) % 2 ? 'case1' : 'case2'));
      v++;
    }
  }

}
generateMap();

function insertBarrier() {
  var caseBarrier = new Array(20);
  for (var i = 0; i < caseBarrier.length; i++) {
    caseBarrier[i] = Math.floor(Math.random() * 100);
  }
  console.log(caseBarrier);
}

insertBarrier();

<table id="gameTable" style=" width: 100%; height: 100%; "></table>

generateMap函数有效（它构​​建一个100个方块的数组） 而就目前而言，我的insertBarrier函数只生成一个包含20个随机数的数组，因为我不知道如何替换包含与“case3”类生成的数字对应的id的框

谢谢:(

Answer 1

我建议您在地图生成之前生成障碍，然后在生成地图期间设置相应的类。

要适当地生成障碍，请制作单元格数字的完整数组，将其洗牌（使用例如Fisher-Yates算法），然后将数组切割为所需的长度。

function generateMap() { // Generate the table
  var table = document.getElementById('gameTable');
  var Y = 10;
  var X = 10;
  var v = 0;

  var barriers = Array.from(Array(X * Y).keys())
    .map((e, i, a) => {
      var r = Math.random() * (X * Y - i - 1) + i + 1 | 0;
      [e, a[r]] = [a[r], e];
      return e;
    });
  barriers.length = 20;

  for (var r = 0; r < Y; r++) {
    var row = table.insertRow(-1);
    for (var c = 0; c < X; c++) {
      var cell = row.insertCell(-1);
      cell.id = cell.textContent = v++;
      cell.className = barriers.indexOf(+(c + '' + r)) > -1 ?
        'barrier' : (c + r) % 2 ? 'case1' : 'case2';
    }
  }
}
generateMap();

table {
  border: solid 1px;
  border-collapse: collapse
}

td {
  border: solid 1px;
  width: 15px;
  height: 15px;
  font-size:8px
}

.case1 {
  background: #cef
}

.case2 {
  background: #fec
}

.barrier {
  background: #f42
}

<table id="gameTable"></table>