javascript - 如何在不使用html的情况下将板中的列按圆圈排序并将每一行拆分为自己的元素(How to sort board columns in a circle without using html and splitting each row to its own element)

Question

I want to create a board where the player can go around the board without writing every tile in html.

(我想创建一个棋盘，玩家可以在棋盘周围转而无需在html中编写每个图块。)

Can find anything on google about it.

(可以在Google上找到任何有关它的信息。)

Is there any algorithm to sort them correctly.

(是否有任何算法可以对它们进行正确排序。)

I want it to start at the top and go down right then down and around.

(我希望它从顶部开始，然后向下然后向下或向下滚动。)

You can see what i have here.

(你可以看到我在这里的东西。)

https://codepen.io/christian-kolst-schr-dahl/pen/gOOVXrY

(https://codepen.io/christian-kolst-schr-dahl/pen/gOOVXrY)

//Dice
window.rollDice = ()=>{
 const max = 6;
 const roll = Math.ceil(Math.random() * max);
  currentPlayer.position += roll;
  console.log(currentPlayer)
  renderBoard();
}

//players
const players = [{
  name:"Cloud",
  position: 0,
  color: "gold"
},{
  name:"Sephiroth",
  position: 0,
  color: "white"
}];
let currentPlayerTurn = 0;
var currentPlayer = players[currentPlayerTurn];
//board columns
const width = 6;
const height = 4;
let board = [];
let position = 0;
    for(let y = 0; y < height; y++){
  let row = [];
  board.push(row)
  for(let x = 0; x < width; x++){
    row.push({x,y,position})
       position++ 
  }
}
const boardSize = 50;

//render board function
const renderBoard = ()=>{
  //creating Board
  let boardHTML = ``;
  board.forEach(row=>{
    row.forEach(square=>{
      boardHTML += `<div class=square data-position="${square.position}" style=""></div>`
    });
  });


var map = document.getElementById("map").innerHTML = "<div id='center'></div>" + boardHTML;

  var newPlayer = document.createElement("div");
  newPlayer.classList.add("player")
  var square = document.querySelectorAll(".square");
  for(let i = 0; i < square.length; i++){
     if(square[i].dataset.position == currentPlayer.position){
   square[i].appendChild(newPlayer);    console.log(square[i].dataset.position)
     } 
  }
  console.log("",square)
}

renderBoard();```

  ask by Christian translate from so

Answer 1

等待大神答复