صفحه وب

این درست کن <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>ماجراجویی قارچی</title> <style> *{box-sizing:border-box} body{margin:0;background:#152447;color:white;font-family:Tahoma;text-align:center} header{padding:10px;display:flex;justify-content:space-around} canvas{display:block;width:100%;height:62vh;background:#78dfff;touch-action:none} #controls{display:flex;justify-content:space-around;gap:8px;padding:12px} button{border:0;border-radius:14px;padding:16px;font-size:22px;font-weight:bold;touch-action:none} .ctrl{background:#3971bd;color:white;flex:1} #jump{background:#f5a033;flex:1.5} #menu{position:fixed;inset:0;background:linear-gradient(#137ad2,#5bd6e8);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px} #menu h1{font-size:30px} #start{background:#35df68;color:#123b1c} </style> </head> <body> <header> <b>🍄 ماجراجویی قارچی</b> <span>🪙 <b id="score">0</b></span> </header> <canvas id="game"></canvas> <div id="controls"> <button class="ctrl" id="left">◀</button> <button id="jump">⬆ پرش بلند</button> <button class="ctrl" id="right">▶</button> </div> <div id="menu"> <div style="font-size:65px">🍄⭐</div> <h1>ماجراجویی قارچی</h1> <p>سکه جمع کن و به پرچم برس!</p> <button id="start">▶ شروع بازی</button> </div> <script> const c=document.getElementById('game'); const ctx=c.getContext('2d'); const menu=document.getElementById('menu'); const scoreBox=document.getElementById('score'); let W,H,active=false,cam=0,score=0; let p,coins,enemies,platforms; let k={left:false,right:false,jump:false},oldJump=false; function size(){ c.width=innerWidth; c.height=Math.max(220,innerHeight*.62); W=c.width;H=c.height; if(!active)draw(); } window.addEventListener('resize',size); function reset(){ cam=0;score=0;scoreBox.textContent=0; p={x:30,y:H-100,w:28,h:35,vy:0,ground:false}; platforms=[ [0,H-40,430,40],[500,H-40,330,40], [900,H-40,330,40],[1300,H-40,650,40], [140,H-110,100,15],[300,H-165,100,15], [550,H-115,110,15],[700,H-170,100,15], [960,H-115,110,15],[1100,H-170,100,15], [1380,H-115,110,15],[1540,H-170,100,15] ]; coins=Array.from({length:23},(_,i)=>({ x:100+i*77,y:H-100-(i%3)*32,taken:false })); enemies=[ {x:320,min:260,max:420,d:1}, {x:580,min:520,max:790,d:-1}, {x:1000,min:920,max:1190,d:1}, {x:1450,min:1340,max:1750,d:-1} ]; } function start(){ reset();active=true;menu.style.display='none'; } document.getElementById('start').onclick=start; function bind(id,key){ let b=document.getElementById(id); b.onpointerdown=e=>{ e.preventDefault();k[key]=true; try{b.setPointerCapture(e.pointerId)}catch(_){} }; const up=()=>k[key]=false; b.onpointerup=up;b.onpointercancel=up; b.onlostpointercapture=up; } bind('left','left');bind('right','right');bind('jump','jump'); function end(win){ active=false;menu.style.display='flex'; menu.innerHTML=` <div style="font-size:60px">${win?'🏆':'💫'}</div> <h1>${win?'آفرین! برنده شدی!':'دوباره تلاش کن!'}</h1> <p>امتیاز: ${score}</p> <button id="start">▶ بازی دوباره</button>`; document.getElementById('start').onclick=start; } function update(){ if(!active)return; p.x+= (k.right?4:0)-(k.left?4:0); p.x=Math.max(0,Math.min(1870,p.x)); if(k.jump&&!oldJump&&p.ground){ p.vy=-14;p.ground=false; } oldJump=k.jump; let oldY=p.y; p.vy=Math.min(11,p.vy+.5); p.y+=p.vy;p.ground=false; for(const q of platforms){ if(p.vy>=0&&p.x+p.w>q[0]&&p.x<q[0]+q[2]&& oldY+p.h<=q[1]+3&&p.y+p.h>=q[1]){ p.y=q[1]-p.h;p.vy=0;p.ground=true; } } if(p.y>H+70){end(false);return} for(const coin of coins){ if(!coin.taken&&p.x<coin.x+12&&p.x+p.w>coin.x-12&& p.y<coin.y+12&&p.y+p.h>coin.y-12){ coin.taken=true;score+=10;scoreBox.textContent=score; } } for(const e of enemies){ e.x+=e.d*1.2; if(e.x<e.min||e.x>e.max)e.d*=-1; if(p.x<e.x+25&&p.x+p.w>e.x&& p.y<e.y+25&&p.y+p.h>e.y){ if(p.vy>1&&oldY+p.h<e.y+14){ e.x=e.min;p.vy=-9;score+=20;scoreBox.textContent=score; }else{ p.x=Math.max(30,p.x-90);p.y=H-100;p.vy=0; } } } cam=Math.max(0,Math.min(1900-W,p.x-W*.3)); if(p.x>1830)end(true); } function draw(){ ctx.clearRect(0,0,W,H); ctx.fillStyle='#78dfff';ctx.fillRect(0,0,W,H); ctx.fillStyle='#ffe45c';ctx.beginPath(); ctx.arc(W-55,45,23,0,Math.PI*2);ctx.fill(); for(let i=0;i<7;i++){ let x=((i*150-cam*.2)%(W+100)+W+100)%(W+100)-40; ctx.fillStyle='white';ctx.fillRect(x,65+i%3*25,50,15); ctx.fillRect(x+12,52+i%3*25,26,17); } ctx.fillStyle='#58bd62'; for(let i=0;i<9;i++){ ctx.beginPath();ctx.ellipse(i*220-cam*.4,H,140,75,0,0,Math.PI*2);ctx.fill(); } ctx.save();ctx.translate(-cam,0); for(const q of platforms){ ctx.fillStyle='#a56b37';ctx.fillRect(q[0],q[1],q[2],q[3]); ctx.fillStyle='#32c650';ctx.fillRect(q[0],q[1],q[2],8); } for(const coin of coins)if(!coin.taken){ ctx.fillStyle='#ffcf25';ctx.beginPath(); ctx.ellipse(coin.x,coin.y,7,10,0,0,Math.PI*2);ctx.fill(); ctx.strokeStyle='#d68c0e';ctx.lineWidth=2;ctx.stroke(); } for(const e of enemies){ ctx.fillStyle='#c93747';ctx.fillRect(e.x,e.y+5,26,19); ctx.fillStyle='white';ctx.fillRect(e.x+4,e.y+9,6,6); ctx.fillRect(e.x+16,e.y+9,6,6); ctx.fillStyle='#222';ctx.fillRect(e.x+6,e.y+11,3,3); ctx.fillRect(e.x+18,e.y+11,3,3); } ctx.fillStyle='#ddd';ctx.fillRect(1850,H-145,5,105); ctx.fillStyle='#f13d48';ctx.beginPath(); ctx.moveTo(1855,H-145);ctx.lineTo(1890,H-130); ctx.lineTo(1855,H-112);ctx.fill(); // قهرمان پیکسلی ctx.fillStyle='#e83c35';ctx.fillRect(p.x+3,p.y,22,9); ctx.fillRect(p.x,p.y+7,28,7); ctx.fillStyle='#ffd0a0';ctx.fillRect(p.x+5,p.y+14,18,11); ctx.fillStyle='#2865dc';ctx.fillRect(p.x+2,p.y+25,24,7); ctx.fillStyle='#59351e';ctx.fillRect(p.x+1,p.y+31,11,5); ctx.fillRect(p.x+17,p.y+31,11,5); ctx.fillStyle='#222';ctx.fillRect(p.x+18,p.y+17,3,4); ctx.restore(); } function loop(){update();draw();requestAnimationFrame(loop)} size();reset();loop(); </script> </body> </html> خ