بازی جذاب جانوران
by BoldFlare15163 lines17.7 KB
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>بازی جذاب جانوران</title>
<style>
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif}
body{overflow-x:hidden;color:#24324a;background:linear-gradient(135deg,#dff7ff,#fff1fa 48%,#eaffdc);user-select:none}
button,input{font:inherit}button{cursor:pointer;border:0}
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cloud{position:absolute;width:150px;height:55px;background:#fff9;border-radius:60px;filter:blur(.2px);animation:float 7s ease-in-out infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud:before{width:70px;height:70px;left:22px;bottom:0}.cloud:after{width:85px;height:85px;right:20px;bottom:0}
.c1{top:8%;left:4%}.c2{top:24%;right:5%;animation-delay:2s;transform:scale(.75)}
.sun{position:absolute;top:4%;right:42%;font-size:60px;animation:spin 20s linear infinite}
.spark{position:absolute;font-size:25px;animation:float 4s ease-in-out infinite}
.s1{left:15%;top:35%}.s2{right:16%;top:65%;animation-delay:1s}.s3{left:45%;bottom:7%;animation-delay:2s}
@keyframes float{50%{transform:translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pulse{50%{transform:scale(1.05)}}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}
.wrap{position:relative;z-index:1;width:min(1100px,94vw);margin:auto;padding:22px 0 35px}
.screen{min-height:calc(100vh - 40px);display:none;align-items:center;justify-content:center}.screen.active{display:flex}
.card,.panel,.zone{background:#ffffffc9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:2px solid #fff;box-shadow:0 18px 45px #52658b22;border-radius:30px}
.welcome{width:min(720px,100%);padding:34px;text-align:center;animation:pop .5s ease}
.animals{font-size:52px;letter-spacing:7px;margin-bottom:10px}.welcome h1{font-size:clamp(30px,6vw,52px);margin:8px 0;color:#6845a8}.welcome h2{margin:0 0 20px;color:#279db4;font-size:clamp(18px,4vw,28px)}
.welcome p{font-size:18px;line-height:1.9;margin:8px}.field{text-align:right;margin:25px auto;max-width:500px}.field label{display:block;font-weight:bold;margin-bottom:8px}
.inputbox{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid #d9c9f6;border-radius:18px;padding:7px 14px}.inputbox span{font-size:28px}.inputbox input{width:100%;border:0;outline:0;font-size:17px;padding:10px;background:transparent}
.start,.again,.home{padding:15px 30px;border-radius:20px;color:#fff;font-weight:bold;font-size:20px;background:linear-gradient(135deg,#8b5cf6,#27c8c8);box-shadow:0 10px 25px #6d55b544;transition:.2s}.start:hover,.again:hover,.home:hover{transform:translateY(-3px);filter:brightness(1.05)}
.credit{margin-top:25px;color:#7d6d9e;font-weight:bold}
.top{width:100%;padding:14px 16px}.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.stat{padding:10px 14px;border-radius:18px;background:#ffffffb8;font-weight:bold}.score{text-align:left}.timer{text-align:center;font-size:25px}.student{text-align:right}.hourglass{display:inline-block;animation:float 1.2s ease-in-out infinite}
.toolbar{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.small{padding:9px 13px;border-radius:14px;background:#fff;color:#555;box-shadow:0 5px 15px #00000012}
.progressbox{margin:14px 0}.progresslabel{font-weight:bold;margin-bottom:6px}.bar{height:14px;background:#ffffff99;border-radius:20px;overflow:hidden}.fill{height:100%;width:0;background:linear-gradient(90deg,#55d6be,#8b5cf6,#ff91ba);transition:width .4s}
.intro{text-align:center;font-size:17px;line-height:1.8}.zones{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.zone{min-height:180px;padding:18px;text-align:center;transition:.25s;border:3px dashed}.vertebrate{border-color:#56c9a7;background:linear-gradient(145deg,#eafff6,#e3f8ff)}.invertebrate{border-color:#dd8edb;background:linear-gradient(145deg,#fff0fa,#f2eaff)}.zone.over{transform:scale(1.02);box-shadow:0 0 30px #7be1d3}.zone h2{margin:5px;font-size:23px}.zone .hint{font-size:14px;opacity:.75}
.source{padding:18px}.source h2{text-align:center;margin:0 0 15px}.creatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:12px}.animal{touch-action:none;min-height:108px;padding:10px;border-radius:20px;background:#ffffffcf;border:2px solid #fff;box-shadow:0 8px 18px #556b8b18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .15s;position:relative}.animal .emoji{font-size:45px;line-height:1}.animal .name{font-weight:bold;font-size:14px}.animal.dragging{position:fixed;z-index:1000;transform:scale(1.13) rotate(2deg);box-shadow:0 18px 35px #33415544;pointer-events:none;width:120px}
.correct{animation:pop .35s ease}.wrong{animation:shake .35s ease}
.toast{position:fixed;z-index:2000;top:18px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:18px;color:#fff;font-weight:bold;box-shadow:0 10px 30px #0002;display:none}.toast.show{display:block;animation:pop .25s}.toast.ok{background:#22b981}.toast.bad{background:#ef6b8b}
.modal{position:fixed;inset:0;background:#27324a66;backdrop-filter:blur(5px);z-index:1500;display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modalbox{width:min(600px,95vw);padding:30px;text-align:center;animation:pop .35s}.modalbox h2{font-size:32px;color:#7048aa}.bigscore{font-size:58px;font-weight:900;color:#ef76a9;margin:8px}.resultline{font-size:18px;margin:9px}.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}.home{background:linear-gradient(135deg,#f59e0b,#f97316)}.helptext{text-align:right;line-height:2;font-size:16px}
.confetti{position:fixed;top:-30px;z-index:1800;font-size:25px;animation:fall 2.5s linear forwards;pointer-events:none}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@media(max-width:650px){.wrap{padding:10px 0 20px}.welcome{padding:23px 16px}.animals{font-size:39px;letter-spacing:2px}.header{grid-template-columns:1fr auto 1fr}.stat{padding:8px 7px;font-size:13px}.timer{font-size:21px}.zones{grid-template-columns:1fr}.zone{min-height:145px}.creatures{grid-template-columns:repeat(3,1fr);gap:8px}.animal{min-height:100px;padding:6px}.animal .emoji{font-size:38px}.animal .name{font-size:12px}.source{padding:12px}.intro{font-size:15px}.toolbar{margin-top:5px}.small{font-size:13px;padding:8px 10px}}
@media(min-width:651px){.game{align-items:flex-start;padding-top:18px}}
</style>
</head>
<body>
<div class="bg"><div class="cloud c1"></div><div class="cloud c2"></div><div class="sun">☀️</div><div class="spark s1">✨</div><div class="spark s2">⭐</div><div class="spark s3">🫧</div></div>
<main class="wrap">
<section id="welcome" class="screen active">
<div class="card welcome">
<div class="animals">🐻 🐰 🦋 🐠 🦁</div>
<h1>بازی جذاب جانوران</h1>
<h2>مهرهداران و بیمهرگان را پیدا کن!</h2>
<p><b>سلام قهرمان کوچولو! 🌟</b></p>
<p>آمادهای وارد دنیای شگفتانگیز جانوران بشی؟<br>ببینیم چند تا جانور رو میتونی درست دستهبندی کنی! 🐾</p>
<div class="field"><label>اسم دانشآموز عزیز</label><div class="inputbox"><span>👦</span><input id="nameInput" maxlength="30" placeholder="نام خودت را اینجا بنویس..."></div></div>
<button class="start" id="startBtn">🚀 بزن بریم!</button>
<div class="credit">طراح: خانم دهقانی 🌷</div>
</div>
</section>
<section id="game" class="screen game">
<div class="top">
<div class="header">
<div class="stat student">👤 <span id="playerName">دانشآموز</span></div>
<div class="stat timer"><span class="hourglass">⏳</span> <span id="time">60</span></div>
<div class="stat score">🏆 امتیاز: <span id="score">0</span></div>
</div>
<div class="toolbar"><button class="small" id="soundBtn">🔊</button><button class="small" id="helpBtn">❓ راهنما</button></div>
<div class="progressbox"><div class="progresslabel">پیشرفت بازی: <span id="progress">0 / 17</span></div><div class="bar"><div class="fill" id="fill"></div></div></div>
<div class="intro">دانشآموز عزیز 🌟<br>جانوران مختلف را بر اساس مهرهدار یا بیمهره بودن جدا کن و هر جانور را در ستون مناسب قرار بده.<br><b>جانور را با انگشت بکش و در جای درست رها کن! 🐾</b></div>
<div class="zones">
<div class="zone vertebrate" data-type="v"><h2>🦴 جانوران مهرهدار</h2><div class="hint">دارای ستون مهره هستند</div><div class="placed"></div></div>
<div class="zone invertebrate" data-type="i"><h2>🦋 جانوران بیمهره</h2><div class="hint">ستون مهره ندارند</div><div class="placed"></div></div>
</div>
<div class="panel source"><h2>🐾 جانوران را پیدا کن!</h2><div class="creatures" id="creatures"></div></div>
</div>
</section>
</main>
<div id="toast" class="toast"></div>
<div id="helpModal" class="modal"><div class="card modalbox"><h2>❓ چطور بازی کنیم؟</h2><div class="helptext">
<p>1️⃣ یک جانور را با انگشت لمس کن.</p><p>2️⃣ آن را بکش.</p><p>3️⃣ داخل کادر مهرهدار یا بیمهره رها کن.</p><p>4️⃣ اگر درست باشد امتیاز میگیری! ⭐</p>
<hr><p>جانوران مهرهدار دارای ستون مهره هستند؛ مانند سگ، شیر و ماهی.</p><p>جانوران بیمهره ستون مهره ندارند؛ مانند پروانه، حلزون و عنکبوت.</p></div><button class="start" onclick="closeHelp()">باشه 😊</button></div></div>
<div id="resultModal" class="modal"><div class="card modalbox"><h2>🎉 بازی تمام شد! 🎉</h2><div>دانشآموز: <b id="resultName"></b></div><div class="bigscore">🏆 <span id="finalScore">0</span> / 100</div><div class="resultline">✅ پاسخهای صحیح: <b id="correctCount">0</b></div><div class="resultline">❌ پاسخهای اشتباه: <b id="wrongCount">0</b></div><div class="resultline">⏱️ زمان باقیمانده: <b id="remaining">0</b> ثانیه</div><h3 id="message"></h3><div class="buttons"><button class="again" id="againBtn">🔁 دوباره بازی کن</button><button class="home" id="homeBtn">🏠 بازگشت به صفحه اول</button></div></div></div>
<script>
const animals=[
['🐻','خرس','v'],['🐶','سگ','v'],['🐰','خرگوش','v'],['🐿️','سنجاب','v'],['🦖','دایناسور','v'],
['🐓','مرغ','v'],['🐠','ماهی','v'],['🐳','نهنگ','v'],['🦓','گورخر','v'],['🦁','شیر','v'],
['🦋','پروانه','i'],['🕷️','عنکبوت','i'],['🐙','اختاپوس','i'],['🐌','حلزون','i'],['🐜','مورچه','i'],['🦗','ملخ','i'],['🐝','زنبور','i']
];
const $=id=>document.getElementById(id);
let state={name:'',time:60,score:0,correct:0,wrong:0,done:0,timer:null,sound:true,ended:false};
let drag={el:null,data:null,ox:0,oy:0,origin:null};
function shuffle(a){return [...a].sort(()=>Math.random()-.5)}
function initCards(){
const box=$('creatures'); box.innerHTML='';
shuffle(animals).forEach((a,i)=>{
const el=document.createElement('div'); el.className='animal'; el.dataset.type=a[2]; el.dataset.name=a[1]; el.innerHTML=`<div class="emoji">${a[0]}</div><div class="name">${a[1]}</div>`;
el.addEventListener('pointerdown',startDrag); box.appendChild(el);
});
}
function startGame(){
const n=$('nameInput').value.trim();
if(!n){showToast('اول اسمت رو وارد کن قهرمان کوچولو 😊','bad');$('nameInput').focus();return}
localStorage.setItem('animalGameName',n); state={name:n,time:60,score:0,correct:0,wrong:0,done:0,timer:null,sound:true,ended:false};
$('playerName').textContent=n;$('welcome').classList.remove('active');$('game').classList.add('active');
updateUI();initCards(); clearInterval(state.timer);state.timer=setInterval(tick,1000);
}
function tick(){if(state.ended)return;state.time--;updateUI();if(state.time<=10)$('time').parentElement.style.animation='pulse .6s infinite';if(state.time<=0)endGame(false)}
function updateUI(){$('time').textContent=state.time;$('score').textContent=state.score;$('progress').textContent=`${state.done} / 17`;$('fill').style.width=(state.done/17*100)+'%'}
function startDrag(e){
if(state.ended)return;
e.preventDefault();const el=e.currentTarget;el.setPointerCapture?.(e.pointerId);
const r=el.getBoundingClientRect();drag={el,data:el.dataset.type,ox:e.clientX-r.left,oy:e.clientY-r.top,origin:el.parentElement};
el.classList.add('dragging');el.style.width=r.width+'px';document.body.appendChild(el);moveDrag(e);
const move=ev=>moveDrag(ev);const up=ev=>{document.removeEventListener('pointermove',move);document.removeEventListener('pointerup',up);finishDrag(ev)};
document.addEventListener('pointermove',move,{passive:false});document.addEventListener('pointerup',up,{once:true});
}
function moveDrag(e){if(!drag.el)return;e.preventDefault();drag.el.style.left=(e.clientX-drag.ox)+'px';drag.el.style.top=(e.clientY-drag.oy)+'px';highlight(e.clientX,e.clientY)}
function highlight(x,y){document.querySelectorAll('.zone').forEach(z=>{const r=z.getBoundingClientRect(),hit=x>=r.left&&x<=r.right&&y>=r.top&&y<=r.bottom;z.classList.toggle('over',hit)})}
function finishDrag(e){
if(!drag.el)return;const el=drag.el;document.querySelectorAll('.zone').forEach(z=>z.classList.remove('over'));
const target=[...document.querySelectorAll('.zone')].find(z=>{const r=z.getBoundingClientRect();return e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom});
el.classList.remove('dragging');el.style.position='';el.style.left='';el.style.top='';el.style.width='';
if(target&&target.dataset.type===drag.data){correct(el,target)}else{wrong(el)}
drag={el:null};
}
function correct(el,target){
state.correct++;state.done++;state.score=Math.min(100,state.score+Math.max(4,Math.round(70/17)));el.classList.add('correct');target.querySelector('.placed').appendChild(el);el.style.opacity='.9';el.style.pointerEvents='none';playTone(true);showToast('آفرین! درست گفتی 👏🌟','ok');updateUI();
if(state.done===17)endGame(true);
}
function wrong(el){
state.wrong++;el.classList.add('wrong');setTimeout(()=>el.classList.remove('wrong'),400);playTone(false);showToast('اشتباه شد! دوباره امتحان کن 😊','bad');
setTimeout(()=>{if(el.parentElement!==$('creatures')){$('creatures').appendChild(el)}},30);
}
function endGame(success){
if(state.ended)return;state.ended=true;clearInterval(state.timer);
const timeBonus=Math.round(state.time/60*30);state.score=Math.min(100,state.score+timeBonus);
if(success)celebrate();
$('resultName').textContent=state.name;$('correctCount').textContent=state.correct;$('wrongCount').textContent=state.wrong;$('remaining').textContent=state.time;
let msg=state.score>=90?'🌟 فوقالعاده بود! تو یک قهرمان جانورشناس هستی!':state.score>=70?'👏 خیلی خوب بود! فقط کمی بیشتر تمرین کن.':state.score>=50?'😊 خوب تلاش کردی! با کمی تمرین بهتر هم میشی!':'💪 ناامید نشو! دوباره بازی کن و این بار قویتر باش!';
$('message').textContent=msg;animateScore(state.score);saveBest();$('resultModal').classList.add('show');if(success)playTone('win');
}
function animateScore(n){let x=0;const el=$('finalScore');const t=setInterval(()=>{x+=Math.max(1,Math.ceil(n/25));if(x>=n){x=n;clearInterval(t)}el.textContent=x},35)}
function saveBest(){const best=Number(localStorage.getItem('animalBest')||0);if(state.score>best)localStorage.setItem('animalBest',state.score)}
function resetToGame(){location.reload()}
function goHome(){location.reload()}
function showToast(text,kind){const t=$('toast');t.textContent=text;t.className='toast show '+kind;clearTimeout(showToast.t);showToast.t=setTimeout(()=>t.className='toast',1500)}
function closeHelp(){$('helpModal').classList.remove('show')}
function celebrate(){for(let i=0;i<45;i++){const c=document.createElement('div');c.className='confetti';c.textContent=['🎉','⭐','✨','🎊','🌟'][i%5];c.style.left=Math.random()*100+'vw';c.style.animationDelay=Math.random()*.8+'s';document.body.appendChild(c);setTimeout(()=>c.remove(),3500)}}
let audioCtx;
function playTone(kind){if(!state.sound)return;try{audioCtx=audioCtx||new (window.AudioContext||window.webkitAudioContext)();const o=audioCtx.createOscillator(),g=audioCtx.createGain();o.connect(g);g.connect(audioCtx.destination);let f=kind===true?660:kind===false?180:kind==='win'?880:400;o.frequency.value=f;o.type='sine';g.gain.setValueAtTime(.0001,audioCtx.currentTime);g.gain.exponentialRampToValueAtTime(.08,audioCtx.currentTime+.01);g.gain.exponentialRampToValueAtTime(.0001,audioCtx.currentTime+.18);o.start();o.stop(audioCtx.currentTime+.2)}catch(e){}}
$('startBtn').onclick=startGame;$('againBtn').onclick=()=>location.reload();$('homeBtn').onclick=goHome;
$('helpBtn').onclick=()=>$('helpModal').classList.add('show');
$('soundBtn').onclick=()=>{state.sound=!state.sound;$('soundBtn').textContent=state.sound?'🔊':'🔇';if(state.sound)playTone(true)}
const saved=localStorage.getItem('animalGameName');if(saved)$('nameInput').value=saved;
</script>
</body>
</html>Game Source: بازی جذاب جانوران
Creator: BoldFlare15
Libraries: none
Complexity: moderate (163 lines, 17.7 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: game-boldflare15" to link back to the original. Then publish at arcadelab.ai/publish.