jogo 01

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">

<title>Jogo com Áudio - Prof. Claudinei RA 697.521</title>

<style>

body{font-family: 'Comic Sans MS', Arial; text-align:center; background:#fff8e1; margin:0; padding:10px}

.capa{background:white; border:4px solid #2b7de9; border-radius:20px; padding:15px; margin-bottom:15px}

.painel{background:white; border:3px solid #ff9800; border-radius:15px; padding:20px; margin:15px 0; min-height:120px}

.frase{font-size:32px; font-weight:bold; color:#1a4da1; line-height:1.2}

button{padding:15px 25px; margin:8px; font-size:18px; border:none; border-radius:12px; cursor:pointer}

.btn-audio{background:#2196F3; color:white; font-size:22px}

.btn-acerto{background:#4CAF50; color:white}

.btn-erro{background:#ff7043; color:white}

.footer{background:#e3f2fd; padding:10px; border-radius:10px; margin-top:20px; font-size:12px}

img{max-width:100%; border-radius:15px}

</style>

</head>

<body>

<div class="capa">

<h2 style="margin:5px">COLEÇÃO COMPLETA</h2>

<p style="margin:5px">Famílias Silábicas e Tirinhas de Leitura<br>Pré ao 5º Ano - Com Áudio</p>

<small>© Claudinei de Oliveira de Sousa Pedagogo RA 697.521</small>

</div>

<div id="jogo"></div>

<script>

const tirinhas = [

 {img:"", titulo:"1 - O BEBÊ E A BOLA", frases:["O BEBÊ VÊ A BOLA","A BOLA É DO BEBÊ","O BEBÊ BEIJA A BOLA"]},

 {img:"", titulo:"2 - O GATO VIU O JACARÉ", frases:["O GATO VIU O JACARÉ","O JACARÉ É GRANDE","O GATO CORREU"]},

 {img:"", titulo:"3 - A FOCA COME LARANJA", frases:["A FOCA COME LARANJA","A LARANJA É DOCE","A FOCA FICOU FELIZ"]},

 {img:"", titulo:"4 - O LOBINHO E O LOBÃO", frases:["O LOBINHO É PEQUENO","O LOBÃO É GRANDE","O LOBINHO E O LOBÃO SÃO AMIGOS"]},

 {img:"", titulo:"5 - CASINHA CASA CASARÃO", frases:["A CASINHA É PEQUENA","A CASA É MÉDIA","O CASARÃO É GRANDE"]},

 {img:"", titulo:"6 - GATINHO GATO GATÃO", frases:["O GATINHO É PEQUENINO","O GATO É NORMAL","O GATÃO É ENORME"]}

];

let atual=0, painel=0, acertos=0, erros=[];

function falar(texto){

 if('speechSynthesis' in window){

  speechSynthesis.cancel();

  let msg = new SpeechSynthesisUtterance(texto);

  msg.lang='pt-BR'; msg.rate=0.8;

  speechSynthesis.speak(msg);

 }

}

function mostrar(){

 if(atual>=tirinhas.length){ relatorio(); return; }

 let t=tirinhas[atual];

 document.getElementById("jogo").innerHTML=`

  <h3>${t.titulo}</h3>

  <div class="painel">

   <div class="frase">${t.frases[painel]}</div>

   <button class="btn-audio" onclick="falar('${t.frases[painel]}')">🔊 OUVIR</button>

  </div>

  <button class="btn-acerto" onclick="acertei()">✅ Li certinho</button>

  <button class="btn-erro" onclick="errei()">➡️ Próximo (errei mas continuo)</button>

  <p>Painel ${painel+1} de 3 | Tirinha ${atual+1} de 6</p>

 `;

 falar(t.frases[painel]); // fala automático

}

function acertei(){ acertos++; painel++; proximo(); }

function errei(){ erros.push(tirinhas[atual].frases[painel]); painel++; proximo(); }

function proximo(){ if(painel>=3){painel=0; atual++;} mostrar(); }

function relatorio(){

 let total=18;

 let msgFinal = `Você acertou ${acertos} de ${total}!`;

 falar(`Parabéns! ${msgFinal}. Você é incrível!`);

 document.getElementById("jogo").innerHTML=`

  <div class="painel" style="border-color:#4CAF50">

   <h1>🌟 PARABÉNS! 🌟</h1>

   <h2>${msgFinal}</h2>

   ${acertos==total?'<h2>🏆 CRAQUE TOTAL!</h2>':''}

   ${erros.length>0?`<div style="text-align:left; background:#fff3e0; padding:10px; border-radius:10px"><b>Vamos treinar só essas com carinho? 💛</b><br>${erros.map(e=>'• '+e).join('<br>')}</div>`:''}

   <br><button class="btn-audio" onclick="location.reload()">🔁 Jogar de novo</button>