🎮 HTML GAME CODING HUB 💻🔥

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Match Game</title>

<style>
* {
box-sizing: border-box;
}

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

.game {
width: 94%;
max-width: 430px;
padding: 25px;
text-align: center;
border-radius: 25px;
background: #111a30;
box-shadow: 0 0 35px #00eaff55;
}

h1 {
color: #00eaff;
margin-bottom: 5px;
}

.subtitle {
color: #aaa;
}

.stats {
display: flex;
justify-content: space-around;
margin: 20px 0;
padding: 12px;
border-radius: 12px;
background: #192541;
}

.board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.card {
height: 75px;
border: none;
border-radius: 14px;
background: #263655;
color: transparent;
font-size: 30px;
cursor: pointer;
transition: 0.2s;
}

.card:hover {
transform: scale(1.05);
}

.card.flipped,
.card.matched {
background: #00a9c7;
color: white;
}

.card.matched {
background: #18b878;
}

.restart {
margin-top: 20px;
padding: 12px 25px;
border: none;
border-radius: 25px;
background: #00eaff;
color: #061018;
font-weight: bold;
font-size: 16px;
cursor: pointer;
}

@media (max-width: 360px) {
.card {
height: 65px;
}
}
</style>
</head>

<body>

<div class="game">

<h1>🧠 MEMORY MATCH</h1>

<p class="subtitle">
Match all 8 pairs!
</p>

<div class="stats">
<span>
Moves: <b id="moves">0</b>
</span>

<span>
Pairs: <b id="pairs">0</b>/8
</span>
</div>

<div id="board" class="board"></div>

<button class="restart" onclick="restartGame()">
🔄 Restart Game
</button>

</div>

<script>

const symbols = [
"🍎","🍎",
"🚀","🚀",
"🎮","🎮",
"⚡","⚡",
"🔥","🔥",
"💎","💎",
"🐱","🐱",
"👾","👾"
];

let firstCard = null;
let secondCard = null;
let lockBoard = false;
let moves = 0;
let pairs = 0;

function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}

function createBoard() {

const board = document.getElementById("board");

board.innerHTML = "";

shuffle([...symbols]).forEach(symbol => {

const card = document.createElement("button");

card.className = "card";
card.dataset.symbol = symbol;
card.textContent = "?";

card.onclick = () => flipCard(card);

board.appendChild(card);
});
}

function flipCard(card) {

if (
lockBoard ||
card === firstCard ||
card.classList.contains("matched")
) {
return;
}

card.classList.add("flipped");
card.textContent = card.dataset.symbol;

if (!firstCard) {
firstCard = card;
return;
}

secondCard = card;

moves++;
document.getElementById("moves").textContent = moves;

checkMatch();
}

function checkMatch() {

const match =
firstCard.dataset.symbol ===
secondCard.dataset.symbol;

if (match) {

firstCard.classList.add("matched");
secondCard.classList.add("matched");

pairs++;

document.getElementById("pairs").textContent = pairs;

resetTurn();

if (pairs === 8) {

setTimeout(() => {
alert(
"🏆 YOU WON!\n\n" +
"Total Moves: " + moves
);
}, 300);
}

} else {

lockBoard = true;

setTimeout(() => {

firstCard.classList.remove("flipped");
secondCard.classList.remove("flipped");

firstCard.textContent = "?";
secondCard.textContent = "?";

resetTurn();

}, 800);
}
}

function resetTurn() {

❤1👍1

6 views16:50