主页 / user-2227024

RomainP's questions

Martin Hope
RomainP
Asked: 2024-10-09 22:42:46 +0800 CST
  • 6

我正在尝试创建一个“填字游戏”，其中只有两个单词相互交叉。我希望方格之间相隔 1px，但填字游戏本身周围有 5 或 10px 的粗边框。以下是我想用 Excel 制作的快速演示：

在此处输入图片描述

为了制作网格，我创建了一个由 6x5 个块组成的矩形，其中一些是不可见的，而一些是可见的：

let word_vertical = "GHIEJ";
let junction_vertical = 4;
let word_horizontal = "ABCDEF";
let junction_horizontal = 5;

let number_of_letters_vertical = word_vertical.length;
let number_of_letters_horizontal = word_horizontal.length;
let letter_junction = word_vertical[junction_vertical - 1];

let board = document.getElementById("board");

for (let i = 0; i < number_of_letters_vertical; i++) {
    let row = document.createElement("div");
    row.className = "letter-row";

    for (let j = 0; j < number_of_letters_horizontal; j++) {
        let box = document.createElement("div");
        if (i === junction_vertical - 1 || j === junction_horizontal - 1){
            box.className = "letter-box";
            if (j === junction_horizontal - 1) {
                box.innerText = word_vertical[i];
            } else if (i === junction_vertical - 1){
                box.innerText = word_horizontal[j];
            }
        } else {
            box.className = "empty-box";
        }

        row.appendChild(box)
    }

    board.appendChild(row)
}

CSS 如下：

.letter-row {
    display: flex;
}

.letter-box {
    color: black;
    border: 1px solid black;
    background-color: white;
    font-size: 3.5rem;
    font-weight: 800;
    height: 5rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.empty-box {
    border: 1px solid transparent;
    height: 5rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

最后是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body class="game-page">
    <div id="game-board">
        <div id="board"></div>
    </div>
<script src="index.js" type="module"></script>
</body>
</html>

结果是这样的：

在此处输入图片描述

如您所见，周围的边框非常细（1px），两个单元格之间的边框为 2px（每个单元格贡献 1px）。我尝试了一些方法，包括将定向边框应用于空框，但这很快就会变得复杂。有什么想法吗？谢谢 :)

javascript