Jeu de mémoire à retourner des cartes pour la soirée en famille
Réalisez un jeu de mémoire à retournement dans un contexte de soirée en famille : contenu réel, contrôles utilisables, retour d’état clair et mise en page adaptative selon la taille.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jeu de mémoire à retourner des cartes pour la soirée en famille</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.panel{padding:18px;border:2px solid var(--line);border-radius:26px;box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 35%,transparent)}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.action{padding:12px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--ink);font-weight:800}.action:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{text-align:center;min-height:26px;margin-top:18px}.metric{text-align:center;font-size:clamp(34px,8vw,70px);font-weight:900}.muted{text-align:center;opacity:.7}.meter{height:14px;padding:2px;border:2px solid var(--ink);border-radius:999px}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--secondary)}.chip{padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.mini{max-width:560px;margin:auto;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.memory-grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:14px;color:var(--paper);background:var(--ink);font-size:26px}.memory-grid button.is-open{color:var(--ink);background:var(--secondary)}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / Jeu de mémoire à cartes retournées / BEGINNER</span><h1>Jeu de mémoire à retourner des cartes pour la soirée en famille</h1><p class="intro">Réalisez un jeu de mémoire à retournement dans un contexte de soirée en famille : contenu réel, contrôles utilisables, retour d’état clair et mise en page adaptative selon la taille.</p></div><span class="scenario">Soirée en famille</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone d’interaction du jeu de mémoire à cartes retournées Soirée en famille"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Nuit en famille DISPATCH</span><h2>pupitre de gestion des tours en famille</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Tour des aînés</option><option>Tour parent-enfant</option><option>Tour de famille</option></select></label><label>Nombre de participants<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="24"><span>personne</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Commencer le jeu</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Tour des aînés</option><option value="2">Tour parent-enfant</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:mini-apps-games-memory-match --><div class="mini memory"><span class="eyebrow">MEMORY</span><h2>Jeu de mémoire à cartes retournées</h2><div class="memory-grid"><button type="button" data-symbol="山" aria-label="Retournez la 1e carte" data-core-bridge="mini-apps-games-memory-match">?</button><button type="button" data-symbol="山" aria-label="Retourner la 2e carte">?</button><button type="button" data-symbol="海" aria-label="Retournez la 3e carte">?</button><button type="button" data-symbol="海" aria-label="Retourner la 4e carte">?</button><button type="button" data-symbol="云" aria-label="Retourner la 5e carte">?</button><button type="button" data-symbol="云" aria-label="Retournez la 6 carte">?</button><button type="button" data-symbol="风" aria-label="Retournez la carte n°7">?</button><button type="button" data-symbol="风" aria-label="Retournez la 8 carte">?</button></div><button id="memoryReset" class="action" type="button">Recommencer</button></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Soirée en famille FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:mini-apps-games-memory-match */
let open=[]; document.querySelectorAll('.memory-grid button').forEach(card=>card.addEventListener('click',()=>{if(card.disabled||open.length===2)return;card.textContent=card.dataset.symbol;card.classList.add('is-open');open.push(card);if(open.length===2){const match=open[0].dataset.symbol===open[1].dataset.symbol;if(match){open.forEach(item=>item.disabled=true);open=[];announce('Paire réussie');}else{setTimeout(()=>{open.forEach(item=>{item.textContent='?';item.classList.remove('is-open');});open=[];announce('Pas encore apparié, veuillez continuer');},500);}}}));document.querySelector('#memoryReset').addEventListener('click',()=>{document.querySelectorAll('.memory-grid button').forEach(card=>{card.disabled=false;card.textContent='?';card.classList.remove('is-open');});open=[];announce('Le jeu de cartes mémoire a été réinitialisé');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"mini-apps-games-memory-match","selector":"[data-core-bridge=\"mini-apps-games-memory-match\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Tour des aînés","amount":12,"priority":"normal","touches":0}],["2",{"label":"Tour parent-enfant","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' personne · '+bridge.summary;announce('Tâche en cours pour le tour en famille :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' personne · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>