Dragon Slayer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dragon Slayer</title>
<style>
body {
  margin:0; padding:20px; text-align:center;
  font-family:Arial,sans-serif;color:white;
  background:linear-gradient(#120e29,#421525,#100c18);
}
h1 {color:#ff633d;text-shadow:0 0 15px red}
.arena {
  max-width:550px;margin:auto;padding:20px;
  background:#211b35;border:2px solid #a64c51;
  border-radius:20px;
}
.dragon {font-size:100px;animation:float 2s infinite alternate}
@keyframes float {
  to {transform:translateY(-12px)}
}
.bar {height:18px;background:#4b2635;border-radius:20px;overflow:hidden}
.fill {height:100%;background:#ff453a;transition:width .3s}
.player {background:#20c779}
button,input {
  box-sizing:border-box;width:100%;padding:13px;
  margin:6px 0;border:0;border-radius:9px;font-size:16px;
}
button {background:#ef4b32;color:white;font-weight:bold;cursor:pointer}
.option {background:#414064}
#question {font-size:20px;margin:22px 0}
#feedback {min-height:25px;color:#ffd166}
</style>
</head>
<body>
<h1>🐉 DRAGON SLAYER ⚔️</h1>
<div class="arena">
  <div id="intro">
    <h2>THE DRAGON KINGDOM</h2>
    <div class="dragon">🐲</div>
    <p>Answer 30 vocabulary questions. Attack dragons and defeat the final boss!</p>
    <p>Correct answer = 20 damage. Wrong answer = lose 20 HP.</p>
    <button onclick="start()">ENTER THE ARENA</button>
  </div>
  <div id="game" hidden>
    <h2 id="boss">🔥 FIRE DRAGON</h2>
    <div class="dragon" id="dragon">🐉</div>
    <p>DRAGON HP: <span id="dhp">100</span>/100</p>
    <div class="bar"><div class="fill" id="dbar" style="width:100%"></div></div>
    <p>YOUR HP: <span id="php">100</span>/100</p>
    <div class="bar"><div class="fill player" id="pbar" style="width:100%"></div></div>
    <p id="progress">Question 1/30</p>
    <div id="question"></div>
    <div id="answers"></div>
    <input id="typed" placeholder="Type your answer..." hidden>
    <button id="attack" onclick="strike()">⚔️ ATTACK!</button>
    <p id="feedback"></p>
    <button id="next" onclick="advance()" hidden>NEXT BATTLE ➜</button>
  </div>
  <div id="end" hidden>
    <h2 id="result"></h2>
    <p id="finalscore"></p>
    <button onclick="location.reload()">PLAY AGAIN</button>
  </div>
</div>

<script>
const questions = [
["A warning signal or sudden fear","alarm"],
["A feeling of looking forward to something","anticipation"],
["A feeling of great confusion","bewilderment"],
["To deal successfully with a difficulty","cope"],
["Open refusal to obey","defiance"],
["Unfriendly or threatening","hostile"],
["Extremely embarrassed","mortified"],
["A sudden sharp feeling of pain or sadness","pang"],
["To feel anger about something unfair","resent"],
["Unlike anything else","unique"],
["To decorate cloth with sewn patterns","embroider"],
["To give special importance to something","emphasize"],
["To hire someone","employ"],
["To make something possible","enable"],
["To express support or approval","endorse"],
["What does emphatic mean?","Strong and clear in expression",
["Weak and uncertain","Strong and clear in expression","Very confused","Unfriendly"]],
["What does encounter mean?","To meet or experience something",
["To cover completely","To meet or experience something","To hire someone","To live in a place"]],
["What does endeavor mean?","To try hard to do something",
["To try hard to do something","To feel embarrassed","To decorate cloth","To refuse to obey"]],
["What does engaging mean?","Interesting and enjoyable",
["Unpleasant","Large","Interesting and enjoyable","Confused"]],
["What does envelop mean?","To cover or surround completely",
["To approve","To cover or surround completely","To tolerate","To emphasize"]],
["What does abide mean?","To tolerate or put up with something",
["To hire someone","To tolerate or put up with something","To meet someone","To warn someone"]],
["What does communal mean?","Shared by a group of people",
["Unique to one person","Shared by a group of people","Embarrassed","Painful"]],
["What does dwell mean?","To live in a place",
["To live in a place","To try hard","To cover completely","To approve"]],
["What is an edifice?","A large, impressive building",
["A feeling","A relative","A large, impressive building","A warning"]],
["What does kindred mean?","Members of your family; relatives",
["Strangers","Members of your family; relatives","Disobedient people","Buildings"]],
["What does nurture mean?","To care for and help someone develop",
["To threaten","To care for and help someone develop","To disobey","To confuse"]],
["What does reliance mean?","Dependence on someone or something",
["Pain","Dependence on someone or something","A building","A warning"]],
["Who is a resident?","A person who lives in a particular place",
["A person who lives in a particular place","An employer","An artist","A rebel"]],
["What does sentiment mean?","A feeling or opinion about something",
["A building","A feeling or opinion about something","A difficulty","A family"]],
["What does vicinity mean?","The area near a place",
["A strong feeling","The area near a place","A family","A warning"]]
];

let i=0, hp=100, dhp=100, score=0, locked=false;
const bosses=["🔥 FIRE DRAGON","❄️ FROST DRAGON",
"🌑 SHADOW DRAGON","💀 DOOM DRAGON","👑 ANCIENT DRAGON"];

function start(){
 document.getElementById("intro").hidden=true;
 document.getElementById("game").hidden=false;
 show();
}
function show(){
 locked=false;
 dhp=100;
 document.getElementById("boss").textContent=bosses[Math.min(4,Math.floor(i/6))];
 document.getElementById("dragon").textContent=
 ["🐲","🐉","🐲","🐉","👹"][Math.min(4,Math.floor(i/6))];
 document.getElementById("progress").textContent=`Question ${i+1}/30`;
 document.getElementById("question").textContent=questions[i][0];
 document.getElementById("feedback").textContent="";
 document.getElementById("next").hidden=true;
 document.getElementById("attack").hidden=false;
 const typed=document.getElementById("typed");
 const answers=document.getElementById("answers");
 typed.value="";
 answers.innerHTML="";
 if(i<15){
   typed.hidden=false;
   typed.placeholder="Type the vocabulary word...";
 } else {
   typed.hidden=true;
   questions[i][2].forEach(option=>{
     const b=document.createElement("button");
     b.className="option";
     b.textContent=option;
     b.onclick=()=>{if(!locked){typed.value=option;
       document.querySelectorAll(".option").forEach(x=>x.style.background="#414064");
       b.style.background="#b44a38";}};
     answers.appendChild(b);
   });
 }
 update();
}
function update(){
 document.getElementById("php").textContent=hp;
 document.getElementById("dhp").textContent=dhp;
 document.getElementById("pbar").style.width=hp+"%";
 document.getElementById("dbar").style.width=dhp+"%";
}
function strike(){
 if(locked)return;
 const input=document.getElementById("typed");
 if(!input.value.trim()){
   document.getElementById("feedback").textContent="Choose or type an answer first!";
   return;
 }
 locked=true;
 const correct=input.value.trim().toLowerCase()===questions[i][1].toLowerCase();
 if(correct){
   dhp=Math.max(0,dhp-20);score++;
   document.getElementById("feedback").textContent="💥 DIRECT HIT! Dragon loses 20 HP!";
 }else{
   hp=Math.max(0,hp-20);
   document.getElementById("feedback").textContent=
   "🔥 Dragon attacks! Correct answer: "+questions[i][1];
 }
 document.getElementById("dragon").textContent=correct?"💥":"🐉";
 update();
 document.getElementById("attack").hidden=true;
 document.getElementById("next").hidden=false;
 document.getElementById("next").textContent=
 hp===0||i===29?"VIEW RESULTS ➜":"NEXT BATTLE ➜";
}
function advance(){
 if(hp===0||i===29){
   document.getElementById("game").hidden=true;
   document.getElementById("end").hidden=false;
   document.getElementById("result").textContent=
   hp>0?"🏆 DRAGON KING DEFEATED!":"💀 YOU HAVE FALLEN!";
   document.getElementById("finalscore").textContent=
   `Score: ${score}/30 | Remaining HP: ${hp}`;
   return;
 }
 i++;
 show();
}
</script>
</body>
</html>