如何在JS中混淆对象

Question

目前正致力于滑动式游戏，主要是我的shuffle功能遇到了麻烦。我正在尝试调整Fisher-Yates shuffle，但我只熟悉使用数组的某些功能。我认为将它适应阵列外的对象很容易，但不相信我做得对。还希望能够在点击重置按钮时将所有对象重置为原始位置。

function scrambleBoard() {
  for (var i = 0; i < document.getElementById("b33") - 1; i++) {
    var x = i + Math.floor(Math.random() * (document.getElementById("b33") - i));
    var temp = x;
    x = i;
    i = temp;
  }
  return x;
}

for (var r = 0; r < 4; r++) {
  for (var c = 0; c < 4; c++) {
    var bid = "b" + r + c;
    var val = 4 * r + c + 1;
    if (bid === "b33")
      val = ' ';
    var s = '<input type = "button" id = "' + bid + '" value = "' + val + '" onclick = "makeMove(this.id);" />' + '\n';
    document.write(s);
  }
}

#b00 {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 57px;
  height: 57px;
}
#b01 {
  position: absolute;
  top: 100px;
  left: 70px;
  width: 57px;
  height: 57px;
}
#b02 {
  position: absolute;
  top: 100px;
  left: 130px;
  width: 57px;
  height: 57px;
}
#b03 {
  position: absolute;
  top: 100px;
  left: 190px;
  width: 57px;
  height: 57px;
}
#b10 {
  position: absolute;
  top: 160px;
  left: 10px;
  width: 57px;
  height: 57px;
}
#b11 {
  position: absolute;
  top: 160px;
  left: 70px;
  width: 57px;
  height: 57px;
}
#b12 {
  position: absolute;
  top: 160px;
  left: 130px;
  width: 57px;
  height: 57px;
}
#b13 {
  position: absolute;
  top: 160px;
  left: 190px;
  width: 57px;
  height: 57px;
}
#b20 {
  position: absolute;
  top: 220px;
  left: 10px;
  width: 57px;
  height: 57px;
}
#b21 {
  position: absolute;
  top: 220px;
  left: 70px;
  width: 57px;
  height: 57px;
}
#b22 {
  position: absolute;
  top: 220px;
  left: 130px;
  width: 57px;
  height: 57px;
}
#b23 {
  position: absolute;
  top: 220px;
  left: 190px;
  width: 57px;
  height: 57px;
}
#b30 {
  position: absolute;
  top: 280px;
  left: 10px;
  width: 57px;
  height: 57px;
}
#b31 {
  position: absolute;
  top: 280px;
  left: 70px;
  width: 57px;
  height: 57px;
}
#b32 {
  position: absolute;
  top: 280px;
  left: 130px;
  width: 57px;
  height: 57px;
}
#b33 {
  position: absolute;
  top: 280px;
  left: 190px;
  width: 57px;
  height: 57px;
}
#btnReset {
  font-size: 12pt;
  position: absolute;
  top: 390px;
  left: 120px;
}
#btnScramble {
  font-size: 12pt;
  position: absolute;
  top: 390px;
  left: 10px;
}

<h1> Slider Game </h1>
<input type="button" id="btnScramble" value="Scramble" onclick="scrambleBoard();" />
<input type="button" id="btnReset" value="Reset Board" onclick="resetBoard();" />