如何使用Javascript

Question

我正在做一个棋盘游戏。我有四个玩家。 Ludo的面板看起来像

我设法使用Javascript动态创建了其中的一部分。

const qs = str => document.querySelector(str);
const qsa = str => document.querySelectorAll(str);
const ce = (str, props) => {
    let elm = document.createElement(str);
    if(props){
        for(let k in props){
            elm[k] = props[k]
        }
    }
    return elm;
}

let main = qs('#main');


function createDiv(type, color){
    let div = ce('div');
    div.style.backgroundColor = color;
    div.style.display = type;
}

let game = Array(52).fill(0);

function createPlayer(color,angle){
    let div = ce('div', {className: 'player-cont'})
    let table = ce('table');
    div.style.transform = `rotate(${angle}deg)`
    
    function createRow(len,colorsSet){
        const tr = ce('tr',{className:'tile-row'});
        [...Array(len)].forEach((x,i) =>{
            let elm = ce('td', {className:'tile'});
            if(colorsSet.has(i)){
                elm.style.backgroundColor = color;
            }
            tr.appendChild(elm)
        }) 
        return tr;
    }
    function createBase(){
        const base = ce('table', {className: 'base'});    
        [...Array(2)].forEach(x => {
            let row = ce('tr', {className: 'base-row'});
            [...Array(2)].forEach(a => {
                let td = ce('td', {className: 'base-tile'})
                row.appendChild(td);
            })
            base.appendChild(row)
        })
        return base;
    }
    



    
    let colorSets = [
        new Set(),
        new Set([0,1,2,3,4]),
        new Set([4])
    ]
    
    colorSets.forEach(x => {
        table.appendChild(createRow(6, x))
    })
    
    div.appendChild(table);
    div.appendChild(createBase());
    return div;
}
let colors = ['red','blue','green','pink'];

colors.forEach((x, i) => {
    main.appendChild(createPlayer(x, (i * 90) - 180));
})

.tile {
    height: 50px;
    width: 50px;
    background: orange;
    border: 1px solid black;
    display: inline-block;
}
table.base td {
    height: 50px;
    background: orange;
    width: 50px;
    border-radius: 100px;
}
.player-cont {
    background: aliceblue;
    width: fit-content;
}

<div id = "main"></div>

但是现在我不确定如何完成此工作。您可以忽略上图中的两件事：

• 不同颜色的大方块的大边框。我只需要一种颜色即可。
• 您可以忽略中心的彩色三角形。我只需要一个颜色框即可。