I was trying to do a memory game in html, css and java. I made the button, a timer, and counter for clicks. They disappear when I made my "game section"
I cant figure out how to make it not overlap.. Well Im guessing that is what it is doing. And I cant change the background from black, I have tried html tag etc but cant figure it out. Never had this problem before while making a website etc before.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game">
<div class="controls">
<button>Start</button>
<div class="Stats">
<div class="moves">0 clicks</div>
<div class="timer">Tid : 0 sek</div>
</div>
</div>
<section class="memory-game">
<div class="memory-card" data-framework="char-01">
<img class="front-face" src="img/char-01.png" alt="char-01" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-01">
<img class="front-face" src="img/char-01.png" alt="char-01" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-02">
<img class="front-face" src="img/char-02.png" alt="char-02" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-02">
<img class="front-face" src="img/char-02.png" alt="char-02" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-03">
<img class="front-face" src="img/char-03.png" alt="char-03" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-03">
<img class="front-face" src="img/char-03.png" alt="char-03" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-04">
<img class="front-face" src="img/char-04.png" alt="char-04" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-04">
<img class="front-face" src="img/char-04.png" alt="char-04" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-05">
<img class="front-face" src="img/char-05.png" alt="char-05" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-05">
<img class="front-face" src="img/char-05.png" alt="char-05" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-06">
<img class="front-face" src="img/char-06.png" alt="char-06" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-06">
<img class="front-face" src="img/char-06.png" alt="char-06" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-07">
<img class="front-face" src="img/char-07.png" alt="char-07" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-07">
<img class="front-face" src="img/char-07.png" alt="char-07" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-08">
<img class="front-face" src="img/char-08.png" alt="char-08" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-08">
<img class="front-face" src="img/char-08.png" alt="char-08" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-09">
<img class="front-face" src="img/char-09.png" alt="char-09" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-09">
<img class="front-face" src="img/char-09.png" alt="char-09" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-10">
<img class="front-face" src="img/char-10.png" alt="char-10" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-10">
<img class="front-face" src="img/char-10.png" alt="char-10" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-11">
<img class="front-face" src="img/char-11.png" alt="char-11" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-11">
<img class="front-face" src="img/char-11.png" alt="char-11" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-12">
<img class="front-face" src="img/char-12.png" alt="char-12" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
<div class="memory-card" data-framework="char-12">
<img class="front-face" src="img/char-12.png" alt="char-12" />
<img class="back-face" src="img/guess.png" alt="guess" />
</div>
</section>
<script src="game.js"></script>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.game {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
button {
background: #f10606;
color: #ffffff;
border-radius: 10px;
padding: 10px 20px;
border: 0px;
cursor: pointer;
font-size: 18pt;
font-weight: bold;
font-style: italic;
}
.disabled {
color: #4d4d4d;
font-size: 14pt;
font-weight: bold;
font-style: italic;
}
.stats {
color: #ffffff;
font-size: 14pt;
font-weight: bold;
font-style: italic;
}
.border-container {
position: relative;
}
body {
height: 100vh;
display: flex;
background: #f10606;
color: #ffffff;
}
h1 {
font-style: italic;
position: relative;
left: 50%;
padding-top: 20px;
}
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #ffffff;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}
Java if needed: (not done fully, only cards are done)
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
Really appreciate the help you can give.
As understand, you add position:absolute on .game for set at center.
Replace your code
.game {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
with this code
.game {
display: grid;
place-items: center;
width: 100%;
}