Jim's Day: Adventure Quest
by BraveFox62220 lines23.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jim's Day: Adventure Quest</title>
<style>
:root{
--ink:#fffdf6; --deep:#10153d; --panel:rgba(13,22,69,.82); --gold:#ffd85a;
--mint:#69f0c1; --pink:#ff77b7; --blue:#6bd9ff; --danger:#ff7777;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Trebuchet MS,Arial,sans-serif;color:var(--ink)}
body{
background:#10153d;
background-image:radial-gradient(circle at 15% 18%,#ffca6a 0 2px,transparent 3px),
radial-gradient(circle at 78% 13%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 62% 42%,#8c9dff 0 2px,transparent 3px),
radial-gradient(circle at 88% 74%,#fff 0 1px,transparent 2px),
linear-gradient(135deg,#11163f,#30246f 52%,#0a4667);
background-size:190px 170px,220px 200px,250px 180px,170px 230px,100% 100%;
overflow-x:hidden;
}
body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(2px);opacity:.45}
body:before{width:42vw;height:42vw;min-width:260px;min-height:260px;left:-15vw;bottom:-22vw;background:radial-gradient(circle,#ff5cb9,transparent 68%);animation:float 10s ease-in-out infinite}
body:after{width:45vw;height:45vw;min-width:300px;min-height:300px;right:-16vw;top:-24vw;background:radial-gradient(circle,#39d7f7,transparent 68%);animation:float 12s ease-in-out infinite reverse}
@keyframes float{50%{transform:translate(30px,-24px) scale(1.08)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes pop{0%{transform:scale(.75);opacity:0}75%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 12px #ffd85a55}50%{box-shadow:0 0 28px #ffd85aaa}}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:.1}}
*{position:relative}
#confettiLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}
.confetti{position:absolute;top:-20px;width:10px;height:15px;animation:confettiFall 2.6s linear forwards}
.wrap{z-index:1;max-width:1240px;margin:auto;padding:18px 22px 30px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#ffdf6d,#ff8b4a);display:grid;place-items:center;font-size:30px;box-shadow:0 8px 0 #8d4773;animation:bob 3s ease-in-out infinite}
.eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#a8f1ff;font-weight:900}
h1{margin:2px 0 0;font-size:clamp(23px,3.3vw,38px);line-height:1.05;text-shadow:0 4px 0 #171b55}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;font-weight:900;cursor:pointer;border:0;color:#16204e;transition:transform .15s,filter .15s}
button:hover{transform:translateY(-2px);filter:brightness(1.08)}
button:active{transform:translateY(1px)}
.smallbtn{border-radius:13px;padding:10px 13px;background:#ffffffdf;box-shadow:0 4px 0 #8290cf;font-size:13px}
.hero{margin:22px 0 16px;padding:23px 25px;border:2px solid #ffffff3b;border-radius:28px;background:linear-gradient(115deg,#ff6da9e8,#725ff1e8 54%,#27bdd4e8);box-shadow:0 12px 0 #10164077;display:flex;align-items:center;justify-content:space-between;gap:18px;overflow:hidden}
.hero:after{content:"✦ ✧ ★ ✦";position:absolute;right:15px;top:8px;font-size:30px;letter-spacing:13px;opacity:.28;transform:rotate(-10deg)}
.hero-copy{max-width:700px;z-index:1}
.hero h2{font-size:clamp(24px,3.4vw,40px);margin:0 0 8px;text-shadow:0 3px 0 #492c87}
.hero p{margin:0;font-size:15px;line-height:1.5;color:#fff9ff}
.mascot{font-size:clamp(65px,9vw,105px);filter:drop-shadow(0 9px 0 #322b7a55);animation:bob 2.8s ease-in-out infinite}
.progress-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:14px 2px 20px}
.progress-track{height:13px;border-radius:99px;background:#ffffff25;overflow:hidden;border:1px solid #ffffff3b}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#67f7c5,#ffe26e,#ff79b6);border-radius:99px;transition:width .45s ease}
.progress-label{font-weight:900;color:#ffe98b;font-size:13px}
.main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.8fr);gap:17px;align-items:start}
.card{background:var(--panel);border:1px solid #ffffff35;border-radius:24px;padding:20px;box-shadow:0 10px 0 #070b2d65,0 0 35px #50dfff0b;backdrop-filter:blur(10px)}
.card-title{display:flex;align-items:center;gap:10px;font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:#b5f6ff;font-weight:1000;margin-bottom:15px}
.round-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px}
.pill{border:1px solid #ffffff40;background:#ffffff12;color:white;padding:9px 12px;border-radius:99px;font-size:12px}
.pill.active{background:linear-gradient(90deg,#ffdf6d,#ff9f69);color:#272052;border-color:transparent;box-shadow:0 0 18px #ffd85a45}
.question-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 13px;color:#d3dcff;font-size:13px;font-weight:800}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:99px;background:#ffffff17;padding:7px 10px}
.question{font-size:clamp(23px,3vw,34px);line-height:1.2;font-weight:1000;margin:12px 0 10px;text-wrap:balance}
.subquestion{font-size:15px;color:#cbd4ff;line-height:1.45;margin:0 0 18px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.answer{min-height:65px;border:2px solid #ffffff2c;border-radius:17px;background:linear-gradient(135deg,#ffffff1b,#ffffff0a);color:white;padding:13px 15px;text-align:left;font-size:16px;display:flex;align-items:center;gap:11px}
.answer .letter{flex:0 0 31px;height:31px;border-radius:10px;background:#ffffff21;display:grid;place-items:center;color:#ffe68b;font-size:13px}
.answer.correct{background:linear-gradient(135deg,#39d9a6,#18a77e);color:#092f3a;border-color:#a3ffe1;animation:pop .3s}
.answer.wrong{background:linear-gradient(135deg,#ff7777,#df4d8a);border-color:#ffc0d4;animation:pop .25s}
.answer:disabled{cursor:default;filter:none}
.feedback{margin-top:15px;min-height:50px;border-radius:16px;padding:12px 14px;background:#ffffff10;border:1px dashed #ffffff3c;display:flex;align-items:center;gap:10px;line-height:1.4;font-weight:800}
.feedback.good{background:#42e4ae1e;border-color:#63efbd;color:#a8ffdf}
.feedback.bad{background:#ff6d8c1b;border-color:#ff9ab4;color:#ffd4e0}
.explain{font-size:13px;color:#d4ddff;font-weight:600;margin-top:6px}
.controls{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:17px}
.primary{background:linear-gradient(135deg,#ffe56b,#ffb34f);padding:13px 18px;border-radius:15px;box-shadow:0 5px 0 #9b5a37;font-size:14px}
.secondary{background:#dbe8ff;padding:12px 16px;border-radius:15px;box-shadow:0 5px 0 #7183bf;font-size:14px}
.side-stack{display:grid;gap:17px}
.team{display:flex;align-items:center;gap:10px;padding:11px;border-radius:15px;background:#ffffff0d;border:1px solid #ffffff20;margin-top:8px}
.team.active{border-color:#ffe16b;background:#ffe16b20;box-shadow:inset 0 0 0 1px #ffe16b44}
.team-icon{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#ffffff1b}
.team-name{font-size:13px;font-weight:1000}
.team-score{font-size:22px;font-weight:1000;color:#ffe77b;margin-left:auto;min-width:30px;text-align:right}
.team-actions{display:flex;gap:5px;margin-left:5px}
.mini{width:27px;height:27px;border-radius:8px;background:#ffffffd9;font-size:16px}
.team-select{background:transparent;color:inherit;border:0;text-align:left;padding:0;flex:1}
.score-note{font-size:12px;line-height:1.45;color:#bfc9f7;margin-top:12px}
.mission{display:flex;align-items:center;gap:12px;padding:12px;border-radius:17px;background:linear-gradient(100deg,#4bd7e51f,#b975ff1f);border:1px solid #ffffff20}
.mission-emoji{font-size:29px}
.mission strong{display:block;font-size:13px;margin-bottom:3px}
.mission span{font-size:12px;color:#c7d1ff;line-height:1.35}
.footer{text-align:center;color:#b4c0f1;font-size:12px;padding:20px 0 0}
.overlay{position:fixed;inset:0;background:#090c2ddd;display:none;place-items:center;z-index:20;padding:20px}
.overlay.show{display:grid}
.modal{max-width:650px;width:100%;background:linear-gradient(145deg,#30296f,#101940);border:2px solid #ffffff45;border-radius:28px;padding:30px;text-align:center;box-shadow:0 0 70px #9d79ff44;animation:pop .35s}
.modal .big{font-size:75px;animation:bob 2s infinite}
.modal h2{font-size:clamp(27px,5vw,45px);margin:6px 0 10px;color:#ffe277}
.modal p{color:#e3e6ff;line-height:1.55}
.modal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
@media(max-width:800px){.main-grid{grid-template-columns:1fr}.hero{padding:19px}.mascot{font-size:65px}.answers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wrap{padding:12px}.answers{grid-template-columns:1fr}.hero{align-items:flex-start}.mascot{font-size:48px}.card{padding:15px}}
</style>
</head>
<body>
<div id="confettiLayer"></div>
<div class="wrap">
<header class="topbar">
<div class="brand"><div class="logo">🚀</div><div><div class="eyebrow">Family and Friends 3 • Unit 6</div><h1>JIM'S DAY: ADVENTURE QUEST</h1></div></div>
<div class="top-actions"><button class="smallbtn" id="soundBtn" onclick="toggleSound()">🔊 Sound: ON</button><button class="smallbtn" onclick="showRules()">❔ How to play</button><button class="smallbtn" onclick="resetGame()">↻ Restart</button></div>
</header>
<section class="hero">
<div class="hero-copy"><div class="eyebrow">🌟 Four teams • One epic mission</div><h2>Ready, set, ADVENTURE!</h2><p>Explore five magical worlds. Answer English questions, collect stars and help your team become the Ultimate Champions!</p></div>
<div class="mascot" aria-hidden="true">🦊</div>
</section>
<div class="progress-row"><div class="progress-track"><div class="progress-fill" id="progressFill"></div></div><div class="progress-label" id="progressLabel">MISSION 1 / 22</div></div>
<div class="main-grid">
<main class="card">
<div class="card-title"><span>🗺️</span><span>Choose your world</span></div>
<div class="round-pills" id="roundPills"></div>
<div class="question-meta"><span class="tag" id="categoryTag">🌴 Daily routines</span><span id="qCount">Question 1 of 22</span></div>
<div class="question" id="question">Loading your adventure…</div>
<div class="subquestion" id="subquestion">Choose the best answer for your team.</div>
<div class="answers" id="answers"></div>
<div class="feedback" id="feedback"><span>✨</span><span>Pick an answer to begin your mission!</span></div>
<div class="controls"><button class="secondary" onclick="prevQuestion()">← Previous</button><button class="primary" id="nextBtn" onclick="nextQuestion()">Next challenge ➜</button></div>
</main>
<aside class="side-stack">
<section class="card">
<div class="card-title"><span>🏆</span><span>Team scoreboard</span></div>
<div id="teams"></div>
<div class="score-note">Tap a team to make it active. Correct answers add 10 points automatically. Use + / − to adjust scores for speaking, acting or bonus challenges.</div>
</section>
<section class="card">
<div class="card-title"><span>✨</span><span>Mission tracker</span></div>
<div class="mission"><div class="mission-emoji" id="missionEmoji">🌴</div><div><strong id="missionName">Jungle Adventure</strong><span id="missionDesc">Master daily routines to earn your first star.</span></div></div>
<div style="height:12px"></div>
<div class="mission"><div class="mission-emoji">⭐</div><div><strong id="starsText">0 stars collected</strong><span>Every correct answer earns one star for the active team.</span></div></div>
</section>
</aside>
</div>
<div class="footer">🎮 Teacher-led classroom mode • Projector friendly • No student devices needed</div>
</div>
<div class="overlay" id="overlay"><div class="modal"><div class="big" id="modalEmoji">🏆</div><h2 id="modalTitle">Adventure complete!</h2><p id="modalText"></p><div class="modal-actions"><button class="primary" onclick="closeModal()">Back to game</button><button class="secondary" onclick="resetGame()">Play again ↻</button></div></div></div>
<script>
const rounds=[
{name:"Jungle Adventure",short:"🌴 Jungle",emoji:"🌴",desc:"Master daily routines to earn your first star.",category:"Daily routines",qs:[
["Which activity means “đánh răng”?","brush my teeth",["brush my hair","brush my teeth","wash my face","get dressed"],"brush my teeth","“Brush my teeth” means đánh răng."],
["Choose the correct sentence.","I get up at seven o’clock.",["I gets up at seven o’clock.","I get up at seven o’clock.","I getting up at seven o’clock.","I am get up at seven o’clock."],"I get up at seven o’clock.","With I, use the base verb: get up."],
["What do you do before you go to school?","I have breakfast.",["I have breakfast.","I go to bed.","I have dinner yesterday.","I goes to school."],"I have breakfast.","A common routine before school is having breakfast."],
["Which one is a daily routine?","do my homework",["purple elephant","do my homework","swim yesterday","a happy pencil"],"do my homework","“Do my homework” is an everyday activity."]
]},
{name:"Beat the Clock",short:"⏰ Clock",emoji:"⏰",desc:"Read the time and match it to the daily routine.",category:"Telling the time",qs:[
["What time is it? 🕖","It’s seven o’clock.",["It’s six o’clock.","It’s seven o’clock.","It’s half past seven.","It’s eight o’clock."],"It’s seven o’clock.","🕖 The minute hand is at 12 and the hour hand is at 7."],
["How do you say 7:30?","It’s half past seven.",["It’s half past six.","It’s seven o’clock.","It’s half past seven.","It’s a quarter to seven."],"It’s half past seven.","7:30 is half past seven."],
["Jim goes to bed at 9:00. What can he say?","I go to bed at nine o’clock.",["I goes to bed at nine.","I go to bed at nine o’clock.","I go bed nine.","I am go to bed at nine."],"I go to bed at nine o’clock.","Use “I go to bed at…” to talk about your routine."],
["Choose the correct question.","What time do you get up?",["What time you do get up?","What time does you get up?","What time do you get up?","What time are you get up?"],"What time do you get up?","Use What time + do + you + base verb."]
]},
{name:"Grammar Castle",short:"🏰 Grammar",emoji:"🏰",desc:"Unlock the castle with present-simple power.",category:"Present simple",qs:[
["She ___ her homework after school.","does",["do","does","doing","is do"],"does","With he, she, it, use does."],
["I ___ breakfast at seven.","have",["has","haves","have","having"],"have","With I, use have."],
["He ___ get up at six. He gets up at seven.","doesn’t",["don’t","doesn’t","isn’t","aren’t"],"doesn’t","For he/she/it in a negative sentence: doesn’t + base verb."],
["___ you walk to school?","Do",["Does","Do","Are","Is"],"Do","Use Do + you + base verb for a present-simple question."],
["My brother ___ the bus to school.","catches",["catch","catchs","catches","catching"],"catches","Catch changes to catches with he/she/it."]
]},
{name:"Question Builder",short:"🧩 Builder",emoji:"🧩",desc:"Put the words in the right order to build a question.",category:"Word order",qs:[
["Put the words in order: “you / do / when / homework / your / do”","When do you do your homework?",["When do you do your homework?","When you do your homework do?","Do when your homework you do?","When does you do your homework?"],"When do you do your homework?","Question word + do + subject + base verb."],
["Choose the correct question.","What time does he go to school?",["What time do he go to school?","What time does he goes to school?","What time does he go to school?","What time he does go to school?"],"What time does he go to school?","After does, use the base verb: go, not goes."],
["Complete: “___ she have lunch at school?”","Does",["Do","Does","Is","Has"],"Does","Use Does with she."],
["Choose the correct sentence.","They don’t have dinner at six.",["They doesn’t have dinner at six.","They don’t has dinner at six.","They don’t have dinner at six.","They not have dinner at six."],"They don’t have dinner at six.","With they, use don’t + base verb."]
]},
{name:"Phonics Space Mission",short:"🚀 Phonics",emoji:"🚀",desc:"Collect the right sound: oi or oy!",category:"Phonics: oi / oy",qs:[
["Which word has the “oi” sound?","coin",["boy","toy","coin","enjoy"],"coin","Coin has the letters oi."],
["Which word has the “oy” spelling?","enjoy",["coin","point","join","enjoy"],"enjoy","Enjoy has the letters oy."],
["Choose the word to complete: “The ___ is noisy.”","toy",["toy","boyed","toysing","toies"],"toy","Toy is spelled t-o-y and has the oy sound."],
["Which pair is spelled correctly?","coin – boy",["coyn – boi","coin – boy","koin – boi","coin – boi"],"coin – boy","Coin uses oi; boy uses oy."],
["Find the word with “oi”:","point",["enjoy","boy","point","toy"],"point","Point contains oi."]
]}
];
const teams=[{name:"TEAM SUN",icon:"☀️",score:0},{name:"TEAM STAR",icon:"⭐",score:0},{name:"TEAM ROCKET",icon:"🚀",score:0},{name:"TEAM TIGER",icon:"🐯",score:0}];
let activeTeam=0,roundIndex=0,qIndex=0,answered={},soundOn=true,stars=0;
const allQuestions=()=>rounds.flatMap((r,ri)=>r.qs.map((q,qi)=>({r:ri,q:qi})));
function current(){return rounds[roundIndex].qs[qIndex]}
function globalIndex(){let n=qIndex;for(let i=0;i<roundIndex;i++)n+=rounds[i].qs.length;return n}
function renderPills(){document.getElementById('roundPills').innerHTML=rounds.map((r,i)=>`<button class="pill ${i===roundIndex?'active':''}" onclick="goRound(${i})">${r.short}</button>`).join('')}
function renderTeams(){document.getElementById('teams').innerHTML=teams.map((t,i)=>`<div class="team ${i===activeTeam?'active':''}"><button class="team-select" onclick="setTeam(${i})"><span style="display:flex;align-items:center;gap:10px"><span class="team-icon">${t.icon}</span><span class="team-name">${t.name}</span></span></button><span class="team-score">${t.score}</span><span class="team-actions"><button class="mini" title="Add 10 points" onclick="adjust(${i},10)">+</button><button class="mini" title="Subtract 10 points" onclick="adjust(${i},-10)">−</button></span></div>`).join('')}
function render(){
const r=rounds[roundIndex],q=current(),idx=globalIndex(),key=idx,old=answered[key];
renderPills();renderTeams();
document.getElementById('categoryTag').textContent=r.emoji+' '+r.category;
document.getElementById('qCount').textContent=`Question ${idx+1} of ${allQuestions().length}`;
document.getElementById('question').textContent=q[0];
document.getElementById('subquestion').textContent='Choose the best answer for your team.';
document.getElementById('answers').innerHTML=q[2].map((a,i)=>`<button class="answer ${old?(a===q[3]?'correct':(old.choice===a?'wrong':'')):''}" ${old?'disabled':''} onclick="choose(${i})"><span class="letter">${String.fromCharCode(65+i)}</span><span>${a}</span></button>`).join('');
const fb=document.getElementById('feedback');fb.className='feedback'+(old?(old.correct?' good':' bad'):'');
fb.innerHTML=old?`<span style="font-size:23px">${old.correct?'🎉':'💡'}</span><div>${old.correct?'Brilliant! +10 points and one star!':'Not quite! The correct answer is: '+q[3]}<div class="explain">${q[4]}</div></div>`:'<span style="font-size:23px">✨</span><span>Pick an answer to begin your mission!</span>';
document.getElementById('progressFill').style.width=((idx+1)/allQuestions().length*100)+'%';
document.getElementById('progressLabel').textContent=`MISSION ${idx+1} / ${allQuestions().length}`;
document.getElementById('missionEmoji').textContent=r.emoji;document.getElementById('missionName').textContent=r.name;document.getElementById('missionDesc').textContent=r.desc;
document.getElementById('starsText').textContent=stars+' '+(stars===1?'star':'stars')+' collected';
document.getElementById('nextBtn').textContent=idx===allQuestions().length-1?'Finish adventure 🏆':'Next challenge ➜';
}
function choose(i){let idx=globalIndex();if(answered[idx])return;const q=current(),choice=q[2][i],correct=choice===q[3];answered[idx]={choice,correct};if(correct){teams[activeTeam].score+=10;stars++;playTone(660,.12);setTimeout(()=>playTone(880,.18),110);confetti(22)}else{playTone(190,.18)}render()}
function nextQuestion(){if(globalIndex()===allQuestions().length-1){finish();return}if(qIndex<rounds[roundIndex].qs.length-1)qIndex++;else{roundIndex++;qIndex=0}render()}
function prevQuestion(){if(qIndex>0)qIndex--;else if(roundIndex>0){roundIndex--;qIndex=rounds[roundIndex].qs.length-1}render()}
function goRound(i){roundIndex=i;qIndex=0;render()}
function setTeam(i){activeTeam=i;renderTeams();playTone(450,.06)}
function adjust(i,n){teams[i].score=Math.max(0,teams[i].score+n);renderTeams();playTone(n>0?550:280,.07)}
function finish(){let sorted=[...teams].sort((a,b)=>b.score-a.score),tie=sorted.length>1&&sorted[0].score===sorted[1].score;document.getElementById('modalEmoji').textContent=tie?'🤩':'🏆';document.getElementById('modalTitle').textContent=tie?'Amazing teamwork!':sorted[0].name+' WINS!';document.getElementById('modalText').innerHTML='Final scores:<br>'+sorted.map((t,i)=>`${['🥇','🥈','🥉','🎖️'][i]} <b>${t.name}</b> — ${t.score} points`).join('<br>')+'<br><br>Fantastic work, English adventurers! 🌟';document.getElementById('overlay').classList.add('show');confetti(90);playTone(784,.2);setTimeout(()=>playTone(988,.25),180)}
function closeModal(){document.getElementById('overlay').classList.remove('show')}
function showRules(){document.getElementById('modalEmoji').textContent='🎮';document.getElementById('modalTitle').textContent='How to play';document.getElementById('modalText').innerHTML='1. Divide the class into four teams.<br>2. Choose the active team on the scoreboard.<br>3. Read the question aloud and let the team discuss.<br>4. Click an answer. Correct answers earn 10 points and one star.<br>5. Use + / − to award bonus points for speaking, acting or teamwork.<br>6. Complete all five worlds and celebrate!';document.getElementById('overlay').classList.add('show')}
function resetGame(){teams.forEach(t=>t.score=0);activeTeam=0;roundIndex=0;qIndex=0;answered={};stars=0;closeModal();render();playTone(400,.1)}
function confetti(n){const layer=document.getElementById('confettiLayer');const colors=['#ffdc5e','#ff73b7','#6cf0ca','#71dcff','#ffffff','#b39aff'];for(let i=0;i<n;i++){const e=document.createElement('i');e.className='confetti';e.style.left=Math.random()*100+'%';e.style.background=colors[Math.floor(Math.random()*colors.length)];e.style.animationDelay=(Math.random()*.45)+'s';e.style.transform=`rotate(${Math.random()*360}deg)`;layer.appendChild(e);setTimeout(()=>e.remove(),3300)}}
let audioCtx=null;function playTone(freq,duration){if(!soundOn)return;try{audioCtx=audioCtx||new(window.AudioContext||window.webkitAudioContext)();const osc=audioCtx.createOscillator(),gain=audioCtx.createGain();osc.connect(gain);gain.connect(audioCtx.destination);osc.type='sine';osc.frequency.value=freq;gain.gain.setValueAtTime(.0001,audioCtx.currentTime);gain.gain.exponentialRampToValueAtTime(.13,audioCtx.currentTime+.02);gain.gain.exponentialRampToValueAtTime(.0001,audioCtx.currentTime+duration);osc.start();osc.stop(audioCtx.currentTime+duration+.03)}catch(e){}}
function toggleSound(){soundOn=!soundOn;document.getElementById('soundBtn').textContent=soundOn?'🔊 Sound: ON':'🔇 Sound: OFF';if(soundOn)playTone(520,.08)}
render();
</script>
</body>
</html>Game Source: Jim's Day: Adventure Quest
Creator: BraveFox62
Libraries: none
Complexity: complex (220 lines, 23.4 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: jim-s-day-adventure-quest-bravefox62" to link back to the original. Then publish at arcadelab.ai/publish.