<!
DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo de Desafios</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
display: flex;
justify-content: center;
gap: 20px;
}
.player {
padding: 20px;
border: 2px solid #000;
width: 200px;
}
.fim {
margin-top: 20px;
padding: 20px;
border: 2px dashed #000;
width: 300px;
display: inline-block;
}
#tempoRestante {
font-size: 60px;
font-weight: bold;
color: red;
margin-top: 20px;
}
#tempoDesafio {
font-size: 30px;
font-weight: bold;
color: blue;
margin-top: 20px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Jogo de Desafios</h1>
<div class="container">
<div class="player">
<h2>Ela</h2>
<button id="btnEla">Girar Roleta</button>
<p id="numeroEla">Número: ?</p>
</div>
<div class="player">
<h2>Ele</h2>
<button id="btnEle">Girar Roleta</button>
<p id="numeroEle">Número: ?</p>
</div>
</div>
<h2 id="resultado"></h2>
<button id="btnReiniciar">Reiniciar Jogo</button>
<button id="btnTemporizador">Start/Stop Temporizador</button>
<!-- Tempo sorteado para desafios -->
<p id="tempoDesafio">Tempo do desafio: ?</p>
<!-- Temporizador GRANDE -->
<p id="tempoRestante">00</p>
<!-- Roleta Fim -->
<div class="fim">
<h2>Roleta Fim</h2>
<button id="btnFim">Start/Stop</button>
<p id="resultadoFim"></p>
</div>
<script>
let temposDisponiveis = [30, 40, 50, 60];
let desafiosEla = [
"Cante uma música", "Faça uma dança engraçada", "Imite um animal",
"Conte uma piada", "Faça um exercício físico", "Diga um trava-línguas",
"Escreva seu nome com o nariz", "Desenhe um gato sem tirar o lápis do papel",
"Fale uma palavra difícil", "Finja que é uma apresentadora de TV"
];
let desafiosEle = [
"Conte uma história engraçada", "Desenhe algo de olhos fechados",
"Fale um idioma diferente", "Finja que é um robô", "Diga cinco países",
"Faça um som de trombeta", "Fale com voz de desenho animado",
"Faça uma pose de super-herói", "Crie um mini poema", "Faça uma cara séria por 10
segundos"
];
let desafiosFim = [
"Dance por 30 segundos", "Conte uma curiosidade interessante",
"Faça uma imitação engraçada", "Fale um elogio inesperado para alguém"
];
let tempoRestante = 0;
let intervalo;
function iniciarTemporizador() {
if (intervalo) {
clearInterval(intervalo);
[Link]("tempoRestante").innerText = "00";
intervalo = null;
return;
}
intervalo = setInterval(() => {
if (tempoRestante > 0) {
tempoRestante--;
[Link]("tempoRestante").innerText = tempoRestante;
} else {
clearInterval(intervalo);
intervalo = null;
}
}, 1000);
}
function girarRoletaFim() {
if ([Link] > 0) {
let desafioIndex = [Link]([Link]() * [Link]);
[Link]("resultadoFim").innerText = `Desafio Fim: $
{desafiosFim[desafioIndex]}`;
[Link](desafioIndex, 1);
} else {
[Link]("resultadoFim").innerText = "Todos os desafios da Roleta
Fim foram concluídos!";
}
}
function girarRoleta(jogador) {
let numero = [Link]([Link]() * 101);
[Link](`numero${jogador}`).innerText = `Número: ${numero}`;
let desafios = jogador === "Ela" ? desafiosEla : desafiosEle;
if ([Link] > 0) {
let desafioIndex = [Link]([Link]() * [Link]);
tempoRestante = temposDisponiveis[[Link]([Link]() *
[Link])];
[Link]("resultado").innerText = `Vencedor: ${jogador} - Desafio: $
{desafios[desafioIndex]}`;
[Link]("tempoDesafio").innerText = `Tempo do desafio: $
{tempoRestante} segundos`;
[Link](desafioIndex, 1);
} else {
[Link]("resultado").innerText = `${jogador} já completou todos os
desafios!`;
}
}
function reiniciarJogo() {
desafiosEla = [...desafiosEla];
desafiosEle = [...desafiosEle];
desafiosFim = [...desafiosFim];
[Link]("resultadoFim").innerText = "";
[Link]("resultado").innerText = "";
[Link]("tempoDesafio").innerText = "Tempo do desafio: ?";
[Link]("tempoRestante").innerText = "00";
[Link]("numeroEla").innerText = "Número: ?";
[Link]("numeroEle").innerText = "Número: ?";
clearInterval(intervalo);
intervalo = null;
}
[Link]("btnEla").addEventListener("click", () => girarRoleta("Ela"));
[Link]("btnEle").addEventListener("click", () => girarRoleta("Ele"));
[Link]("btnTemporizador").addEventListener("click",
iniciarTemporizador);
[Link]("btnReiniciar").addEventListener("click", reiniciarJogo);
[Link]("btnFim").addEventListener("click", girarRoletaFim);
</script>
</body>
</html>