Thakurayush124
1 year ago
parent
08b771c863
commit
b303f9586c
@ -0,0 +1,348 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Card Memory Game</title>
|
||||
<style>
|
||||
:root{ --bg:#0f1724; --card:#0b1220; --accent:#7c3aed; --glass: rgba(255,255,255,0.04); }
|
||||
*{box-sizing:border-box}
|
||||
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#071021 0%, #061225 60%); color:#e6eef8}
|
||||
.app{width:100%; max-width:1100px; margin:28px;}
|
||||
header{display:flex; gap:18px; align-items:center; justify-content:space-between}
|
||||
|
||||
.brand{display:flex; gap:14px; align-items:center}
|
||||
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#0ea5a2);display:flex;align-items:center;justify-content:center;font-weight:700}
|
||||
h1{font-size:20px;margin:0}
|
||||
p.lead{margin:0;color:#9fb0c8}
|
||||
|
||||
.controls{display:flex;gap:12px;align-items:center}
|
||||
select, button, input[type=number]{padding:8px 10px;border-radius:8px;border:0;background:var(--glass);color:inherit}
|
||||
button.primary{background:var(--accent); color:white; border:0; padding:10px 14px; cursor:pointer}
|
||||
.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06)}
|
||||
|
||||
.meta{display:flex;gap:14px;align-items:center;margin-top:16px}
|
||||
.meta .stat{background:rgba(255,255,255,0.03);padding:10px;border-radius:10px;min-width:120px;text-align:center}
|
||||
.meta .stat small{display:block;color:#9fb0c8}
|
||||
|
||||
main{margin-top:18px; display:grid; grid-template-columns: 1fr 320px; gap:18px}
|
||||
|
||||
/* Board */
|
||||
.board-wrap{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:14px}
|
||||
.board{display:grid; gap:12px; justify-content:center}
|
||||
|
||||
.card{width:100%; aspect-ratio:1/1; perspective:800px}
|
||||
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition: transform 350ms cubic-bezier(.2,.8,.2,1)}
|
||||
.card.flipped .card-inner{transform: rotateY(180deg)}
|
||||
.face{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
|
||||
.front{background:linear-gradient(180deg,#0b1220,#071020); color:#cfe9ff; font-size:28px}
|
||||
.back{background:linear-gradient(180deg,#fff 0%, #fff 1%); transform:rotateY(180deg); color:#071020; font-size:34px}
|
||||
|
||||
.side-panel{background:rgba(255,255,255,0.02); padding:18px; border-radius:14px; height:100%}
|
||||
.panel-section{margin-bottom:12px}
|
||||
.level-buttons{display:flex;gap:8px}
|
||||
.level-buttons button{flex:1}
|
||||
|
||||
.stats-list{display:grid;gap:8px}
|
||||
.stats-item{background:rgba(255,255,255,0.02); padding:10px;border-radius:8px}
|
||||
|
||||
footer{margin-top:16px;color:#7f98b1;font-size:13px}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width:900px){ main{grid-template-columns:1fr} .side-panel{order:2} }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<header>
|
||||
<div class="brand">
|
||||
<div class="logo">CM</div>
|
||||
<div>
|
||||
<h1>Card Memory Game</h1>
|
||||
<p class="lead">Find matching pairs — timer, difficulty levels and stats saved locally.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label>
|
||||
Difficulty
|
||||
<select id="difficulty">
|
||||
<option value="easy">Easy</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="hard">Hard</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Grid size
|
||||
<input id="gridSize" type="number" min="2" max="8" value="4" />
|
||||
</label>
|
||||
<button id="startBtn" class="primary">Start Game</button>
|
||||
<button id="resetStats" class="secondary" title="Clear stats">Reset Stats</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="meta">
|
||||
<div class="stat"><small>Elapsed</small><div id="elapsed">00:00</div></div>
|
||||
<div class="stat"><small>Time left</small><div id="timeLeft">—</div></div>
|
||||
<div class="stat"><small>Moves</small><div id="moves">0</div></div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="board-wrap">
|
||||
<div id="board" class="board"></div>
|
||||
</section>
|
||||
|
||||
<aside class="side-panel">
|
||||
<div class="panel-section">
|
||||
<h3>Controls</h3>
|
||||
<div style="margin-top:8px;display:flex;gap:8px">
|
||||
<button id="shuffleBtn" class="secondary">Shuffle</button>
|
||||
<button id="cheatBtn" class="secondary">Show / Hide</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h4>Difficulty presets</h4>
|
||||
<div class="level-buttons">
|
||||
<button data-level="easy">Easy</button>
|
||||
<button data-level="medium">Medium</button>
|
||||
<button data-level="hard">Hard</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h4>Stats</h4>
|
||||
<div class="stats-list" id="statsList">
|
||||
<!-- stat rows injected here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h4>How to play</h4>
|
||||
<p style="font-size:13px;color:#9fb0c8">Click Start → flip two cards. If they match they stay revealed. Finish before time runs out (hard mode).</p>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer>Built with HTML, CSS and vanilla JavaScript • Emoji icons used as card faces (no external images)</footer>
|
||||
</div>
|
||||
|
||||
<!-- Congrats modal (simple) -->
|
||||
<dialog id="congrats">
|
||||
<h3>Congratulations 🎉</h3>
|
||||
<p>You finished the game in <strong id="finalTime"></strong> with <span id="finalMoves"></span> moves.</p>
|
||||
<menu>
|
||||
<button id="playAgain">Play Again</button>
|
||||
<button id="closeModal">Close</button>
|
||||
</menu>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
// ======= Config & state ======
|
||||
const EMOJIS = ['🍎','🍌','🍇','🍓','🍒','🍍','🥝','🥑','🍑','🍋','🍉','🍊','🍐','🥥','🍈','🍏','🥕','🌽','🥔','🍆','🌶️','🍄','🥦','🥐'];
|
||||
|
||||
const difficultyPresets = {
|
||||
easy: { grid: 4, timeLimit: 120 },
|
||||
medium: { grid: 6, timeLimit: 90 },
|
||||
hard: { grid: 8, timeLimit: 60 }
|
||||
};
|
||||
|
||||
let state = {
|
||||
gridSize: 4,
|
||||
cards: [],
|
||||
first: null,
|
||||
second: null,
|
||||
moves: 0,
|
||||
matchesFound: 0,
|
||||
started: false,
|
||||
elapsed: 0,
|
||||
timeLeft: null,
|
||||
timerInterval: null,
|
||||
countdownInterval: null,
|
||||
difficulty: 'easy'
|
||||
};
|
||||
|
||||
// ======= DOM ======
|
||||
const boardEl = document.getElementById('board');
|
||||
const startBtn = document.getElementById('startBtn');
|
||||
const difficultyEl = document.getElementById('difficulty');
|
||||
const gridSizeEl = document.getElementById('gridSize');
|
||||
const elapsedEl = document.getElementById('elapsed');
|
||||
const timeLeftEl = document.getElementById('timeLeft');
|
||||
const movesEl = document.getElementById('moves');
|
||||
const statsListEl = document.getElementById('statsList');
|
||||
const congratsDialog = document.getElementById('congrats');
|
||||
const finalTimeEl = document.getElementById('finalTime');
|
||||
const finalMovesEl = document.getElementById('finalMoves');
|
||||
const playAgainBtn = document.getElementById('playAgain');
|
||||
const closeModalBtn = document.getElementById('closeModal');
|
||||
const shuffleBtn = document.getElementById('shuffleBtn');
|
||||
const cheatBtn = document.getElementById('cheatBtn');
|
||||
const resetStatsBtn = document.getElementById('resetStats');
|
||||
|
||||
// ======= Local storage for stats ======
|
||||
const STATS_KEY = 'cmgame_stats_v1';
|
||||
function getStats(){
|
||||
try{ return JSON.parse(localStorage.getItem(STATS_KEY)) || defaultStats(); }catch(e){ return defaultStats(); }
|
||||
}
|
||||
function defaultStats(){ return { easy:{wins:0,losses:0,bestTime:null}, medium:{wins:0,losses:0,bestTime:null}, hard:{wins:0,losses:0,bestTime:null} } }
|
||||
function saveStats(s){ localStorage.setItem(STATS_KEY, JSON.stringify(s)); renderStats(); }
|
||||
|
||||
function renderStats(){
|
||||
const s = getStats(); statsListEl.innerHTML='';
|
||||
for(const level of ['easy','medium','hard']){
|
||||
const it = document.createElement('div'); it.className='stats-item';
|
||||
it.innerHTML = `<strong>${level.toUpperCase()}</strong>
|
||||
<div style="font-size:13px;color:#9fb0c8;margin-top:6px">Wins: ${s[level].wins} • Losses: ${s[level].losses}<br>Best: ${s[level].bestTime ? formatTime(s[level].bestTime) : '—'}</div>`;
|
||||
statsListEl.appendChild(it);
|
||||
}
|
||||
}
|
||||
|
||||
// ======= Utilities ======
|
||||
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 formatTime(seconds){ const m=Math.floor(seconds/60); const s=seconds%60; return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}` }
|
||||
|
||||
// ======= Game setup ======
|
||||
function buildDeck(gridSize){
|
||||
const total = gridSize*gridSize;
|
||||
if(total % 2 !== 0) throw new Error('Grid must have even number of cells');
|
||||
const pairCount = total/2;
|
||||
const pool = shuffle(EMOJIS.slice());
|
||||
const selected = pool.slice(0,pairCount);
|
||||
const deck = shuffle([...selected, ...selected]);
|
||||
return deck.map((face, idx)=>({id:idx, face, matched:false, revealed:false}));
|
||||
}
|
||||
|
||||
function renderBoard(){
|
||||
const g = state.gridSize;
|
||||
boardEl.style.gridTemplateColumns = `repeat(${g}, minmax(60px, 1fr))`;
|
||||
boardEl.innerHTML='';
|
||||
state.cards.forEach(card=>{
|
||||
const c = document.createElement('div'); c.className='card' + (card.revealed || card.matched ? ' flipped': ''); c.dataset.id = card.id;
|
||||
c.innerHTML = `
|
||||
<div class="card-inner">
|
||||
<div class="face front">?</div>
|
||||
<div class="face back">${card.face}</div>
|
||||
</div>
|
||||
`;
|
||||
c.addEventListener('click', ()=> onCardClick(card.id));
|
||||
boardEl.appendChild(c);
|
||||
});
|
||||
}
|
||||
|
||||
// ======= Game logic ======
|
||||
function onCardClick(id){
|
||||
if(!state.started) return; // ignore if not started
|
||||
const card = state.cards.find(c=>c.id==id);
|
||||
if(!card || card.revealed || card.matched) return;
|
||||
// reveal
|
||||
card.revealed = true; renderBoard();
|
||||
if(!state.first){ state.first = card; return }
|
||||
if(state.first && !state.second && card.id !== state.first.id){ state.second = card; state.moves++; movesEl.textContent = state.moves; checkForMatch(); }
|
||||
}
|
||||
|
||||
function checkForMatch(){
|
||||
if(!state.first || !state.second) return;
|
||||
if(state.first.face === state.second.face){
|
||||
// match
|
||||
state.first.matched = true; state.second.matched = true; state.matchesFound +=2;
|
||||
state.first = null; state.second = null;
|
||||
renderBoard();
|
||||
if(state.matchesFound === state.cards.length) winGame();
|
||||
} else {
|
||||
// no match -> flip back after short delay
|
||||
const f1 = state.first.id, f2 = state.second.id;
|
||||
setTimeout(()=>{
|
||||
const a = state.cards.find(c=>c.id===f1);
|
||||
const b = state.cards.find(c=>c.id===f2);
|
||||
if(a) a.revealed=false; if(b) b.revealed=false; state.first=null; state.second=null; renderBoard();
|
||||
}, 700);
|
||||
}
|
||||
}
|
||||
|
||||
// ======= Timers ======
|
||||
function startTimers(){
|
||||
// elapsed
|
||||
clearInterval(state.timerInterval); state.elapsed = 0; elapsedEl.textContent = '00:00';
|
||||
state.timerInterval = setInterval(()=>{ state.elapsed++; elapsedEl.textContent = formatTime(state.elapsed); }, 1000);
|
||||
// countdown
|
||||
if(state.timeLeft !== null){ clearInterval(state.countdownInterval); timeLeftEl.textContent = formatTime(state.timeLeft);
|
||||
state.countdownInterval = setInterval(()=>{
|
||||
state.timeLeft--; timeLeftEl.textContent = formatTime(Math.max(0,state.timeLeft));
|
||||
if(state.timeLeft <= 0){ clearInterval(state.countdownInterval); loseGame(); }
|
||||
}, 1000);
|
||||
} else { timeLeftEl.textContent = '—' }
|
||||
}
|
||||
function stopTimers(){ clearInterval(state.timerInterval); clearInterval(state.countdownInterval); }
|
||||
|
||||
// ======= Start / End ======
|
||||
function startGame(){
|
||||
// read inputs
|
||||
const preset = difficultyEl.value;
|
||||
const grid = parseInt(gridSizeEl.value,10) || difficultyPresets[preset].grid;
|
||||
if((grid*grid) % 2 !== 0){ alert('Grid must contain an even number of cells. Choose an even size.'); return }
|
||||
state.difficulty = preset;
|
||||
state.gridSize = grid;
|
||||
state.cards = buildDeck(grid);
|
||||
state.first = state.second = null; state.moves=0; state.matchesFound=0; state.started=true; state.elapsed=0;
|
||||
|
||||
// time limit based on difficulty: if grid too small, allow more time
|
||||
const baseLimit = difficultyPresets[preset]?.timeLimit ?? null;
|
||||
state.timeLeft = baseLimit ? Math.max(10, Math.floor(baseLimit * (grid/ difficultyPresets[preset].grid))) : null;
|
||||
|
||||
movesEl.textContent = state.moves;
|
||||
renderBoard(); startTimers();
|
||||
}
|
||||
|
||||
function winGame(){ stopTimers(); state.started=false; finalTimeEl.textContent = formatTime(state.elapsed); finalMovesEl.textContent = state.moves; congratsDialog.showModal();
|
||||
// save stats
|
||||
const s = getStats(); s[state.difficulty].wins += 1; if(!s[state.difficulty].bestTime || state.elapsed < s[state.difficulty].bestTime) s[state.difficulty].bestTime = state.elapsed; saveStats(s);
|
||||
}
|
||||
function loseGame(){ stopTimers(); state.started=false; alert('Time is up — you lost.'); const s = getStats(); s[state.difficulty].losses += 1; saveStats(s); }
|
||||
|
||||
// ======= UI bindings ======
|
||||
startBtn.addEventListener('click', ()=> startGame());
|
||||
|
||||
difficultyEl.addEventListener('change', e=>{
|
||||
// change grid size default to preset if user hasn't modified
|
||||
const val = e.target.value; const preset = difficultyPresets[val]; if(preset){ gridSizeEl.value = preset.grid; }
|
||||
});
|
||||
|
||||
document.querySelectorAll('.level-buttons button').forEach(b=> b.addEventListener('click', ()=>{ difficultyEl.value = b.dataset.level; difficultyEl.dispatchEvent(new Event('change')); }));
|
||||
|
||||
playAgainBtn.addEventListener('click', ()=>{ congratsDialog.close(); startGame(); });
|
||||
closeModalBtn.addEventListener('click', ()=> congratsDialog.close());
|
||||
|
||||
shuffleBtn.addEventListener('click', ()=>{ if(state.started) return; if(state.cards.length){ state.cards = shuffle(state.cards); renderBoard(); } });
|
||||
cheatBtn.addEventListener('click', ()=>{
|
||||
// toggle show all briefly
|
||||
if(!state.cards.length) return;
|
||||
const anyHidden = state.cards.some(c=>!c.revealed && !c.matched);
|
||||
if(anyHidden){ state.cards.forEach(c=>{ if(!c.matched) c.revealed = true }); renderBoard(); setTimeout(()=>{ state.cards.forEach(c=>{ if(!c.matched) c.revealed=false }); renderBoard(); }, 900); }
|
||||
else{ state.cards.forEach(c=>{ if(!c.matched) c.revealed=false }); renderBoard(); }
|
||||
});
|
||||
|
||||
resetStatsBtn.addEventListener('click', ()=>{ if(confirm('Clear saved stats?')){ localStorage.removeItem(STATS_KEY); renderStats(); } });
|
||||
|
||||
// persist grid size to input local memory (optional)
|
||||
|
||||
// init
|
||||
(function init(){
|
||||
renderStats(); // set default grid by difficulty
|
||||
gridSizeEl.value = difficultyPresets[difficultyEl.value].grid;
|
||||
// ensure initial empty board
|
||||
state.gridSize = parseInt(gridSizeEl.value,10);
|
||||
state.cards = buildDeck(state.gridSize);
|
||||
state.cards.forEach(c=>c.revealed=false);
|
||||
renderBoard();
|
||||
})();
|
||||
|
||||
// small accessibility: allow closing dialog with escape
|
||||
window.addEventListener('keydown', e=>{ if(e.key==='Escape' && congratsDialog.open) congratsDialog.close(); })
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue