diff --git a/index.html b/index.html index be4a660..cd5ec80 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,8 @@ body{font-family:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',sans-serif;col #top>*:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(61,61,61,.8)} #screen{position:fixed;inset:0;overflow:hidden} .big{font-size:clamp(56px,15vw,150px);line-height:1;text-align:center;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))} +.wig{animation:wig 1s ease-in-out infinite} +@keyframes wig{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}} .bigBtn{background:linear-gradient(#ffe27a,#ffca28);color:#4a3400;border:4px solid #3d3d3d;border-radius:999px;font-size:clamp(24px,6.5vw,58px);font-weight:800;padding:clamp(14px,2.4vw,24px) clamp(38px,7vw,72px);cursor:pointer;box-shadow:0 8px 0 rgba(61,61,61,.9),0 18px 26px rgba(0,0,0,.14);transition:transform .08s;text-align:center} .bigBtn:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(61,61,61,.9)} .card{display:grid;place-items:center;font-size:clamp(44px,11vw,110px);background:#fff;border:4px solid #3d3d3d;border-radius:26px;aspect-ratio:1;width:clamp(84px,20vw,210px);cursor:pointer;box-shadow:0 6px 0 rgba(61,61,61,.85),0 16px 22px rgba(0,0,0,.1);transition:transform .1s} @@ -116,7 +118,7 @@ function stars(day,n){S.stars[day]=Math.max(S.stars[day]||0,n);save();updateStar const starStr=n=>'★'.repeat(n||0)+'☆'.repeat(3-(n||0)); function bigBtn(txt,cb){const b=document.createElement('div');b.className='bigBtn';b.innerHTML=txt;b.onclick=()=>{ac();tone(600,.08,'square',.05);cb&&cb(b)};return b} function card(e,cb,extra){const c=document.createElement('div');c.className='card';c.innerHTML=e+(extra||'');c.onclick=()=>{ac();tone(650,.08,'square',.05);cb&&cb(c)};return c} -function gate(emoji,title,fn){const st=stage();st.innerHTML=`
${emoji}
${title}
Clique no botão para começar
`;st.querySelector('.gate').appendChild(bigBtn('▶ Vamos!',fn))} +function gate(emoji,title,fn){const st=stage();st.innerHTML=`
${emoji}
${title}
Vamos brincar!
`;say(title);let t=setTimeout(started,2200);function started(){clearTimeout(t);if(!st.querySelector('.gate'))return;fn()}st.addEventListener('pointerdown',started)} function shakeWrong(el){buzz();shake(el)} // ===================== motor de balões ===================== @@ -141,6 +143,8 @@ const THEMES=[ {name:'Terra dos Dinossauros',emoji:'🦖',pool:['🦕','🦖','🦖','🥚','🦴','🌋','🌿','🦕','🌴','🦖']}, {name:'Esquadrilha de Aviões',emoji:'✈️',pool:['✈️','🛩️','🚁','🛫','🛬','☁️','🪂','🚀','✈️','🛸']}]; const themeOf=d=>THEMES[Math.floor((d-1)/5)%3]; +const thingS=d=>['carrinho','dinossauro','aviãozinho'][Math.floor((d-1)/5)%3]; +const thingP=d=>['carrinhos','dinossauros','aviõezinhos'][Math.floor((d-1)/5)%3]; // ===================== jogos ===================== const MECH={ @@ -157,6 +161,7 @@ const slots=target.map(l=>{const s=document.createElement('div');s.className='sl const kb=st.querySelector('#kb');kb.style.cssText='width:min(96vw,1100px);display:grid;grid-template-columns:repeat(13,1fr);gap:clamp(6px,1vw,10px)'; 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(L=>{const b=document.createElement('div');b.style.cssText=`height:${SZ(9,80)};display:grid;place-items:center;font-size:${SZ(4.6,42)};background:#fff;border:3px solid #3d3d3d;border-radius:12px;cursor:pointer;box-shadow:0 4px 0 rgba(61,61,61,.8);line-height:1;padding:0`;b.textContent=L;b.onclick=()=>p(L,b);kb.appendChild(b)}); addEventListener('keydown',e=>p(String(e.key).toUpperCase())); +say('Escreva seu nome!'); function p(L,el){if(!/^[A-Z]$/.test(L)||i>=target.length)return;ac();if(L===target[i]){slots[i].textContent=L;slots[i].classList.add('match');tone(600+i*60,.15,'triangle',.12);i++;if(i===target.length){stars(d,3);setTimeout(()=>{st.innerHTML='';celebrate()},500)}}else shakeWrong(el||kb)} }, // 2 — balões com letras do nome @@ -170,7 +175,7 @@ let hits=0,done=false; floater(items,(x,b)=>{if(done)return;if(x.k){hits++;tone(700+hits*60,.2,'triangle',.15);if(hits>=2){done=true;r++;setTimeout(round,700)}}else shakeWrong(b)},$('#balloons'))} round()}, // 3 — ache a letra -achaLetra(d){const rounds=[...(S.name||'PEDRO').replace(/\s/g,'').toUpperCase().split('')].concat(S.family.filter(f=>f.trim()).map(f=>f.trim()[0].toUpperCase()));let i=0; +achaLetra(d){const rounds=[...new Set([...(S.name||'PEDRO').replace(/\s/g,'').toUpperCase().split('')].concat(S.family.filter(f=>f.trim()).map(f=>f.trim()[0].toUpperCase())))];let i=0; function rnd(){if(i>=rounds.length){stars(d,3);celebrate();return}const L=rounds[i];say(`Ache a letra ${L}`);toast(`Ache a letra: ${L}`); const st=stage();st.innerHTML='';const others=shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').filter(x=>x!==L)).slice(0,2); const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center';st.appendChild(row); @@ -197,12 +202,12 @@ const st=stage();st.innerHTML='';const row=document.createElement('div');row.cla shuffle(AN).forEach(([e2,c2])=>row.appendChild(card(`${e2}`,el=>{if(c2===c){say(s);POP(700);i++;setTimeout(rnd,1200)}else shakeWrong(el)})))} rnd()}, // 8 — memória -memoria(d){const T=themeOf(d);const pairs=shuffle([...new Set(T.pool)]).slice(0,3);const deck=shuffle([...pairs,...pairs].map(e=>({e,flip:false})));let open=[],found=0; +memoria(d){const T=themeOf(d);const pairs=shuffle([...new Set(T.pool)]).slice(0,3);const deck=shuffle([...pairs,...pairs].map(e=>({e,flip:false})));let open=[],found=0;say('Encontre os pares iguais!'); const st=stage();st.innerHTML='';const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center;gap:3vw';st.appendChild(row); deck.forEach(p=>{const c=document.createElement('div');c.className='card';c.style.width=SZ(24,240);c.textContent='❓';c.onclick=()=>{if(c.textContent!=='❓'||open.length===2)return;ac();c.textContent=p.e;open.push([p,c]); if(open.length===2){const[a,b]=open;open=[];if(a[0].e===b[0].e){a[1].style.background='#c8f7c5';b[1].style.background='#c8f7c5';tone(700,.2,'triangle',.12);found++;if(found===3){stars(d,3);setTimeout(celebrate,500)}}else setTimeout(()=>{a[1].textContent='❓';b[1].textContent='❓'},900)}};row.appendChild(c)})}, // 9 — desenhar -desenho(d){const st=stage();st.innerHTML='
✏️ Desenhe com o mouse!
'; +desenho(d){const st=stage();st.innerHTML='
✏️ Desenhe com o mouse!
';say('Desenhe com o mouse!'); const c=document.createElement('canvas');c.style.cssText='position:absolute;inset:8vh 0 0 0;width:100%;height:92vh;cursor:crosshair';st.appendChild(c);c.width=innerWidth;c.height=innerHeight*0.92;c.style.touchAction='none'; const g=c.getContext('2d');let brush=null;const COL=['#e53935','#1e88e5','#43a047','#fdd835','#8e24aa'];const STAMP=['⭐','❤️','🌸','🎈']; const bar=document.createElement('div');bar.className='row';bar.style.cssText='position:fixed;bottom:1vh;left:50%;transform:translateX(-50%);z-index:30'; @@ -221,7 +226,7 @@ conta(d){const n=2+Math.floor(Math.random()*4);let count=0;gate('🫧',`Estoure // 11 — quebra-cabeça puzzle(d){const T=themeOf(d);const parts=shuffle([...new Set(T.pool)]).slice(0,4);gate('🧩','Monte o quebra-cabeça!',()=>tapMatch(parts.map(p=>({e:p,k:p})),parts.map(p=>({e:'❓',k:p})),()=>{stars(d,3);setTimeout(celebrate,400)}))}, // 12 — cesta -cesta(d){const T=themeOf(d);let got=0;gate('🧺','Pegue os bichinhos que caem!',()=>{ +cesta(d){const T=themeOf(d);let got=0;gate('🧺',`Pegue os ${thingP(d)} que caem!`,()=>{ const st=stage();st.innerHTML=''; const bas=document.createElement('div');bas.className='basket';bas.textContent='🧺';st.appendChild(bas); const move=e=>{bas.style.left=Math.min(90,Math.max(5,e.clientX/innerWidth*100))+'vw'}; @@ -233,21 +238,21 @@ if(r.bottom>innerHeight*.88){it2.remove();clearInterval(ck);if(!good){buzz();toa else if(r.leftb.left&&r.bottom>b.top&&r.bottomit2.remove(),4500)},900)})}, // 13 — som da letra -somLetra(d){const letras=[...(S.name||'PEDRO').replace(/\s/g,'').toUpperCase().split('')].concat(S.family.filter(f=>f.trim()).map(f=>f.trim()[0].toUpperCase()));let i=0; +somLetra(d){const letras=[...new Set([...(S.name||'PEDRO').replace(/\s/g,'').toUpperCase().split('')].concat(S.family.filter(f=>f.trim()).map(f=>f.trim()[0].toUpperCase())))];let i=0; function rnd(){if(i>=letras.length){stars(d,3);celebrate();return}const L=letras[i];say(L); const st=stage();st.innerHTML='';const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center';st.appendChild(row); shuffle(letras).slice(0,3).concat([L]).forEach(x=>row.appendChild(card(`${x}`,c=>{if(x===L){POP(700);i++;setTimeout(rnd,800)}else shakeWrong(c)})))} setTimeout(rnd,600)}, // 14 — piano piano(d){const N=[[261,'Dó','#ef5350'],[293,'Ré','#ff9800'],[329,'Mi','#ffd835'],[349,'Fá','#aed581'],[392,'Sol','#4fc3f7'],[440,'Lá','#9575cd'],[494,'Si','#f06292'],[523,'Dó','#f44336']]; -const st=stage();st.innerHTML='
🎹 Toque o piano!
'; +const st=stage();st.innerHTML='
🎹 Toque o piano!
';say('Toque o piano!'); const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center;padding:0 2vw';st.appendChild(row); N.forEach(([f,nm,col])=>{const k=document.createElement('div');k.style.cssText=`width:${SZ(11,110)};height:${SZH(34,320)};background:${col};border:5px solid #333;border-radius:14px;cursor:pointer;box-shadow:0 6px 0 #999;display:grid;place-items:center;font-size:${SZ(4,40)};font-weight:800;color:#333`; k.innerHTML=nm;k.onclick=()=>{ac();tone(f,.6,'triangle',.2);say(nm)};row.appendChild(k)}); stars(d,1)}, // 15 — pintar pintar(d){const COL=['#e53935','#1e88e5','#43a047','#fdd835','#8e24aa','#ff7043'];let sel=null; -const st=stage();st.innerHTML='
🖌️ Pinte o desenho!
'; +const st=stage();st.innerHTML='
🖌️ Pinte o desenho!
';say('Pinte o desenho!'); const box=document.createElement('div');box.style.cssText='position:absolute;inset:16vh 3vw 14vh;border:6px solid #333;border-radius:20px;background:#fff;overflow:hidden'; const regions=[['sky','#cfe8ff',{left:'0',top:'0',right:'0',height:'45%'}],['sun','#ffe082',{left:'8%',top:'4%',width:'20%',height:'20%',borderRadius:'50%'}],['roof','#d7ccc8',{left:'12%',bottom:'20%',width:'40%',height:'32%',clipPath:'polygon(0 100%,50% 0,100% 100%)'}],['wall','#f5f5f5',{left:'12%',bottom:'0',width:'40%',height:'22%'}],['grass','#e8f5e9',{left:'0',bottom:'0',right:'0',height:'12%'}]]; regions.forEach(([name,col,pos])=>{const r=document.createElement('div');r.style.cssText=Object.entries(pos).map(([k,v])=>k+':'+v).join(';');r.style.background=col;r.style.border='2px solid #bbb';r.dataset.c=col;r.onclick=()=>{if(!sel){shakeWrong(r);return}ac();r.style.background=sel;r.dataset.c=sel;tone(600,.1,'triangle',.1)};box.appendChild(r)});st.appendChild(box); @@ -256,7 +261,7 @@ COL.forEach(col=>{const b=card(``, bar.appendChild(bigBtn('🎉',()=>{stars(d,3);celebrate()}));st.appendChild(bar)}, // 16 — tempo tempo(d){const W=[['☀️','Sol','Que sol lindo e quentinho!',800],[['🌧️'],'Chuva','Está chovendo... plim plim!',400],[['❄️'],'Neve','Nevou! Brrr, que frio!',300],[['🌈'],'Arco-íris','Que arco-íris colorido!',600]]; -const st=stage();st.innerHTML='
☀️ Qual é o tempo hoje?
'; +const st=stage();st.innerHTML='
☀️ Qual é o tempo hoje?
';say('Qual é o tempo hoje?'); const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center';st.appendChild(row); W.forEach(([e,nm,fr,sf])=>{const c=card(e.join(''),x=>{say(fr);tone(sf,.4,'sine',.12);x.style.transform='scale(1.2)';setTimeout(()=>x.style.transform='',600)});c.style.fontSize=SZ(10,100);row.appendChild(c)}); stars(d,1)}, @@ -276,7 +281,7 @@ shuffle([0,0,0,1]).forEach(isOdd=>{const c=document.createElement('div');c.class rnd()}, // 19 — sequência (simon) sequencia(d){const COL=[['🔴',330],['🟡',262],['🟢',392],['🔵',440]];let seq=[],i=0,player=false; -const st=stage();st.innerHTML='
🎯 Repita a sequência!
'; +const st=stage();st.innerHTML='
🎯 Repita a sequência!
';say('Olhe a sequência e repita!'); const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center;gap:4vw';st.appendChild(row); const pads=COL.map(([e,f])=>{const c=document.createElement('div');c.className='card';c.style.width=SZ(30,300);c.style.filter='brightness(.7)';c.innerHTML=`${e}`;c.onclick=()=>{if(!player)return;ac();tone(f,.2,'triangle',.15);c.style.filter='brightness(1.4)';setTimeout(()=>c.style.filter='brightness(.7)',150);pick(f)};row.appendChild(c);return c}); function show(t){player=false;const n=seq.length;seq.forEach((f,j)=>{setTimeout(()=>{const c=pads[COL.findIndex(x=>x[1]===f)];c.style.filter='brightness(1.4)';tone(f,.25,'triangle',.15);setTimeout(()=>c.style.filter='brightness(.7)',250)},800+j*650)});setTimeout(()=>player=true,800+n*650+200)} @@ -344,7 +349,7 @@ const go=e=>{if(win)return;ac();iv=setInterval(()=>{const l=parseFloat(car.style const stop=()=>{clearInterval(iv);iv=null}; car.addEventListener('pointerdown',go);car.addEventListener('pointerup',stop);car.addEventListener('pointerleave',stop);addEventListener('pointerup',stop)})}, // 28 — esconde-esconde -esconde(d){const T=themeOf(d);let found=false;gate('🎁','Ache o bichinho escondido!',()=>{const st=stage();st.innerHTML='';say('Onde ele está?'); +esconde(d){const T=themeOf(d);let found=false;gate('🎁',`Ache o ${thingS(d)} escondido!`,()=>{const st=stage();st.innerHTML='';say('Onde ele está?'); const where=Math.floor(Math.random()*3);const row=document.createElement('div');row.className='row';row.style.cssText='height:100%;align-content:center;gap:5vw';st.appendChild(row); const peeky=document.createElement('div');peeky.style.cssText=`position:absolute;font-size:${SZ(8,80)};transition:all .2s;opacity:0`;peeky.textContent=T.pool[0];st.appendChild(peeky); const boxes=[0,1,2].map(i=>{const b=document.createElement('div');b.className='card';b.style.width=SZ(26,260);b.innerHTML=`🎁`;b.onclick=()=>{if(found)return;if(i===where){found=true;b.innerHTML=`${T.pool[0]}`;b.style.background='#c8f7c5';say('Achei!');stars(d,3);setTimeout(celebrate,500)}else{shakeWrong(b);say('Tenta de novo!')}};row.appendChild(b);return b}); @@ -362,7 +367,7 @@ vestir(d){const parts=[['👒','hat'],['👟','shoes'],['🎀','bow']];gate(' const bear=document.createElement('div');bear.style.cssText=`position:absolute;left:50%;top:10vh;transform:translateX(-50%);font-size:${SZ(24,240)};z-index:5`;bear.textContent='🐻';st.appendChild(bear); tapMatch(parts.map(p=>({e:p[0],k:p[1]})),parts.map(p=>({e:'',k:p[1]})),()=>{stars(d,3);setTimeout(celebrate,400)})})}, // 31 — pesca -pesca(d){const T=themeOf(d);let n=0;gate('🎣','Pesque 5 bichinhos!',()=>{const st=stage();st.innerHTML='';say('Clique nos bichinhos que aparecem!'); +pesca(d){const T=themeOf(d);let n=0;gate('🎣',`Pesque 5 ${thingP(d)}!`,()=>{const st=stage();st.innerHTML='';say(`Clique nos ${thingP(d)} que aparecem!`); const pond=document.createElement('div');pond.style.cssText='position:absolute;inset:12vh 4vw 6vh;border-radius:50%;background:linear-gradient(#4fc3f7,#0277bd)';st.appendChild(pond); const iv=setInterval(()=>{if(!st.isConnected){clearInterval(iv);return}if(n>=5){clearInterval(iv);stars(d,3);setTimeout(celebrate,300);return} const f=document.createElement('div');f.style.cssText=`position:absolute;left:${8+Math.random()*80}%;top:${15+Math.random()*60}%;font-size:${SZ(9,90)};cursor:pointer;transition:transform .2s`;f.textContent=rand(T.pool);f.onclick=()=>{n++;f.style.transition='all .6s';f.style.transform='translateY(-30vh) rotate(40deg)';f.style.opacity=0;setTimeout(()=>f.remove(),600);POP(500+n*70);say(NUM[n-1])};pond.appendChild(f);setTimeout(()=>f.remove(),2800)},900)})}, @@ -415,14 +420,18 @@ $('#cfg').appendChild(bigBtn('💾 Guardar',()=>{const n=$('#n').value.trim();if const rb=bigBtn('🧹 Apagar tudo e recomeçar',resetAll);rb.style.background='linear-gradient(#ff8a80,#ef5350)';rb.style.color='#fff';$('#cfg').appendChild(rb); say('Olá! Vamos brincar?')} function showCal(){const st=stage();st.innerHTML='
';const cal=$('#cal'); -cal.innerHTML+=`

${S.name?`Olá, ${S.name}!`:''} 🎈 35 dias de brincadeiras!

`; +const t=totalStars(); +cal.innerHTML+=`

${S.name?`Olá, ${S.name}!`:''} 🎈 35 dias de brincadeiras!

+
+
⭐ ${t} de 105
`; for(let w=0;w<7;w++){const T=THEMES[Math.floor(w%3)];const wk=`Semana ${w+1} — ${T.name} ${T.emoji}`; const div=document.createElement('div');div.className='week';div.innerHTML=`
${wk}
`;const days=div.querySelector('.days'); for(let i=1;i<=5;i++){const d=w*5+i;const g=G[d-1]; const b=document.createElement('div');b.className='day';b.innerHTML=`
${g[3]}
Dia ${d}
${g[1]}
${starStr(S.stars[d]||0)}
`; +if(S.stars[d]>=3){b.style.borderColor='#4caf50';b.style.background='#effbf2'} b.onclick=()=>location.hash='#d'+d;days.appendChild(b)}cal.appendChild(div)} if(S.stars[35])cal.innerHTML+=`
🏆 Você completou todos os 35 dias! Pode jogar tudo de novo!
`} -function playGame(d){const[dayNo,dt,mech]=G[d-1];const T=themeOf(d);gate(T.emoji,`Dia ${d}: ${dt}`,()=>MECH[mech](d))} +function playGame(d){const g=G[d-1];MECH[g[2]](d)} // ===================== roteamento ===================== function route(){const h=location.hash;