Phonbopit/memory-game.html

## memory-game.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Memory Game</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      h1 {
        color: white;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .game-info {
        color: white;
        margin-bottom: 20px;
        display: flex;
        gap: 30px;
        font-size: 1.1em;
      }

      .game-board {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        max-width: 500px;
        width: 100%;
      }

      .card {
        aspect-ratio: 1;
        background: white;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5em;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        user-select: none;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      }

      .card.hidden {
        background: linear-gradient(145deg, #4a5568 0%, #2d3748 100%);
        font-size: 0;
      }

      .card.matched {
        background: linear-gradient(145deg, #48bb78 0%, #38a169 100%);
        animation: matchPulse 0.5s ease;
        cursor: default;
      }

      .card.matched:hover {
        transform: scale(1);
      }

      @keyframes matchPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }

      button {
        margin-top: 25px;
        padding: 12px 30px;
        font-size: 1em;
        background: white;
        color: #667eea;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-weight: bold;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }

      button:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      .win-message {
        color: white;
        font-size: 1.5em;
        margin-top: 20px;
        display: none;
      }

      .win-message.show {
        display: block;
        animation: fadeIn 0.5s ease;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <h1>Memory Game</h1>

    <div class="game-info">
      <span>Moves: <span id="moves">0</span></span>
      <span>Matches: <span id="matches">0</span>/8</span>
    </div>

    <div class="game-board" id="gameBoard"></div>

    <div class="win-message" id="winMessage">You won!</div>

    <button onclick="initGame()">New Game</button>

    <script>
      const emojis = ["🎈", "🎨", "🎭", "🎪", "🎯", "🎲", "🎸", "🎺"];
      let cards = [];
      let flippedCards = [];
      let matchedPairs = 0;
      let moves = 0;
      let canFlip = true;

      function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
      }

      function createCard(emoji, index) {
        const card = document.createElement("div");
        card.className = "card hidden";
        card.dataset.emoji = emoji;
        card.dataset.index = index;
        card.textContent = emoji;
        card.addEventListener("click", () => flipCard(card));
        return card;
      }

      function flipCard(card) {
        if (
          !canFlip ||
          !card.classList.contains("hidden") ||
          card.classList.contains("matched")
        ) {
          return;
        }

        card.classList.remove("hidden");
        flippedCards.push(card);

        if (flippedCards.length === 2) {
          moves++;
          document.getElementById("moves").textContent = moves;
          checkMatch();
        }
      }

      function checkMatch() {
        canFlip = false;
        const [card1, card2] = flippedCards;

        if (card1.dataset.emoji === card2.dataset.emoji) {
          card1.classList.add("matched");
          card2.classList.add("matched");
          matchedPairs++;
          document.getElementById("matches").textContent = matchedPairs;
          flippedCards = [];
          canFlip = true;

          if (matchedPairs === 8) {
            document.getElementById("winMessage").classList.add("show");
          }
        } else {
          setTimeout(() => {
            card1.classList.add("hidden");
            card2.classList.add("hidden");
            flippedCards = [];
            canFlip = true;
          }, 1000);
        }
      }

      function initGame() {
        const gameBoard = document.getElementById("gameBoard");
        const winMessage = document.getElementById("winMessage");

        gameBoard.innerHTML = "";
        winMessage.classList.remove("show");

        matchedPairs = 0;
        moves = 0;
        flippedCards = [];
        canFlip = true;

        document.getElementById("moves").textContent = "0";
        document.getElementById("matches").textContent = "0";

        cards = shuffle([...emojis, ...emojis]);

        cards.forEach((emoji, index) => {
          gameBoard.appendChild(createCard(emoji, index));
        });
      }

      // Start the game on load
      initGame();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Memory Game</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	}

	h1 {
	color: white;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}

	.game-info {
	color: white;
	margin-bottom: 20px;
	display: flex;
	gap: 30px;
	font-size: 1.1em;
	}

	.game-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	max-width: 500px;
	width: 100%;
	}

	.card {
	aspect-ratio: 1;
	background: white;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5em;
	transition:
	transform 0.3s ease,
	box-shadow 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	user-select: none;
	}

	.card:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	}

	.card.hidden {
	background: linear-gradient(145deg, #4a5568 0%, #2d3748 100%);
	font-size: 0;
	}

	.card.matched {
	background: linear-gradient(145deg, #48bb78 0%, #38a169 100%);
	animation: matchPulse 0.5s ease;
	cursor: default;
	}

	.card.matched:hover {
	transform: scale(1);
	}

	@keyframes matchPulse {
	0%,
	100% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.1);
	}
	}

	button {
	margin-top: 25px;
	padding: 12px 30px;
	font-size: 1em;
	background: white;
	color: #667eea;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	transition:
	transform 0.2s,
	box-shadow 0.2s;
	}

	button:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}

	.win-message {
	color: white;
	font-size: 1.5em;
	margin-top: 20px;
	display: none;
	}

	.win-message.show {
	display: block;
	animation: fadeIn 0.5s ease;
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateY(-20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	</style>
	</head>
	<body>
	<h1>Memory Game</h1>

	<div class="game-info">
	<span>Moves: <span id="moves">0</span></span>
	<span>Matches: <span id="matches">0</span>/8</span>
	</div>

	<div class="game-board" id="gameBoard"></div>

	<div class="win-message" id="winMessage">You won!</div>

	<button onclick="initGame()">New Game</button>

	<script>
	const emojis = ["🎈", "🎨", "🎭", "🎪", "🎯", "🎲", "🎸", "🎺"];
	let cards = [];
	let flippedCards = [];
	let matchedPairs = 0;
	let moves = 0;
	let canFlip = true;

	function shuffle(array) {
	for (let i = array.length - 1; i > 0; i--) {
	const j = Math.floor(Math.random() * (i + 1));
	[array[i], array[j]] = [array[j], array[i]];
	}
	return array;
	}

	function createCard(emoji, index) {
	const card = document.createElement("div");
	card.className = "card hidden";
	card.dataset.emoji = emoji;
	card.dataset.index = index;
	card.textContent = emoji;
	card.addEventListener("click", () => flipCard(card));
	return card;
	}

	function flipCard(card) {
	if (
	!canFlip \|\|
	!card.classList.contains("hidden") \|\|
	card.classList.contains("matched")
	) {
	return;
	}

	card.classList.remove("hidden");
	flippedCards.push(card);

	if (flippedCards.length === 2) {
	moves++;
	document.getElementById("moves").textContent = moves;
	checkMatch();
	}
	}

	function checkMatch() {
	canFlip = false;
	const [card1, card2] = flippedCards;

	if (card1.dataset.emoji === card2.dataset.emoji) {
	card1.classList.add("matched");
	card2.classList.add("matched");
	matchedPairs++;
	document.getElementById("matches").textContent = matchedPairs;
	flippedCards = [];
	canFlip = true;

	if (matchedPairs === 8) {
	document.getElementById("winMessage").classList.add("show");
	}
	} else {
	setTimeout(() => {
	card1.classList.add("hidden");
	card2.classList.add("hidden");
	flippedCards = [];
	canFlip = true;
	}, 1000);
	}
	}

	function initGame() {
	const gameBoard = document.getElementById("gameBoard");
	const winMessage = document.getElementById("winMessage");

	gameBoard.innerHTML = "";
	winMessage.classList.remove("show");

	matchedPairs = 0;
	moves = 0;
	flippedCards = [];
	canFlip = true;

	document.getElementById("moves").textContent = "0";
	document.getElementById("matches").textContent = "0";

	cards = shuffle([...emojis, ...emojis]);

	cards.forEach((emoji, index) => {
	gameBoard.appendChild(createCard(emoji, index));
	});
	}

	// Start the game on load
	initGame();
	</script>
	</body>
	</html>
No results found