Tablero de Ajedrez Browser

Actualizado el 10 de mayo de 2025

35 min de lectura
ESCRITO POR
Harry A. Jiménez A.

hadevelopux 614 Pts

Educación online efectiva

Aprende con expertos de la industria

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Una creación super básica de un Tablero de Ajedrez formato browser, lo más documentado posible y sencillo de entender:

/* Configuracion Global */
body {
    height: 100vh;
    min-height: 870px;
    font-family: sans-serif;
    color: #c4c8ce;
    background-color: #1e2229;
    margin: 0;
}
body,
header,
footer,
section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}
header,
footer {
    flex-direction: row;
}
header div,
footer div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;

}
section {
    display: flex;
    align-content: center;
}

Creamos una pequeña utilidad para reusar en varios sectores:

/* Utilidades */
.bg-black {
    background-color: #0ae98a;
}
.bg-white {
    background-color: #ffffff;
}

Nombre del jugador y puntaje Header y Footer de la interfaz gráfica:

/* Textos de la interfaz */
.player h1,
.score h2 {
    color: #ffffff;
    margin-top: 0;
}
.player p,
.score p {
    margin: 0;
}
.player p span,
.score p span {
    font-weight: 600;
    color: #1e2229;
    padding: 0.1rem 0.2rem;
    margin: 0 5px;
}
.piece{
    font-size: 40px;
}
.piece.black{
    color: #0ae98a;
}
.piece.white{
    color: #c4c8ce;
}


/* Puntaje de la interfaz */
.score ul {
    display: flex;
    justify-content: end;
    margin: 0;
    padding: 0;
    list-style: none;
}
.score li {
    display: inline-block;
    width: 20px;
    margin: 0 1rem;
}
.score li:first-child {
    margin-left: 0;
}
.score li:last-child {
    margin-right: 0;
}
.score .piece{
    font-size: 20px;
}

Creación del tablero, coloración, grillas y posicionamiento en capas, lo más documentado posible y sencillo de entender:

/* Tablero en la interfaz */
.board-wrapper {
    width: 602px;
    border: 2px solid #000000;
    position: relative;
}
.board {
    width: 100%;
    height: 100%;
    position: relative;
}
.board-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
.board-row div,
.board-row div a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.board-row div a{
    width: 100%;
    text-decoration: none;
}
.board-row div a:hover::after{
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid #ffffff;
    position: absolute;
}
.board-row:nth-child(1n) div:nth-child(1n) {
    background-color: #1e2229;
}
.board-row:nth-child(1n) div:nth-child(2n) {
    background-color: #000000;
}
.board-row:nth-child(2n) div:nth-child(1n) {
    background-color: #000000;
}
.board-row:nth-child(2n) div:nth-child(2n) {
    background-color: #1e2229;
}
.board-row:first-child div:nth-child(1n),
.board-row:nth-child(1n) div:first-child,
.board-row:last-child div:nth-child(1n),
.board-row:nth-child(1n) div:last-child {
    width: 100%;
    height: 58px;
    align-items: center;
    background-color: transparent;
}
.board.pieces{
    position: absolute;
    top: 0;
}
.board.pieces .board-row div {
    background-color: hsl(180deg 100% 50% / 20%);
}
.board.pieces .board-row:nth-child(1n) div:nth-child(1n),
.board.pieces .board-row:nth-child(1n) div:nth-child(2n),
.board.pieces .board-row:nth-child(2n) div:nth-child(1n),
.board.pieces .board-row:nth-child(2n) div:nth-child(2n) {
    background-color: transparent;
}

Y por último el HTML completo con las fichas en formato Símbolo Unicode, para poderse apreciar y cargar mucho más rápido en el navegador:

<!-- Cabezera -->
<header>
    <!-- Datos del primer jugador -->
    <div class="player">
        <h1>Player One</h1>
        <p>Pieces <span class="bg bg-black">Black</span></p>
    </div>
    <!-- Estadísticas del jugador -->
    <div class="score">
        <h2>Score: 000</h2>
        <ul>
            <li class="piece white" title="Black Roock L">♖</i></li>
            <li class="piece white" title="Black Knight L">♘</i></li>
        </ul>
    </div>
</header>
<!-- End -->

<!-- Seccion -->
<section>
    <div class="board-wrapper">
        <!-- Tablero de fondo con guia -->
        <div class="board">
            <div class="board-row">
                <div></div>
                <div>a</div>
                <div>b</div>
                <div>c</div>
                <div>d</div>
                <div>e</div>
                <div>f</div>
                <div>g</div>
                <div>h</div>
                <div></div>
            </div>
            <div class="board-row">
                <div>8</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>8</div>
            </div>
            <div class="board-row">
                <div>7</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>7</div>
            </div>
            <div class="board-row">
                <div>6</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>6</div>
            </div>
            <div class="board-row">
                <div>5</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>5</div>
            </div>
            <div class="board-row">
                <div>4</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>4</div>
            </div>
            <div class="board-row">
                <div>3</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>3</div>
            </div>
            <div class="board-row">
                <div>2</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>2</div>
            </div>
            <div class="board-row">
                <div>1</div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div>1</div>
            </div>
            <div class="board-row">
                <div></div>
                <div>a</div>
                <div>b</div>
                <div>c</div>
                <div>d</div>
                <div>e</div>
                <div>f</div>
                <div>g</div>
                <div>h</div>
                <div></div>
            </div>
        </div>
        <!-- Tablero absoluto de las piezas -->
        <div class="board pieces">
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div><a href="#" class="piece black" title="Black Roock L">♜</a></div>
                <div><a href="#" class="piece black" title="Black Knight L">♞</a></div>
                <div><a href="#" class="piece black" title="Black Bishop L">♝</a></div>
                <div><a href="#" class="piece black" title="Black Queen">♛</a></div>
                <div><a href="#" class="piece black" title="Black King">♚</a></div>
                <div><a href="#" class="piece black" title="Black Bishop R">♝</a></div>
                <div><a href="#" class="piece black" title="Black Knight R">♞</a></div>
                <div><a href="#" class="piece black" title="Black Rook R">♜</a></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div><a href="#" class="piece black" title="Black Pawn A">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn B">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn C">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn D">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn E">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn F">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn G">♟</a></div>
                <div><a href="#" class="piece black" title="Black Pawn H">♟</a></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="board-row pieces-black">
                <div></div>
                <div><a href="#" class="piece white" title="White Pawn A">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn B">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn C">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn D">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn E">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn F">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn G">♙</a></div>
                <div><a href="#" class="piece white" title="White Pawn H">♙</a></div>
                <div></div>
            </div>
            <div class="board-row pieces-black">
                <div></div>
                <div><a href="#" class="piece white" title="White Roock L">♖</a></div>
                <div><a href="#" class="piece white" title="White Knight L">♘</a></div>
                <div><a href="#" class="piece white" title="White Bishop L">♗</a></div>
                <div><a href="#" class="piece white" title="White Queen">♕</a></div>
                <div><a href="#" class="piece white" title="White King">♔</a></div>
                <div><a href="#" class="piece white" title="White Bishop R">♗</a></div>
                <div><a href="#" class="piece white" title="White Knight R">♘</a></div>
                <div><a href="#" class="piece white" title="White Rook R">♖</a></div>
                <div></div>
            </div>
            <div class="board-row">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</section>
<!-- End -->

<!-- Footer -->
<footer>
    <!-- Datos del segundo jugador -->
    <div class="player">
        <h1>Player Two</h1>
        <p>Pieces <span class="bg bg-white">White</span></p>
    </div>
    <!-- Estadísticas del jugador -->
    <div class="score">
        <h2>Score: 000</h2>
        <ul>
            <li class="piece black" title="Black Roock L">♜</i></li>
            <li class="piece black" title="Black Knight L">♞</i></li>
        </ul>
    </div>
</footer>
<!-- End -->

Deberia verse de esta manera:

Gracias por su tiempo y espero que les guste, saludos.

Educación online efectiva

Aprende con expertos de la industria

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados

¿Cómo crear una calculadora básica con HTML, CSS y JavaScript?

En este tutorial, aprenderás a construir una calculadora básica, completamente funcional, usando únicamente HTML, CSS y JavaScriptRequisit

leidytatianaricogamboabkdk

leidytatianaricogamboabkdk

1

¡Aprende a mover elementos de su lugar con CSS!

Para mover elementos dentro de un determinado contenedor que los contiene (redundancia 🫠), la propiedad que usaremos será position.Este se

AaronFT97

AaronFT97

1

TARJETA

TARJETAColocare el proceso de como realice una tarjeta con una frase&lt;!DOCTYPE html&gt; &lt;html lang=“en”&gt; &lt;head&gt; &lt;meta c

eduardo203

eduardo203

1

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos

robledocorrea

robledocorrea

12