Jogo da forca Chat GPT:
Embedded Files
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Forca - Biologia</title>
<style>
body{
font-family: Arial, sans-serif;
background:#f0f2f5;
margin:0;
padding:20px;
}
.container{
max-width:900px;
margin:auto;
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
}
h1{
text-align:center;
color:#1e3a8a;
}
.pergunta{
font-size:22px;
margin:20px 0;
text-align:center;
font-weight:bold;
}
.palavra{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin:30px 0;
}
.letra{
width:40px;
height:50px;
border-bottom:4px solid #000;
text-align:center;
font-size:32px;
font-weight:bold;
}
.inputs{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-top:20px;
}
input{
padding:10px;
font-size:18px;
border-radius:8px;
border:1px solid #999;
}
button{
padding:10px 20px;
font-size:18px;
border:none;
border-radius:8px;
background:#2563eb;
color:white;
cursor:pointer;
}
button:hover{
background:#1d4ed8;
}
.info{
text-align:center;
margin-top:20px;
font-size:20px;
font-weight:bold;
}
canvas{
display:block;
margin:auto;
background:#fff;
}
.relatorio{
margin-top:30px;
background:#f8fafc;
padding:20px;
border-radius:10px;
line-height:1.8;
}
.final{
text-align:center;
font-size:28px;
margin-top:20px;
font-weight:bold;
}
.certas{
color:green;
}
.erradas{
color:red;
}
.tempo{
color:#dc2626;
}
</style>
</head>
<body>
<div class="container">
<h1>Jogo da Forca - Biologia</h1>
<div class="info">
⏳ Tempo restante: <span id="timer">01:30</span>
</div>
<canvas id="forca" width="300" height="300"></canvas>
<div class="pergunta" id="pergunta"></div>
<div class="palavra" id="palavra"></div>
<div class="inputs">
<div>
<input type="text" id="letraInput" maxlength="1" placeholder="Digite uma letra"
autocomplete="off">
<button onclick="enviarLetra()">Enviar Letra</button>
</div>
<div>
<input type="text" id="respostaInput" placeholder="Digite a resposta completa"
autocomplete="off">
<button onclick="respostaCompleta()">Responder</button>
</div>
</div>
<div class="info">
Tentativas erradas: <span id="erros">0</span>/6
</div>
<div id="mensagem" class="final"></div>
<div id="relatorio"></div>
</div>
<script>
const bancoQuestoes = [
{
pergunta:"Qual organela que produz energia?",
resposta:"MITOCÔNDRIA"
},
{
pergunta:"Qual organela fabrica proteína?",
resposta:"RIBOSSOMO"
},
{
pergunta:"Qual ácido nucleico é uma fita simples?",
resposta:"ÁCIDO RIBONUCLEICO"
},
{
pergunta:"Qual nome do segmento que é expresso em RNAm?",
resposta:"GENE"
}
];
const questao =
bancoQuestoes[Math.floor(Math.random()*bancoQuestoes.length)];
const perguntaEl = document.getElementById("pergunta");
const palavraEl = document.getElementById("palavra");
let resposta = questao.resposta.toUpperCase();
let letrasCorretas = [];
let letrasErradas = [];
let erros = 0;
const maxErros = 6;
let tempo = 90;
let tempoGasto = 0;
let jogoFinalizado = false;
perguntaEl.innerHTML = questao.pergunta;
function mostrarPalavra(){
palavraEl.innerHTML = "";
for(let letra of resposta){
const div = document.createElement("div");
div.classList.add("letra");
if(letra === " "){
div.style.borderBottom = "none";
div.innerHTML = "";
}
else if(letrasCorretas.includes(letra)){
div.innerHTML = letra;
}
else{
div.innerHTML = "";
}
palavraEl.appendChild(div);
}
verificarVitoria();
}
mostrarPalavra();
function enviarLetra(){
if(jogoFinalizado) return;
const input = document.getElementById("letraInput");
let letra = input.value.toUpperCase().trim();
input.value = "";
if(!letra) return;
if(resposta.includes(letra)){
if(!letrasCorretas.includes(letra)){
letrasCorretas.push(letra);
}
}
else{
if(!letrasErradas.includes(letra)){
letrasErradas.push(letra);
erros++;
desenharBoneco();
document.getElementById("erros").innerText = erros;
}
}
mostrarPalavra();
if(erros >= maxErros){
fimDeJogo(false,"Você foi enforcado!");
}
}
function respostaCompleta(){
if(jogoFinalizado) return;
const respostaInput =
document.getElementById("respostaInput");
const tentativa =
respostaInput.value.toUpperCase().trim();
respostaInput.value = "";
if(tentativa === resposta){
for(let letra of resposta){
if(letra !== " " &&
!letrasCorretas.includes(letra)){
letrasCorretas.push(letra);
}
}
mostrarPalavra();
fimDeJogo(true,"Parabéns! Você acertou!");
}
else{
erros = maxErros;
for(let i=0;i<6;i++){
desenharBoneco();
}
document.getElementById("erros").innerText = erros;
fimDeJogo(false,
"Resposta errada! O boneco foi enforcado!");
}
}
function verificarVitoria(){
let venceu = true;
for(let letra of resposta){
if(letra !== " " &&
!letrasCorretas.includes(letra)){
venceu = false;
}
}
if(venceu){
fimDeJogo(true,"Parabéns! Você venceu!");
}
}
const canvas = document.getElementById("forca");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 4;
function baseForca(){
ctx.beginPath();
ctx.moveTo(20,280);
ctx.lineTo(150,280);
ctx.moveTo(50,280);
ctx.lineTo(50,30);
ctx.lineTo(180,30);
ctx.lineTo(180,60);
ctx.stroke();
}
baseForca();
function desenharBoneco(){
switch(erros){
case 1:
ctx.beginPath();
ctx.arc(180,85,25,0,Math.PI*2);
ctx.stroke();
break;
case 2:
ctx.beginPath();
ctx.moveTo(180,110);
ctx.lineTo(180,180);
ctx.stroke();
break;
case 3:
ctx.beginPath();
ctx.moveTo(180,130);
ctx.lineTo(150,160);
ctx.stroke();
break;
case 4:
ctx.beginPath();
ctx.moveTo(180,130);
ctx.lineTo(210,160);
ctx.stroke();
break;
case 5:
ctx.beginPath();
ctx.moveTo(180,180);
ctx.lineTo(150,220);
ctx.stroke();
break;
case 6:
ctx.beginPath();
ctx.moveTo(180,180);
ctx.lineTo(210,220);
ctx.stroke();
break;
}
}
const timerEl = document.getElementById("timer");
const cronometro = setInterval(()=>{
if(jogoFinalizado){
clearInterval(cronometro);
return;
}
tempo--;
tempoGasto++;
let min = String(Math.floor(tempo/60)).padStart(2,"0");
let sec = String(tempo%60).padStart(2,"0");
timerEl.innerText = `${min}:${sec}`;
if(tempo <= 0){
erros = maxErros;
for(let i=0;i<6;i++){
desenharBoneco();
}
fimDeJogo(false,
"Tempo esgotado! O boneco foi enforcado!");
}
},1000);
function fimDeJogo(vitoria,mensagem){
if(jogoFinalizado) return;
jogoFinalizado = true;
document.getElementById("mensagem").innerHTML = mensagem;
gerarRelatorio(vitoria);
}
function gerarRelatorio(vitoria){
const relatorio = document.getElementById("relatorio");
relatorio.innerHTML = `
<div class="relatorio">
<h2>📋 Relatório Final</h2>
<p><strong>Pergunta:</strong>
${questao.pergunta}</p>
<p><strong>Resposta correta:</strong>
${resposta}</p>
<p class="certas">
<strong>Letras acertadas:</strong>
${letrasCorretas.length ?
letrasCorretas.join(", ") : "Nenhuma"}
</p>
<p class="erradas">
<strong>Letras erradas:</strong>
${letrasErradas.length ?
letrasErradas.join(", ") : "Nenhuma"}
</p>
<p class="tempo">
<strong>Tempo utilizado:</strong>
${tempoGasto} segundos
</p>
<p>
<strong>Resultado:</strong>
${vitoria ? "VITÓRIA 🎉" : "DERROTA 💀"}
</p>
</div>
`;
}
</script>
</body>
</html>
Page updated
Google Sites
Report abuse