1

Como crear una interfaz basica del famoso juego de memoria con html y css

En este tutorial muestro como crear la interfaz basica del tipico juego de memoria donde tienes que acertar las parejas de cartas boca abajo, no es el juego completo ya que haria falta el uso de javascript a parte de html y css
Aqui os muestro el resultado de como quedaría este mini proyecto:
Captura de pantalla 2025-01-19 222107.png
-Ahora primero mostrare el html

<!DOCTYPE html><htm><head><metacharset="UTF-8"><title>Juego Memori Basic</title><linkrel="stylesheet"href="memory.css"></head><body><h1>
            MEMORY GAME
        </h1><divclass="game"><!-- Tarjetas del juego --><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">👾</div><divclass="inicio">🂠</div></label><!-- Con los label creamos el "Tablero" donde iran nuestras tarjetas y con input le damos las funcionalidades --><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🗿</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🛻</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🙊</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🛻</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">👾</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🗿</div><divclass="inicio">🂠</div></label><labelclass="card"><inputtype="checkbox"class="cardinput"><divclass="fin">🙊</div><divclass="inicio">🂠</div></label><p>&nbsp &nbsp🤔</p></div></body></htm><code>

Todo esto sería el html y ahora pasamos con el css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #428951;
}

h1{
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  
}
.game{
    display:grid;
    grid-template-columns: repeat(3,100px);
    gap:20px;
}

.card{
    position:relative;
    width: 100px;
    height:100px;
    cursor: pointer;
    perspective: 1000px;

}

.cardinput{

display: none;

}
/* Aqui hacemos el diseño de nuestra tarjeta */.inicio,
.fin{
position:absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display:flex;
justify-content: center;
border-radius: 10px;
border:2px solid ;
background-color: #ffffff;
box-shadow: 04px6px;
font-size: 25px;
align-items: center;
}
/* Aqui indicamos la funcionalidad de que gire al clicar  */.fin{
    background-color: #679fdb;
    color: white;
    transform: rotateY(180deg);
}

.inicio{
    background-color: #FFD700;
   
}


/* Con esto indicamos como queremos que aparezcan las cartas */.cardinput:checked ~ .fin {
    transform: rotateY(0);
}

.cardinput:checked ~ .inicio {
    transform: rotateY(180deg);
}
p{
    font-size: 40px;
    justify-content: center;
    align-items: center;
}
<code>

Con este codigo tendriamos nuestra pequeña interfaz ^^

Escribe tu comentario
+ 2