Comment implémenter un jeu d'échecs en utilisant du CSS pur-tutoriel CSS-php.cn

Comment implémenter un jeu d'échecs en utilisant du CSS pur

不言

Libérer： 2018-07-11 16:50:49

original

2565 Les gens l'ont consulté

Cet article présente principalement comment utiliser du CSS pur pour implémenter un jeu d'échecs. Il a maintenant une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Comment implémenter un jeu déchecs en utilisant du CSS pur

Téléchargement du code source

Veuillez télécharger tout le code source de la série pratique quotidienne du front-end depuis github :

https://github.com/comehope/front-end-daily -défis

Interprétation du code

Définir dom, un total de 8 listes, chaque liste contient 8 éléments :

<p class="chess">
    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>
</p>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkslategray;
}

Copier après la connexion

Définissez la couleur d'arrière-plan et la taille du conteneur (la taille est déterminée par la taille de la police) :

.chess {
    background-color: burlywood;
    font-size: 32px;
}

Copier après la connexion

Dessinez un damier en forme de grille :

ul {
    display: table;
    margin: 0;
    padding: 0;
}

li {
    display: table-cell;
    width: 1.5em;
    height: 1.5em;
}

Copier après la connexion

Définissez la couleur de l'entrelacement de la grille :

ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6);
}

Copier après la connexion

Placez les pièces d'échecs sur l'échiquier :

<p class="chess">
    <ul>
        <li>&#9820;</li>
        <li>&#9822;</li>
        <li>&#9821;</li>
        <li>&#9819;</li>
        <li>&#9818;</li>
        <li>&#9821;</li>
        <li>&#9822;</li>
        <li>&#9820;</li>
    </ul>

    <ul>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li>
    </ul>

    <ul>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
        <li>&#9823;</li>
    </ul>

    <ul>
        <li>&#9820;</li>
        <li>&#9822;</li>
        <li>&#9821;</li>
        <li>&#9819;</li>
        <li>&#9818;</li>
        <li>&#9821;</li>
        <li>&#9822;</li>
        <li>&#9820;</li>
    </ul>
</p>

Copier après la connexion

Définissez la couleur des pièces d'échecs :

ul:nth-child(-n+2) {
    color: black;
}

ul:nth-child(n+7) {
    color: white;
}

Copier après la connexion

Enfin, ajoutez un petit effet tridimensionnel à l'échiquier :

.chess {
    border: 0.2em solid tan;
    box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}

Copier après la connexion

C'est fait !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'une carte de couleurs

Comment utiliser du CSS pur pour obtenir l'effet d'un perroquet de dessin animé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!