#dz-a2-game{font-family:Arial,sans-serif;background:linear-gradient(145deg,#111a43,#293f78);color:#fff;padding:18px;border-radius:18px;max-width:580px;margin:20px auto;text-align:center;box-sizing:border-box}
#dz-a2-game *{box-sizing:border-box}
#dz-a2-game h2{color:#ffdf62;margin:0 0 8px}
#dz-a2-game .stats{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:12px 0}
#dz-a2-game .stats span{background:#ffffff20;border-radius:9px;padding:9px 12px;font-weight:bold}
#dz-a2-game canvas{display:block;width:100%;max-width:500px;height:auto;margin:auto;border:3px solid #91aaff;border-radius:12px;background:#0b1230}
#dz-a2-game .choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:500px;margin:14px auto}
#dz-a2-game button{border:0;border-radius:10px;padding:13px 4px;font-size:19px;font-weight:bold;cursor:pointer;touch-action:manipulation}
#dz-a2-game [data-art="DER"]{background:#48caff;color:#102044}
#dz-a2-game [data-art="DIE"]{background:#ff719b;color:#38132a}
#dz-a2-game [data-art="DAS"]{background:#bd96ff;color:#251444}
#dz-a2-game .start{background:#55e3b2;color:#102044;font-size:16px;padding:12px 18px}
#dz-a2-game .message{min-height:42px;font-weight:bold;line-height:1.5}
#dz-a2-game .hint{font-size:13px;line-height:1.6;color:#e0e7ff}
🎯 DEUTSCHZENTRUM · ARTIKEL A2
Învață articolele germane prin joc!
⭐ Scor: 0
❤️ Vieți: 5
📚 Cuvinte: 0
Apasă „ÎNCEPE JOCUL”!
Alege articolul corect înainte ca substantivul să ajungă jos. După fiecare răspuns vei vedea și traducerea în română.
(()=>{ const root=document.getElementById('dz-a2-game'); if(root.dataset.ready)return; root.dataset.ready='1'; const canvas=root.querySelector('#dza-canvas'); const ctx=canvas.getContext('2d'); const W=500,H=400; const words=[ ['Beruf','DER','profesie'],['Arbeitsplatz','DER','loc de muncă'], ['Kollege','DER','coleg'],['Termin','DER','programare'], ['Bahnhof','DER','gară'],['Führerschein','DER','permis de conducere'], ['Supermarkt','DER','supermarket'],['Kühlschrank','DER','frigider'], ['Schlüssel','DER','cheie'],['Nachbar','DER','vecin'], ['Wohnung','DIE','locuință'],['Arbeitszeit','DIE','durată de lucru'], ['Prüfung','DIE','examen'],['Rechnung','DIE','factură'], ['Gesundheit','DIE','sănătate'],['Haltestelle','DIE','stație'], ['Einladung','DIE','invitație'],['Entschuldigung','DIE','scuză'], ['Erfahrung','DIE','experiență'],['Umgebung','DIE','împrejurimi'], ['Gespräch','DAS','conversație'],['Ergebnis','DAS','rezultat'], ['Geschäft','DAS','magazin'],['Frühstück','DAS','mic dejun'], ['Krankenhaus','DAS','spital'],['Verkehrsmittel','DAS','mijloc de transport'], ['Reisebüro','DAS','agenție de turism'],['Gemüse','DAS','legume'], ['Wetter','DAS','vreme'],['Gepäck','DAS','bagaj'], ['Angebot','DAS','ofertă'],['Konto','DAS','cont'], ['Abenteuer','DAS','aventură'],['Ausland','DAS','străinătate'], ['Bewerbung','DIE','candidatură'],['Versicherung','DIE','asigurare'], ['Besprechung','DIE','ședință'],['Bäckerei','DIE','brutărie'], ['Unterschied','DER','diferență'],['Vorschlag','DER','propunere'], ['Unternehmen','DAS','întreprindere'],['Entscheidung','DIE','decizie'], ['Verkehr','DER','trafic'],['Urlaub','DER','concediu'], ['Erlaubnis','DIE','permisiune'],['Einkommen','DAS','venit'], ['Aufgabe','DIE','sarcină'],['Vereinbarung','DIE','înțelegere'] ]; const colors={DER:'#48caff',DIE:'#ff719b',DAS:'#bd96ff'}; let current=null,used=[],score=0,lives=5,count=0; let running=false,falling=false,y=55,raf=null,last=0; let message='',messageUntil=0,showTranslation=false,roundToken=0; function stats(){ root.querySelector('#dza-score').textContent=score; root.querySelector('#dza-lives').textContent=lives; root.querySelector('#dza-count').textContent=count; } function roundRect(x,y,w,h,r,fill,stroke){ ctx.beginPath();ctx.roundRect(x,y,w,h,r); if(fill)ctx.fill();if(stroke)ctx.stroke(); } function draw(){ ctx.clearRect(0,0,W,H); const bg=ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#101a42');bg.addColorStop(1,'#1c3266'); ctx.fillStyle=bg;ctx.fillRect(0,0,W,H); ctx.fillStyle='#ffffff15'; for(let i=0;i<24;i++){ ctx.beginPath();ctx.arc((i*83)%W,(i*57)%H,2,0,Math.PI*2);ctx.fill(); } ctx.textAlign='center';ctx.fillStyle='#dce6ff';ctx.font='bold 14px Arial'; ctx.fillText('NIVEL A2 · ALEGE ARTICOLUL',W/2,28); ctx.strokeStyle='#ffdf62';ctx.lineWidth=3;ctx.setLineDash([7,7]); ctx.beginPath();ctx.moveTo(35,315);ctx.lineTo(W-35,315);ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle='#dce6ff';ctx.font='13px Arial'; ctx.fillText('ZONA DE SOSIRE',W/2,339); if(current){ ctx.shadowColor=colors[current[1]];ctx.shadowBlur=falling?15:0; ctx.fillStyle=colors[current[1]]; roundRect(55,y,390,82,16,true,false); ctx.shadowBlur=0;ctx.fillStyle='#132044'; ctx.font='bold 28px Arial';ctx.fillText(current[0],W/2,y+36); ctx.font='16px Arial'; ctx.fillText(showTranslation?current[2]:'Ce articol alegi?',W/2,y+62); } if(message&&performance.now()=words.length)used=[]; const pool=words.filter(w=>!used.includes(w[0])); current=pool[Math.floor(Math.random()*pool.length)]; used.push(current[0]); y=55;falling=true;showTranslation=false;last=0; roundToken++; draw(); } function finish(){ running=false;falling=false; if(raf)cancelAnimationFrame(raf); raf=null; root.querySelector('#dza-message').textContent='Joc terminat! Scor final: '+score+'. Apasă „Joacă din nou”.'; message='FELICITĂRI!'; messageUntil=performance.now()+100000; draw(); } function tick(time=0){ if(!running){raf=null;return;} const dt=Math.min(40,time-(last||time));last=time; if(falling){ y+=dt*0.055; if(y>=230){ y=230;falling=false;lives--;stats(); root.querySelector('#dza-message').textContent='Ai ratat! Era '+current[1]+' '+current[0]+' — '+current[2]+'.'; message='PREA TÂRZIU!'; messageUntil=performance.now()+800; const token=roundToken; if(lives{if(running&&!falling&&token===roundToken)nextWord();},1000); } } draw(); raf=requestAnimationFrame(tick); } function choose(art){ if(!running||!falling||!current)return; falling=false; const token=roundToken; if(art===current[1]){ score+=10;count++; message='RICHTIG! +10'; root.querySelector('#dza-message').textContent='Corect: '+current[1]+' '+current[0]+' = '+current[2]+'.'; }else{ score=Math.max(0,score-2);lives--; message='ARTICOLUL: '+current[1]; root.querySelector('#dza-message').textContent='Răspuns corect: '+current[1]+' '+current[0]+' — '+current[2]+'.'; } showTranslation=true;y=230; stats();messageUntil=performance.now()+900;draw(); if(lives{ if(running&&!falling&&token===roundToken)nextWord(); },1100); } root.querySelectorAll('[data-art]').forEach(btn=>{ btn.addEventListener('click',()=>choose(btn.dataset.art)); }); root.querySelector('#dza-start').addEventListener('click',()=>{ if(raf)cancelAnimationFrame(raf); roundToken++;score=0;lives=5;count=0;used=[]; running=true;falling=false;message='';stats(); root.querySelector('#dza-message').textContent='Primul cuvânt A2 vine de sus!'; nextWord();raf=requestAnimationFrame(tick); }); document.addEventListener('keydown',e=>{ if(!root.isConnected)return; if(e.key==='1')choose('DER'); if(e.key==='2')choose('DIE'); if(e.key==='3')choose('DAS'); }); stats();draw(); })();