HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de memoria</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<button id="iniciar-juego">Iniciar</button>
<div id="contenedor-juego"></div>
<script src="index.js"></script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#iniciar-juego{
background-color: green;
color: white;
border: none;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
}
#iniciar-juego:hover{
border: 1px solid green;
background-color: white;
color: green;
}
#contenedor-juego{
display: flex;
flex-wrap: wrap;
width: 500px;
}
.card{
height: 100px;
width: 100px;
background-color: gray;
margin: 10px;
border-radius: 5px;
}
.card-value{
font-size: 40px;
font-weight: bold;
text-align: center;
color: white;
}
#mensaje{
color: green;
font-size: 40px;
font-weight: bold;
}
JAVASCRIPT
var contenedor = document.getElementById('contenedor-juego')
var boton = document.getElementById('iniciar-juego')
var arregloCards = []
var arregloCardsVolteadas =[]
var arregloCardsEncontradas = []
boton.addEventListener('click',iniciarJuego)
function iniciarJuego(){
contenedor.innerHTML=''
arregloCards = []
arregloCardsEncontradas = []
// llenar arreglo de cartas
for(let j=0; j<2;j++){
for(let i=0;i<6;i++){
let card = '<div class="card" data-card ="'+ (i+1)+'"> </div>'
arregloCards.push(card)
}
}
//desordenar el arreglo
arregloCards.sort(function(){
return Math.random()-0.5
})
arregloCards.forEach(card=>{
contenedor.innerHTML += card
})
let cards = document.querySelectorAll('.card')
cards.forEach(card=>{
card.addEventListener('click',voltearCarta)
})
}
function voltearCarta(){
let valor = this.dataset.card
let html = '<p class ="card-value">'+valor+'</p>'
this.innerHTML=html
if(arregloCardsVolteadas.length<2 && !arregloCardsVolteadas.includes(this)
&& !arregloCardsEncontradas.includes(this)){
this.style.backgroundColor = 'blue'
arregloCardsVolteadas.push(this)
if(arregloCardsVolteadas.length==2){
validarCartas()
}
}
console.log(arregloCardsVolteadas)
}
function validarCartas(){
if(arregloCardsVolteadas[0].dataset.card == arregloCardsVolteadas[1].dataset.card){
arregloCardsEncontradas.push(...arregloCardsVolteadas)
arregloCardsVolteadas=[]
}else{
setTimeout(()=>{
arregloCardsVolteadas.forEach(card=>{
card.style.backgroundColor='gray'
card.innerHTML=''
})
arregloCardsVolteadas=[]
},1000)
}
if(arregloCardsEncontradas.length == arregloCards.length){
contenedor.innerHTML=''
let mensaje = '<p id="mensaje"> !Felicitaciones! Juego completado</p>'
contenedor.innerHTML= mensaje
}
}
