Missão Roblox Português

by LunarShark99
358 lines5.9 KB
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Missão Roblox Português</title>

<style>

body{
margin:0;
font-family:Arial;
background:linear-gradient(180deg,#00bfff,#6a5acd);
overflow:hidden;
color:white;
}

.menu{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=1200&auto=format&fit=crop') center/cover;
}

.menu h1{
font-size:60px;
text-shadow:3px 3px 10px black;
}

.playBtn{
padding:20px 50px;
font-size:30px;
border:none;
border-radius:20px;
background:#00ff88;
cursor:pointer;
font-weight:bold;
box-shadow:0 0 20px #000;
}

.game{
display:none;
padding:20px;
}

.top{
display:flex;
justify-content:space-between;
font-size:25px;
margin-bottom:20px;
}

.bar{
width:100%;
height:25px;
background:#222;
border-radius:20px;
overflow:hidden;
margin-bottom:25px;
}

.progress{
height:100%;
width:0%;
background:lime;
transition:0.4s;
}

.card{
background:white;
color:#222;
padding:25px;
border-radius:25px;
max-width:800px;
margin:auto;
box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.text{
background:#f1f1f1;
padding:15px;
border-radius:15px;
margin-bottom:20px;
font-size:20px;
}

.question{
font-size:28px;
margin-bottom:20px;
}

.answers button{
width:100%;
padding:18px;
margin:10px 0;
font-size:20px;
border:none;
border-radius:15px;
background:#6a5acd;
color:white;
cursor:pointer;
transition:0.3s;
}

.answers button:hover{
transform:scale(1.03);
background:#483d8b;
}

.feedback{
margin-top:20px;
padding:15px;
border-radius:15px;
display:none;
font-size:20px;
}

.correct{
background:#2ecc71;
}

.wrong{
background:#e74c3c;
}

.next{
margin-top:20px;
padding:15px;
width:100%;
border:none;
border-radius:15px;
font-size:22px;
background:#ffcc00;
cursor:pointer;
display:none;
}

.final{
display:none;
text-align:center;
margin-top:50px;
}

.avatar{
width:150px;
margin-bottom:20px;
animation:jump 1s infinite;
}

@keyframes jump{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

</style>
</head>

<body>

<div class="menu" id="menu">
<h1>🎮 Missão Roblox Português</h1>
<button class="playBtn" onclick="startGame()">JOGAR</button>
</div>

<div class="game" id="game">

<div class="top">
<div>⭐ Pontos: <span id="score">0</span></div>
<div>🏆 Fase: <span id="level">1</span></div>
</div>

<div class="bar">
<div class="progress" id="progress"></div>
</div>

<div class="card">

<div class="text" id="text"></div>

<div class="question" id="question"></div>

<div class="answers" id="answers"></div>

<div class="feedback" id="feedback"></div>

<button class="next" id="nextBtn">Próxima Fase 🚀</button>

</div>

<div class="final" id="final">

<img class="avatar" src="https://tr.rbxcdn.com/180DAY-0d1f4f9d31f4d5ec4c1e52c4cf6807d2/420/420/Hat/Webp/noFilter">

<h1>🏆 VOCÊ VENCEU!</h1>

<h2>Total de pontos: <span id="finalScore"></span></h2>

</div>

</div>

<script>

const questions = [

{
text:"",
question:"Qual palavra é um substantivo?",
answers:["correr","feliz","escola","rapidamente"],
correct:2,
explanation:"Escola é um substantivo porque dá nome a um lugar."
},

{
text:"",
question:"Qual é um substantivo próprio?",
answers:["cidade","menina","Brasil","cachorro"],
correct:2,
explanation:"Brasil é nome específico de um país."
},

{
text:"Lucas levou seu cachorro ao parque e brincou a tarde inteira.",
question:"Quem foi ao parque?",
answers:["Lucas","O gato","A professora","Ninguém"],
correct:0,
explanation:"O texto diz que Lucas foi ao parque."
},

{
text:"",
question:"Qual alternativa possui substantivo abstrato?",
answers:["mesa","amor","janela","cadeira"],
correct:1,
explanation:"Amor é sentimento."
},

{
text:"Ana ganhou um livro novo de aventuras.",
question:"O que Ana ganhou?",
answers:["Uma bola","Um livro","Uma mochila","Um celular"],
correct:1,
explanation:"O texto diz que Ana ganhou um livro."
},

{
text:"",
question:"Qual é um substantivo coletivo?",
answers:["boiada","casa","amor","janela"],
correct:0,
explanation:"Boiada representa conjunto de bois."
}

];

let current = 0;
let score = 0;

function startGame(){
document.getElementById("menu").style.display="none";
document.getElementById("game").style.display="block";
loadQuestion();
}

function loadQuestion(){

let q = questions[current];

document.getElementById("text").innerHTML = q.text;
document.getElementById("question").innerHTML = q.question;

document.getElementById("level").innerText = current + 1;

let answersDiv = document.getElementById("answers");
answersDiv.innerHTML="";

document.getElementById("feedback").style.display="none";
document.getElementById("nextBtn").style.display="none";

let progress = (current/questions.length)*100;
document.getElementById("progress").style.width = progress+"%";

q.answers.forEach((answer,index)=>{

let btn = document.createElement("button");

btn.innerText = answer;

btn.onclick = ()=>checkAnswer(index);

answersDiv.appendChild(btn);

});

}

function checkAnswer(index){

let q = questions[current];

let feedback = document.getElementById("feedback");

if(index === q.correct){

score += 10;

document.getElementById("score").innerText = score;

feedback.className="feedback correct";
feedback.innerHTML="✅ Muito bem! Você acertou!";
feedback.style.display="block";

document.getElementById("nextBtn").style.display="block";

}else{

feedback.className="feedback wrong";
feedback.innerHTML="❌ Você errou! "+q.explanation;
feedback.style.display="block";

}

}

document.getElementById("nextBtn").onclick = ()=>{

current++;

if(current < questions.length){

loadQuestion();

}else{

document.querySelector(".card").style.display="none";

document.getElementById("final").style.display="block";

document.getElementById("finalScore").innerText = score;

document.getElementById("progress").style.width="100%";

}

}

</script>

</body>
</html>
Game Source: Missão Roblox Português

Creator: LunarShark99
Libraries: none
Complexity: complex (358 lines, 5.9 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: miss-o-roblox-portugu-s-lunarshark99" to link back to the original. Then publish at arcadelab.ai/publish.