Pastebin

New Paste Add Image

<!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>
  
  <link href="https://fonts.cdnfonts.com/css/edo" rel="stylesheet" />
  <style>
    :root {
      --color-primary: #ff0000;
      --color-secondary: #8b0000;
      --color-success: #16a34a;
      --color-bg: #1a1a1a;
      --color-surface: #2a2a2a;
      --color-text: #ffffff;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Edo', sans-serif !important;
    }
    
    body {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      background-attachment: fixed;
      color: var(--color-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    
    .container {
      max-width: 700px;
      width: 100%;
      text-align: center;
    }
    
    h1 {
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      margin-bottom: 10px;
      color: #ff0000;
      font-weight: 700;
      letter-spacing: 2px;
      text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.5);
      text-transform: uppercase;
    }
    
    .game-stats {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
      flex-wrap: wrap;
    }
    
    .stat-item {
      background: rgba(0, 0, 0, 0.7);
      padding: 10px 20px;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(139, 0, 0, 0.4);
      border: 2px solid rgba(255, 0, 0, 0.5);
      min-width: 100px;
      transition: all 0.3s ease;
    }
    
    .stat-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
      border-color: rgba(255, 0, 0, 0.8);
    }
    
    .stat-label {
      font-size: 0.9rem;
      opacity: 0.7;
      margin-bottom: 5px;
    }
    
    .stat-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: #ff0000;
      text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    }
    
    .status {
      font-size: clamp(1rem, 3vw, 1.3rem);
      margin: 15px 0;
      min-height: 30px;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .game-board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(8px, 2vw, 12px);
      margin: 20px auto;
      max-width: 500px;
      padding: 15px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      box-shadow: 0 0 40px rgba(139, 0, 0, 0.6);
      border: 3px solid #8b0000;
    }
    
    .card {
      aspect-ratio: 1;
      background: linear-gradient(145deg, #ffffff, #f0f0f0);
      border-radius: 12px;
      font-size: clamp(2rem, 5vw, 3rem);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      transform-style: preserve-3d;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      user-select: none;
    }
    
    .card-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    
    .card.flipped .card-inner {
      transform: rotateY(180deg);
    }
    
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
      border-radius: 12px;
    }
    
    .card-front {
      background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
      color: #ff0000;
      font-weight: bold;
      font-size: 2rem;
      border: 2px solid #8b0000;
      box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
    }
    
    .card-back {
      background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
      transform: rotateY(180deg);
      border: 2px solid #8b0000;
    }
    
    .card:hover:not(.flipped):not(.matched) {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }
    
    .card.matched {
      background: linear-gradient(145deg, #8b0000, #ff0000);
      animation: matchPulse 0.6s ease-in-out;
      pointer-events: none;
      box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
    }
    
    .card.matched .card-back {
      background: linear-gradient(145deg, #8b0000, #ff0000);
      border-color: #ff0000;
    }
    
    @keyframes matchPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); box-shadow: 0 0 50px rgba(255, 0, 0, 1); }
    }
    
    .card.wrong {
      animation: shake 0.5s ease-in-out;
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-10px); }
      75% { transform: translateX(10px); }
    }
    
    .controls {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    
    button {
      padding: 14px 35px;
      font-size: clamp(0.9rem, 2.5vw, 1.1rem);
      font-weight: 700;
      background: linear-gradient(135deg, #ff0000 0%, #8b0000 100%);
      color: white;
      border: 3px solid #8b0000;
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 10px 30px rgba(255, 0, 0, 0.6);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-family: 'Edo', sans-serif !important;
    }
    
    button:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 15px 40px rgba(255, 0, 0, 0.8);
      background: linear-gradient(135deg, #8b0000 0%, #ff0000 100%);
    }
    
    button:active {
      transform: translateY(0);
    }
    
    .difficulty-selector {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 20px 0;
    }
    
    .difficulty-btn {
      padding: 10px 20px;
      font-size: 0.9rem;
      background: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      border: 2px solid #8b0000;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 600;
      letter-spacing: 1px;
      font-family: 'Edo', sans-serif !important;
    }
    
    .difficulty-btn:hover {
      background: rgba(139, 0, 0, 0.3);
      transform: scale(1.05);
      border-color: #ff0000;
    }
    
    .difficulty-btn.active {
      background: #ff0000;
      border-color: #ff0000;
      box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
      color: #ffffff;
    }
    
    @media (max-width: 480px) {
      body {
        padding: 5px;
      }
      
      h1 {
        font-size: 1.3rem;
        margin-bottom: 5px;
      }
      
      .game-board {
        padding: 10px;
        gap: 6px;
        margin: 10px auto;
      }
      
      .card {
        font-size: 1.5rem;
      }
      
      button {
        padding: 10px 20px;
        font-size: 0.85rem;
      }
      
      .stat-item {
        padding: 8px 15px;
        min-width: 80px;
      }
      
      .stat-value {
        font-size: 1.2rem;
      }
      
      .difficulty-btn {
        padding: 8px 15px;
        font-size: 0.8rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎯 JOHNNY'S MEMORY 🎯</h1>
    
    <div class="difficulty-selector">
      <button class="difficulty-btn active" onclick="setDifficulty('easy')" data-level="easy">Easy (4x4)</button>
      <button class="difficulty-btn" onclick="setDifficulty('hard')" data-level="hard">Hard (6x4)</button>
    </div>
    
    <div class="game-stats">
      <div class="stat-item">
        <div class="stat-label">Moves</div>
        <div class="stat-value" id="moves">0</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">Matches</div>
        <div class="stat-value" id="matches">0</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">Time</div>
        <div class="stat-value" id="timer">0:00</div>
      </div>
    </div>
    
    <div class="status" id="status">Find all matching pairs!</div>
    <div class="game-board" id="gameBoard"></div>
    
    <div class="controls">
      <button onclick="startNewGame()"><span>🔄 New Game</span></button>
    </div>
  </div>
  
  <script>
    const emojis = ['⛩️', '🐉', '🚗', '🔫', '🔪', '💥', '🚬', '🥃', '💰', '🚨', '🩸', '⚓'];
    
    let cards = [];
    let flippedCards = [];
    let matchedPairs = 0;
    let moves = 0;
    let startTime = null;
    let timerInterval = null;
    let gameActive = false;
    let difficulty = 'easy';
    
    function setDifficulty(level) {
      difficulty = level;
      document.querySelectorAll('.difficulty-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      document.querySelector(`[data-level="${level}"]`).classList.add('active');
      startNewGame();
    }
    
    function initGame() {
      const pairCount = difficulty === 'easy' ? 8 : 12;
      const selectedEmojis = emojis.slice(0, pairCount);
      cards = [...selectedEmojis, ...selectedEmojis]
        .sort(() => Math.random() - 0.5)
        .map((emoji, index) => ({
          id: index,
          emoji: emoji,
          flipped: false,
          matched: false
        }));
      
      flippedCards = [];
      matchedPairs = 0;
      moves = 0;
      gameActive = true;
      
      updateStats();
      renderBoard();
      startTimer();
    }
    
    function renderBoard() {
      const board = document.getElementById('gameBoard');
      board.innerHTML = '';
      
      if (difficulty === 'easy') {
        board.style.gridTemplateColumns = 'repeat(4, 1fr)';
      } else {
        board.style.gridTemplateColumns = 'repeat(6, 1fr)';
      }
      
      cards.forEach(card => {
        const cardElement = document.createElement('div');
        cardElement.className = 'card';
        cardElement.dataset.id = card.id;
        
        cardElement.innerHTML = `
          <div class="card-inner">
            <div class="card-front">?</div>
            <div class="card-back">${card.emoji}</div>
          </div>
        `;
        
        cardElement.addEventListener('click', () => flipCard(card.id));
        board.appendChild(cardElement);
      });
    }
    
    function flipCard(cardId) {
      if (!gameActive) return;
      
      const card = cards.find(c => c.id === cardId);
      const cardElement = document.querySelector(`[data-id="${cardId}"]`);
      
      if (card.flipped || card.matched || flippedCards.length >= 2) return;
      
      card.flipped = true;
      cardElement.classList.add('flipped');
      flippedCards.push(card);
      
      if (flippedCards.length === 2) {
        moves++;
        updateStats();
        checkMatch();
      }
    }
    
    function checkMatch() {
      const [card1, card2] = flippedCards;
      
      if (card1.emoji === card2.emoji) {
        setTimeout(() => {
          card1.matched = true;
          card2.matched = true;
          document.querySelector(`[data-id="${card1.id}"]`).classList.add('matched');
          document.querySelector(`[data-id="${card2.id}"]`).classList.add('matched');
          matchedPairs++;
          updateStats();
          flippedCards = [];
          
          const totalPairs = difficulty === 'easy' ? 8 : 12;
          if (matchedPairs === totalPairs) {
            endGame();
          }
        }, 500);
      } else {
        setTimeout(() => {
          document.querySelector(`[data-id="${card1.id}"]`).classList.add('wrong');
          document.querySelector(`[data-id="${card2.id}"]`).classList.add('wrong');
          
          setTimeout(() => {
            card1.flipped = false;
            card2.flipped = false;
            document.querySelector(`[data-id="${card1.id}"]`).classList.remove('flipped', 'wrong');
            document.querySelector(`[data-id="${card2.id}"]`).classList.remove('flipped', 'wrong');
            flippedCards = [];
          }, 500);
        }, 800);
      }
    }
    
    function updateStats() {
      document.getElementById('moves').textContent = moves;
      document.getElementById('matches').textContent = matchedPairs;
    }
    
    function startTimer() {
      if (timerInterval) clearInterval(timerInterval);
      startTime = Date.now();
      
      timerInterval = setInterval(() => {
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        document.getElementById('timer').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
      }, 1000);
    }
    
    function endGame() {
      gameActive = false;
      clearInterval(timerInterval);
      const elapsed = Math.floor((Date.now() - startTime) / 1000);
      const minutes = Math.floor(elapsed / 60);
      const seconds = elapsed % 60;
      
      setTimeout(() => {
        document.getElementById('status').textContent = `🎉 You Won! Time: ${minutes}:${seconds.toString().padStart(2, '0')}, Moves: ${moves}`;
      }, 600);
    }
    
    function startNewGame() {
      if (timerInterval) clearInterval(timerInterval);
      document.getElementById('status').textContent = 'Find all matching pairs!';
      document.getElementById('timer').textContent = '0:00';
      initGame();
    }
    
    initGame();
  </script>
</body>
</html>

Settings

Title : [Optional]

Paste Folder : [Optional]

Syntax : [Optional]

Expiration : [Optional]

Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Settings

Site Languages