如何使用Javascript动态创建ludo板

我正在做一个棋盘游戏ludo。我有四名球员。ludo的董事会看起来像

我已经设法使用Javascript动态创建了它的某些部分

constqs=str=>document.querySelector（str）；
const qsa=str=>document.querySelectorAll（str）；
const ce=（str，props）=>{
设elm=document.createElement（str）；
如果（道具）{
for（让k进入道具）{
榆树[k]=道具[k]
}
}
返回榆树；
}
设main=qs（“#main”）；
函数createDiv（类型、颜色）{
设div=ce（'div'）；
div.style.backgroundColor=颜色；
div.style.display=类型；
}
让游戏=数组（52）。填充（0）；
函数createPlayer（颜色、角度）{
设div=ce（'div'，{className:'player cont'}）
设table=ce（“table”）；
div.style.transform=`旋转（${angle}度）`
函数createRow（len，colorsSet）{
const tr=ce（'tr'，{className:'tile-row'}）；
[…数组（len）].forEach（（x，i）=>{
设elm=ce（'td'，{className:'tile'}）；
如果（颜色集有（i））{
elm.style.backgroundColor=颜色；
}
tr.appendChild（榆树）
}) 
返回tr；
}
函数createBase（）{
const base=ce（'table'，{className:'base'}）；
[…数组（2）].forEach（x=>{
设row=ce（'tr'，{className:'base row'}）；
[…数组（2）].forEach（a=>{
设td=ce（'td'，{className:'base tile'}）
世界其他地区（td）；
})
base.appendChild（行）
})
返回基地；
}
设颜色集=[
新集合（），
新集合（[0,1,2,3,4]），
新设置（[4]）
]
colorSets.forEach（x=>{
表.appendChild（createRow（6，x））
})
子类（表）；
div.appendChild（createBase（））；
返回div；
}
让颜色=[‘红色’、‘蓝色’、‘绿色’、‘粉色’]；
颜色。forEach（（x，i）=>{
main.appendChild（createPlayer（x，（i*90）-180））；
})

.tile{
高度：50px；
宽度：50px；
背景：橙色；
边框：1px纯黑；
显示：内联块；
}
表2.1-1-1-1-1{
高度：50px；
背景：橙色；
宽度：50px；
边界半径：100px；
}
.player cont{
背景：aliceblue；
宽度：适合的内容；
}