所以我正在構建這個應用程式，它是游戲“Mancala”的實作。在棋盤的某個位置可以有“種子”（游戲的部分），我選擇將其表示為影像。
在游戲的初始設定中，棋盤的每個位置都有 N 個種子。我將其表示為在相應位置隨機列印的 N 個相等影像（“seed.png”）。
我希望影像重疊，所以即使 N 是一個很大的數字，它們也會適合這個位置（“參見影像 nro1”）。到目前為止，我完成的是一個幾乎沒有重疊的隨機分布，并且一些“種子”正在脫離圓圈。
這是我的代碼，用 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");
}
}
使用以下格式：
#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;
}
Image Nro1 N=20: https://imgur.com/a/7aNVsUb, Image Nro2 where N=30 and the seeds change the size of the circle: https://imgur.com/a/2iHXwyd
Thank you in advance!
uj5u.com熱心網友回復：
要將寬度和高度正確應用于td標簽，您需要將其設為inline-block元素。
td:not([rowspan="2"]) {
display: inline-block;
}
您的筆已更新（種子數 = 30）：CodePen
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/351233.html
標籤：javascript html css