Olá, tudo bem?
Estou tentando fazer um jogo da memória. Mas ele nem consegue executar. Por causa disso, estou enviando todos os codigos (no total são 4):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Correção na declaração do cabeçalho meta -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
<!-- Remoção do link para a fonte Righteous, já que não está sendo utilizado -->
<title>Memória</title>
</head>
<body>
<!-- Conteúdo do jogo -->
<div id="gameBoard">
<!-- Cartas do jogo -->
</div>
<a class="banner" href="">
<img src="./images/banner.jpg" alt="Curso DAlura">
</a>
<!-- Div de game over -->
<div id="gameOver">
<!-- Mensagem de parabéns -->
<div>
Parabéns, você completou o jogo!
</div>
<!-- Botão para reiniciar -->
<button id="restart" onclick="restart()">Jogue novamente</button>
</div>
<!-- Scripts -->
<!-- Correção no caminho dos scripts JavaScript -->
<script src="./script/game.js"></script>
<script src="./script/script.js"></script>
</body>
</html>
O anterior foi um HTML, agora vem o CSS:
body{
font-family: 'Righteous', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #c7cdd3;
}
.banner > img{
max-width: 300px;
}
.card{
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
transition: transform .5s;
}
.card_back, .card_front{
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.45);
backface-visibility: hidden;
}
.flip{
transform: rotateY(180deg);
}
.card_front{
transform: rotateY(180deg);
background-color: #101c2c;
}
.card_back{
background-color: #05c3ff;
font-size: 30px;
}
#gameOver{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
color: white;
font-size: 50px;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
top: 0;
}
#restart{
padding: 20px;
font-size: 20px;
background-color: yellow;
border: none;
border-radius: 10px;
margin-top: 10px;
}
#gameBoard{
background-color: tomato;
max-width: 700px;
display: grid;
}
Eu não tenho como ajudar, porque de fato, eu não sei aonde errei.
Obrigado pela atenção, Guilherme Ribeiro Tavares