Así que estoy construyendo esta aplicación que es una implementación del juego "Mancala". En una posición del tablero puede haber "semillas" (pieza del juego) que elegí representar como imágenes.

En la configuración inicial del juego, hay N semillas en cada posición del tablero. Represento esto como N imágenes iguales ("seed.png") impresas al azar en la posición respectiva.

Quiero que las imágenes se superpongan, por lo que incluso cuando N es un número grande, todas encajarán en la posición ("ver imagen nrº1"). Lo que logré hasta ahora es una distribución aleatoria con poca o ninguna superposición y algunas "semillas" están saliendo del círculo.

Este es el código que tengo, construido en JavaScript:

 function init_board() { const board = document.getElementById("board"); for(let i = 0; i < 2; i++) { const tr = board.insertRow(); if(i == 0) { tr.insertCell().setAttribute("rowSpan", "2"); } for(let j = 0; j < 6; j++) { var x = tr.insertCell(); for(let k = 0; k < 20; k++) { var img = document.createElement("img"); img.src = "images/seed.png"; img.height = "10"; img.width = "10"; img.style.position = "relative"; img.style.left = Math.floor(Math.random() * 7) + "px"; img.style.top = -7 + Math.floor(Math.random() * 14) + "px"; x.appendChild(img); } } if(i == 0) { tr.insertCell().setAttribute("rowSpan", "2"); } }

Con el siguiente formato:

 #board { margin-left: auto; margin-right: auto; position: relative; top: 30%; } td { width: 75px; height: 75px; border: 3px solid darkred; border-radius: 40px; background: antiquewhite; } table { border: 5px solid darkred; border-radius: 20px; background: burlywood; }

Imagen Nrº1 N=20: https://imgur.com/a/7aNVsUb , Imagen Nrº2 donde N=30 y las semillas cambian el tamaño del círculo: https://imgur.com/a/2iHXwyd

¡Gracias de antemano!