CodeYantra
BUILD WITH ME · SEASON 2 · DAY 6 / 7

Memory Game

Season 2 ka chhatha project: Memory Game — 12 cards ulte rakhe hain, do-do palto aur jodi (pair) milao. Galat jodi 0.7 second baad wapas ulti ho jaati hai, sahi jodi green ho jaati hai. Saari jodi milne par "Jeet gaye!" aata hai. Isme shuffle, timer aur game state seekhoge — ye is season ka sabse mazedaar logic hai!

⏱ 45 min🎯 Intermediate → game logic🛠 Shuffle, timers, flip logic
  • Math.random() aur Fisher-Yates shuffle — cards ko randomly mix karna
  • Swap ka naya tarika: [a, b] = [b, a] (destructuring)
  • dataset — HTML element ke andar chhupa data (data-e)
  • setTimeout aur locked flag — galat jodi ko thodi der baad wapas ulta karna
  • :empty::before — khaali card par "?" dikhana (CSS se)
Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Memory Game ka HTMLindex.html

  • #info me chaalon (moves) ki ginti dikhegi.
  • #board khaali hai — 12 cards JavaScript banayega, taaki har baar naye order me aayein.
  • Restart button naya game shuru karega.
  <div class="game">
    <h1>Memory Game 🧠</h1>
    <p id="info">Moves: 0</p>
    <div id="board"></div>
    <button id="restart">Restart</button>
  </div>

2Dark cardstyle.css

  • Wahi purani trick: display: grid + place-items: center.
  • text-align: center — title aur button beech me.
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}
.game {
  width: 300px;
  padding: 24px;
  background: #1e293b;
  border-radius: 24px;
  text-align: center;
}

3Title + 4 column gridstyle.css

  • repeat(4, 1fr) — 4 barabar columns. 12 cards 3 line me baith jaate hain.
  • gap: 8px cards ke beech jagah.
h1 { margin: 0; color: #fff; font-size: 22px; }
#info { margin: 8px 0 14px; color: #94a3b8; font-size: 14px; }
#board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

4Card ke rangstyle.css

  • Normal card indigo. :empty::before — jab card ke andar kuch nahi (ulta hai) tab "?" dikhao.
  • .open (palta hua) gehra neela, .done (jodi mil gayi) green — JS in classes ko lagayega/hataayega.
#board button {
  height: 56px;
  border: 0;
  border-radius: 12px;
  background: #6366f1;
  font-size: 26px;
  cursor: pointer;
}
#board button:empty::before { content: '?'; color: #c7d2fe; }
#board button.open { background: #334155; }
#board button.done { background: #22c55e; }

5Restart buttonstyle.css

  • Pink button, board se thoda door (margin-top).
#restart {
  margin-top: 16px;
  padding: 10px 24px;
  border: 0;
  border-radius: 10px;
  background: #ec4899;
  color: #fff;
  cursor: pointer;
}

6State + emoji listscript.js

  • EMOJI me 6 alag emoji. Har emoji do baar aayega, tabhi to jodi banegi.
  • first = pehla palta hua card (null = abhi koi nahi). locked = true ho to cards palat nahi sakte.
  • moves (chaalen) aur matched (kitni jodi mili).
const board = document.querySelector('#board');
const info = document.querySelector('#info');
const EMOJI = ['🍎', '🐶', '🚀', '⚽', '🎵', '🌈'];

let first = null;
let locked = false;
let moves = 0;
let matched = 0;

7shuffle() — cards mixscript.js

  • Peeche se shuru karo, har jagah ke liye ek random jagah j chuno aur dono ko swap kar do.
  • [arr[i], arr[j]] = [arr[j], arr[i]] — bina temporary variable ke swap.
  • Isse har combination barabar chance ke saath aata hai (Fisher-Yates).
function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

8start() — 12 cards banaoscript.js

  • Pehle sab reset: board khaali, first, moves sab zero.
  • [...EMOJI, ...EMOJI] — list ko do baar jodo (12 cards), phir shuffle.
  • Har emoji ke liye ek button. Emoji ko card.dataset.e me chhupa diya — screen par abhi nahi dikhega.
  • Click par flip(card).
function start() {
  board.innerHTML = '';
  first = null;
  locked = false;
  moves = 0;
  matched = 0;
  info.textContent = 'Moves: 0';
  shuffle([...EMOJI, ...EMOJI]).forEach((e) => {
    const card = document.createElement('button');
    card.dataset.e = e;
    card.addEventListener('click', () => flip(card));
    board.append(card);
  });
}

9flip() — jodi match?script.js

  • Guard: locked ho ya card pehle se palta ho to kuch mat karo.
  • Card palto: open class aur emoji dikhao.
  • Pehla card hai to yaad rakho (first = card) aur ruko.
  • Doosra card: moves++. Dono ka emoji barabar → dono done (green). Saari 6 jodi → jeet!
  • Barabar nahi → locked = true, aur setTimeout 700 ms baad dono ko wapas ulta karo aur unlock.
function flip(card) {
  if (locked || card.classList.contains('open')) return;
  card.classList.add('open');
  card.textContent = card.dataset.e;
  if (!first) {
    first = card;
    return;
  }
  moves++;
  info.textContent = 'Moves: ' + moves;
  if (first.dataset.e === card.dataset.e) {
    first.classList.add('done');
    card.classList.add('done');
    matched++;
    first = null;
    if (matched === EMOJI.length) {
      info.textContent = 'Jeet gaye! 🎉 ' + moves + ' moves';
    }
  } else {
    locked = true;
    setTimeout(() => {
      first.classList.remove('open');
      card.classList.remove('open');
      first.textContent = '';
      card.textContent = '';
      first = null;
      locked = false;
    }, 700);
  }
}

10Restart + shuruscript.js

  • Restart button seedha start chalata hai. Aakhri start() — page khulte hi game taiyar.
const restart = document.querySelector('#restart');
restart.addEventListener('click', start);
start();

Tumhara editor 💻

code isi device par save hota hai

Ab ise apna banao 🎨

Atak gaye? Notes padho 📚

HTML NotesCSS NotesJavaScript Notes

Aage kya?

DAY 1
Calculator
Grid layout, state, event delegation
Live ✓
DAY 2
Tic-Tac-Toe
Arrays, win logic, game state
Live ✓
DAY 3
Stopwatch
setInterval, time format, start / stop
Live ✓
DAY 4
Notes App
Textarea, localStorage, search
Live ✓
DAY 5
Expense Tracker
Forms, totals, array methods
Live ✓
DAY 7
Landing Page
Season 2 ke skills ek page me
Live ✓

Naya day aate hi reel aayegi — @codeyantra follow karo 🔔