Início / user-2227024

RomainP's questions

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

Estou tentando criar uma "palavra cruzada" onde apenas duas palavras se cruzam. Gostaria que os quadrados fossem separados entre si por 1px, mas uma borda grossa de 5 ou 10px ao redor da palavra cruzada em si. Aqui está uma demonstração rápida do que eu gostaria de fazer, feita com o Excel:

insira a descrição da imagem aqui

Para fazer a grade, estou criando um retângulo de blocos de 6x5, alguns deles invisíveis e outros visíveis:

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)
}

E aqui está o 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;
}

Finalmente o 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>

Isso fica parecido com isto:

insira a descrição da imagem aqui

Como você pode ver, as bordas ao redor são muito finas (1px) e as bordas entre duas células são 2px (1px para cada célula contribuindo). Eu tentei algumas coisas, incluindo aplicar bordas direcionais às caixas vazias, mas isso fica complexo muito rápido. Alguma ideia? Obrigado :)

javascript