sans-titre

<!DOCTYPE html>
<html lang="fr">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Anime Clash Arena</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#080916;color:white;font-family:system-ui;text-align:center}
h1{margin:12px 0 2px;color:#70eaff;text-shadow:0 0 20px #00aaff}
p{margin:5px;font-size:13px;color:#c7c8e8}
#wrap{max-width:950px;margin:auto;padding:8px}
canvas{width:100%;background:#11152d;border:2px solid #423c91;border-radius:12px;display:block;touch-action:none}
.hud{display:flex;gap:10px;align-items:center;margin:8px 0}
.side{flex:1}.name{font-weight:900}.bar{height:15px;background:#29263f;border:1px solid #777;border-radius:10px;overflow:hidden}
.fill{height:100%;width:100%;background:linear-gradient(90deg,#00d9ff,#6b71ff);transition:width .15s}
#ehp{background:linear-gradient(90deg,#ff347f,#ffb33d)}
#msg{color:#ffe67a;min-height:24px;font-weight:bold}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:10px 0}
button{background:#191b3c;border:1px solid #6a70ff;color:white;border-radius:12px;padding:13px 16px;font-weight:bold;touch-action:manipulation}
button:active{background:#633dbe;transform:scale(.96)}
.small{font-size:11px;color:#a9accf}
</style>
<div id="wrap">
<h1>⚡ ANIME CLASH ARENA ⚡</h1>
<p>Choisis tes attaques. Enchaîne les coups et déclenche ton ultime !</p>
<div class="hud"><div class="side"><div class="name">KAI · Foudre bleue</div><div class="bar"><div class="fill" id="php"></div></div><div class="small">VIE</div></div><b>VS</b><div class="side"><div class="name">ZERO · Néant violet</div><div class="bar"><div class="fill" id="ehp"></div></div><div class="small">VIE</div></div></div>
<canvas id="game" width="900" height="440"></canvas>
<div id="msg">FIGHT ! Approche-toi de ZERO pour frapper.</div>
<div class="controls">
<button data-act="left">◀ Gauche</button><button data-act="right">Droite ▶</button>
<button data-act="jump">⬆ Saut</button><button data-act="punch">👊 Poing [J]</button>
<button data-act="kick">🦵 Pied [K]</button><button data-act="blast">🔵 Énergie [L]</button>
<button data-act="ultimate">💥 ULTIME [U]</button><button onclick="restart()">↻ Rejouer</button>
</div>
<p class="small">Clavier : Q/D ou ←/→ pour bouger · Z/Espace pour sauter · J poing · K pied · L énergie · U ultime</p>
</div>
<script>
const c=document.querySelector('#game'),x=c.getContext('2d');
const php=document.querySelector('#php'),ehp=document.querySelector('#ehp'),msg=document.querySelector('#msg');
let keys={},fx=[],frame=0,over=false,lastAI=0,combo=0;
let p,e;
function restart(){
 p={x:180,y:330,vx:0,vy:0,hp:100,face:1,cd:0,energy:0,flash:0};
 e={x:700,y:330,vx:0,vy:0,hp:100,face:-1,cd:70,flash:0};
 fx=[];over=false;frame=0;combo=0;msg.textContent="FIGHT ! Approche-toi de ZERO pour frapper.";
}
restart();
function text(t,a,b,size,color){x.font=`900 ${size}px system-ui`;x.textAlign='center';x.fillStyle=color;x.fillText(t,a,b)}
function burst(a,b,color,n=16){for(let i=0;i<n;i++){let q=Math.random()*Math.PI*2,s=1+Math.random()*6;fx.push({x:a,y:b,vx:Math.cos(q)*s,vy:Math.sin(q)*s,life:25,color})}}
function fighter(f,isP){
 let col=isP?'#21dcff':'#d64cff',dark=isP?'#1262b9':'#6d248e';
 x.save();x.translate(f.x,f.y);x.scale(f.face,1);
 if(f.flash>0){x.globalAlpha=.55+Math.random()*.45;f.flash--}
 // aura
 let g=x.createRadialGradient(0,-55,5,0,-55,90);g.addColorStop(0,col+'bb');g.addColorStop(1,col+'00');
 x.fillStyle=g;x.beginPath();x.ellipse(0,-50,62,92,0,0,7);x.fill();
 // legs and boots
 x.strokeStyle=dark;x.lineWidth=18;x.lineCap='round';
 x.beginPath();x.moveTo(-10,-34);x.lineTo(-20,-5);x.lineTo(-29,0);x.stroke();
 x.beginPath();x.moveTo(10,-34);x.lineTo(23,-8);x.lineTo(34,-2);x.stroke();
 // body
 x.fillStyle=dark;x.beginPath();x.moveTo(-20,-82);x.lineTo(20,-82);x.lineTo(25,-39);x.lineTo(-22,-39);x.closePath();x.fill();
 x.strokeStyle=col;x.lineWidth=4;x.stroke();
 // arms
 x.strokeStyle=col;x.lineWidth=13;
 x.beginPath();x.moveTo(-17,-76);x.lineTo(-36,-57);x.lineTo(-43,-45);x.stroke();
 x.beginPath();x.moveTo(17,-76);x.lineTo(34,-61);x.lineTo(45,-64);x.stroke();
 // head
 x.fillStyle='#f4c5a7';x.beginPath();x.arc(0,-96,18,0,7);x.fill();
 // spiky hair
 x.fillStyle=isP?'#162544':'#24152f';
 x.beginPath();x.moveTo(-17,-101);x.lineTo(-28,-121);x.lineTo(-10,-113);x.lineTo(-7,-135);x.lineTo(5,-115);x.lineTo(20,-128);x.lineTo(17,-105);x.lineTo(10,-99);x.closePath();x.fill();
 x.fillStyle=col;x.fillRect(-12,-98,24,4);
 x.restore();
}
function attack(type){
 if(over||p.cd>0)return;
 let d=Math.abs(p.x-e.x);
 if(type==='jump'){if(p.y>=329)p.vy=-13;return}
 if(type==='left'||type==='right'){p.vx=type==='left'?-5:5;return}
 if(type==='punch'||type==='kick'){
  p.cd=type==='punch'?18:27;
  if(d<105){let damage=type==='punch'?7:12;e.hp=Math.max(0,e.hp-damage);e.vx=p.face*(type==='punch'?5:9);e.flash=8;burst(e.x,e.y-55,'#ffe76b',12);combo++;msg.textContent=combo>2?combo+" COUPS COMBO !":"Impact !";}
  else msg.textContent="Trop loin ! Rapproche-toi.";
 }
 if(type==='blast'||type==='ultimate'){
  if(type==='ultimate'&&p.energy<100){msg.textContent="Jauge ultime pas encore remplie !";return}
  if(type==='ultimate'){p.energy=0;p.cd=65;burst((p.x+e.x)/2,270,'#ff43f6',55);if(d<470){e.hp=Math.max(0,e.hp-35);e.flash=25;e.vx=p.face*12}msg.textContent="💥 ULTIME : ORBE DU CHAOS !";}
  else {p.cd=38;p.energy=Math.min(100,p.energy+22);fx.push({x:p.x+p.face*35,y:p.y-65,vx:p.face*9,vy:0,life:55,color:'#25eaff',shot:true});msg.textContent="🔵 ORBE FOUDROYANTE !";}
 }
}
function update(){
 frame++;
 if(!over){
  if(keys.ArrowLeft||keys.q||keys.Q)p.vx=-4.5;
  else if(keys.ArrowRight||keys.d||keys.D)p.vx=4.5;
  else p.vx*=.78;
  p.x+=p.vx;p.x=Math.max(35,Math.min(865,p.x));
  p.vy+=.65;p.y+=p.vy;if(p.y>330){p.y=330;p.vy=0}
  p.face=e.x>p.x?1:-1;
  if(p.cd>0)p.cd--;
  // IA
  let d=e.x-p.x;
  e.face=d>0?-1:1;
  if(Math.abs(d)>88)e.x+=Math.sign(-d)*1.45;
  else if(frame-lastAI>55&&e.cd<=0){
   lastAI=frame;e.cd=70;e.vx=Math.sign(-d)*5;
   if(Math.random()<.35){
    fx.push({x:e.x+e.face*28,y:e.y-65,vx:e.face*6,vy:0,life:48,color:'#d84aff',shot:true});
   }else if(Math.abs(d)<105){p.hp=Math.max(0,p.hp-8);p.flash=8;p.vx=e.face*5;burst(p.x,p.y-55,'#dc5aff',10);msg.textContent="ZERO t'a touché !"}
  }
  e.x+=e.vx;e.vx*=.8;e.x=Math.max(35,Math.min(865,e.x));if(e.cd>0)e.cd--;
  for(let f of fx){
   f.x+=f.vx;f.y+=f.vy;f.life--;
   if(f.shot&&Math.abs(f.x-(f.color==='#25eaff'?e.x:p.x))<30){
    if(f.color==='#25eaff'){e.hp=Math.max(0,e.hp-13);e.flash=10;p.energy=Math.min(100,p.energy+8)}
    else {p.hp=Math.max(0,p.hp-10);p.flash=8}
    burst(f.x,f.y,f.color,10);f.life=0;
   }
  }
  fx=fx.filter(f=>f.life>0);
  if(e.hp<=0){over=true;msg.textContent="🏆 VICTOIRE ! ZERO est vaincu !";burst(e.x,e.y-50,'#ffe56b',50)}
  if(p.hp<=0){over=true;msg.textContent="💀 K.-O. ! ZERO remporte le combat.";burst(p.x,p.y-50,'#ff356f',35)}
 }
 php.style.width=p.hp+'%';ehp.style.width=e.hp+'%';
 draw();requestAnimationFrame(update);
}
function draw(){
 let g=x.createLinearGradient(0,0,0,440);g.addColorStop(0,'#101333');g.addColorStop(.65,'#272052');g.addColorStop(1,'#080b19');x.fillStyle=g;x.fillRect(0,0,900,440);
 // moon
 x.fillStyle='#d9e6ff';x.beginPath();x.arc(450,105,48,0,7);x.fill();
 x.fillStyle='#5d5d9c';for(let i=0;i<9;i++){x.beginPath();x.arc(425+(i*17)%48,80+(i*23)%50,4,0,7);x.fill()}
 // skyline / temple
 for(let i=0;i<12;i++){let xx=i*82-10,h=55+(i*37)%120;x.fillStyle=i%2?'#171b3b':'#202044';x.fillRect(xx,280-h,65,h);x.fillStyle='#a44cff';for(let j=0;j<3;j++)x.fillRect(xx+10+j*17,290-h,4,9)}
 x.strokeStyle='#4e4cff';x.lineWidth=2;
 for(let i=0;i<9;i++){x.beginPath();x.moveTo(i*120,365);x.lineTo(450,250);x.stroke()}
 x.fillStyle='#141329';x.fillRect(0,350,900,90);
 x.strokeStyle='#34376b';for(let i=0;i<15;i++){x.beginPath();x.moveTo(i*65,350);x.lineTo(i*65-30,440);x.stroke()}
 // particles
 if(!over&&frame%5===0)fx.push({x:Math.random()*900,y:Math.random()*340,vx:(Math.random()-.5),vy:-.5,life:30,color:'#777cff'});
 for(let f of fx){x.globalAlpha=Math.max(0,f.life/30);x.fillStyle=f.color;x.shadowBlur=f.shot?20:8;x.shadowColor=f.color;x.beginPath();x.arc(f.x,f.y,f.shot?11:3,0,7);x.fill();x.shadowBlur=0;x.globalAlpha=1}
 fighter(p,true);fighter(e,false);
 if(over){x.fillStyle='#080916bb';x.fillRect(0,0,900,440);text(p.hp>0?'VICTOIRE !':'K.-O.',450,195,56,p.hp>0?'#6ffaff':'#ff4b9c');text('Appuie sur REJOUER',450,235,20,'white')}
}
document.querySelectorAll('[data-act]').forEach(b=>{
 const act=b.dataset.act;
 b.addEventListener('pointerdown',ev=>{ev.preventDefault();if(act==='left'||act==='right'){keys[act==='left'?'ArrowLeft':'ArrowRight']=true}else if(act==='jump'){attack('jump')}else attack(act)});
 b.addEventListener('pointerup',()=>{keys.ArrowLeft=false;keys.ArrowRight=false});
 b.addEventListener('pointerleave',()=>{keys.ArrowLeft=false;keys.ArrowRight=false});
});
document.addEventListener('keydown',ev=>{
 let k=ev.key;if(['ArrowLeft','ArrowRight',' '].includes(k))ev.preventDefault();keys[k]=true;
 if(ev.repeat)return;
 if(k==='j'||k==='J')attack('punch');if(k==='k'||k==='K')attack('kick');
 if(k==='l'||k==='L')attack('blast');if(k==='u'||k==='U')attack('ultimate');
 if(k==='z'||k==='Z'||k===' ')attack('jump');
});
document.addEventListener('keyup',ev=>keys[ev.key]=false);
update();
</script>
</html>