dijital dahi: Mini Hafıza Kartı Eşleştirme Oyunu (HTML, CSS Kodu & AI Promptu)

🟢 Canlı Önizleme

🎯 Hamle: 0 ⭐ Eşleşme: 0/2

🎮 Kartları açın, eşleşen simgeleri bulun!

📄 HTML YAPISI ✏️ Düzenlenebilir

🎨 CSS STILLERI ✏️ Düzenlenebilir

.mem-box {
  width: 100%;
  max-width: 280px;
  padding: 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mem-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 0.85rem;
}
.mem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 0.85rem;
}
.m-card {
  height: 60px;
  font-size: 1.6rem;
  background: #1e293b;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
}
.m-card.revealed {
  background: #6366f1;
  border-color: #818cf8;
}
.m-card.matched {
  background: #10b981;
  border-color: #34d399;
}
.mem-win-msg {
  color: #10b981;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.mem-btn {
  width: 100%;
  padding: 0.55rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.2s;
}
.mem-btn:hover { background: #4f46e5; }

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

var memIcons = ['🚀', '🚀', '💎', '💎'];
var memFlipped = [];
var memMatched = [];
var memMoves = 0;
var memLock = false;

function shuffleMem() {
  memIcons.sort(function() { return 0.5 - Math.random(); });
}

function flipCard(idx) {
  if (memLock || memFlipped.includes(idx) || memMatched.includes(idx)) return;
  
  var cards = document.querySelectorAll('.m-card');
  if (!cards[idx]) return;
  
  cards[idx].textContent = memIcons[idx];
  cards[idx].classList.add('revealed');
  memFlipped.push(idx);

if (memFlipped.length === 2) {
    memMoves++;
    var movesEl = document.getElementById('mem-moves');
    if (movesEl) movesEl.textContent = memMoves;
    var first = memFlipped[0];
    var second = memFlipped[1];

if (memIcons[first] === memIcons[second]) {
      memMatched.push(first, second);
      cards[first].classList.add('matched');
      cards[second].classList.add('matched');
      memFlipped = [];
      var matchEl = document.getElementById('mem-matches');
      if (matchEl) matchEl.textContent = (memMatched.length / 2) + '/2';
      if (memMatched.length === 4) {
        var winEl = document.getElementById('mem-win');
        if (winEl) winEl.style.display = 'block';
      }
    } else {
      memLock = true;
      setTimeout(function() {
        cards[first].textContent = '❓';
        cards[second].textContent = '❓';
        cards[first].classList.remove('revealed');
        cards[second].classList.remove('revealed');
        memFlipped = [];
        memLock = false;
      }, 700);
    }
  }
}

function resetMemoryGame() {
  memFlipped = [];
  memMatched = [];
  memMoves = 0;
  memLock = false;
  shuffleMem();
  var movesEl = document.getElementById('mem-moves');
  var matchEl = document.getElementById('mem-matches');
  var winEl = document.getElementById('mem-win');
  if (movesEl) movesEl.textContent = '0';
  if (matchEl) matchEl.textContent = '0/2';
  if (winEl) winEl.style.display = 'none';
  var cards = document.querySelectorAll('.m-card');
  cards.forEach(function(c) {
    c.textContent = '❓';
    c.className = 'm-card';
  });
}
shuffleMem();

🤖 YAPAY ZEKA (AI) PROMPTU ChatGPT / Claude / v0

Bana 2x2 veya 3x2 ızgarada rastgele dizilen simgelerle oynanan, eşleşmeyen kartları geri kapatan, hamle sayan ve kazanma bildirimi veren bir Mini Hafıza Oyunu kodla.

💡 Nasıl Kullanılır? Promptu kopyalayıp ChatGPT, Claude veya Cursor'a yapıştırarak bu aracı projenize göre özelleştirebilirsiniz. Promptun sonuna "En iyi skoru LocalStorage'a kaydeden ve süre sayacı ekleyen bir oyun döngüsü kur" yazabilirsiniz.

Mini Hafıza Kartı Eşleştirme Oyunu (HTML, CSS Kodu & AI Promptu)

Kayıtlı Favorilerim