Battle Legends Mobile

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Battle Legends Mobile</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#101827;color:white;
font-family:Arial;text-align:center}
header{padding:12px;background:#182b42}
button,select{padding:12px;margin:5px;border:0;
border-radius:9px;background:#18b98a;color:#071a20;
font-weight:bold}
#arena{display:block;width:100%;height:55vh;
background:#263f37;touch-action:none}
.stats{padding:8px}
.controls{display:flex;justify-content:space-around;
align-items:center}
#fire{background:#ffb12e}
</style>
</head>
<body>
<header>
<h2>⚡ BATTLE LEGENDS</h2>
<div class="stats">
💎 Diamonds: <span id="diamonds">0</span>
&nbsp; | &nbsp; Score: <span id="score">0</span>
</div>
</header>

<div>
<select id="mode">
<option>Battle Royale</option>
<option>BR Ranked</option>
<option>Lone Wolf</option>
<option>One Tap</option>
<option>CS Ranked</option>
<option>Clash Squad</option>
</select>
<select id="map">
<option>Green Valley</option>
<option>Desert Arena</option>
<option>Snow Base</option>
<option>Craftland</option>
</select>
</div>

<canvas id="arena"></canvas>

<div class="controls">
<button id="left">◀</button>
<button id="up">▲</button>
<button id="down">▼</button>
<button id="right">▶</button>
<button id="fire">TAG!</button>
</div>

<p id="message">Tap START and collect 10 targets!</p>
<button id="start">START / NEW MISSION</button>
<button id="claim">CLAIM MISSION 💎</button>

<script>
const c=document.getElementById("arena");
const ctx=c.getContext("2d");
const $=id=>document.getElementById(id);

let player={x:160,y:180};
let targets=[],shots=[],score=0,diamonds=0;
let running=false,missionDone=false;
let keys={};

function resize(){
 c.width=c.clientWidth;
 c.height=c.clientHeight;
 player.x=Math.min(player.x,c.width-20);
 player.y=Math.min(player.y,c.height-20);
 draw();
}
window.addEventListener("resize",resize);

function newMission(){
 score=0;shots=[];targets=[];
 player={x:c.width/2,y:c.height/2};
 for(let i=0;i<8;i++){
  targets.push({
   x:25+Math.random()*(c.width-50),
   y:25+Math.random()*(c.height-50),
   r:12
  });
 }
 missionDone=false;running=true;
 $("score").textContent=score;
 $("message").textContent=
 "Mode: "+$("mode").value+" | Map: "+$("map").value;
 draw();
}

function draw(){
 ctx.clearRect(0,0,c.width,c.height);
 const colors={
 "Green Valley":"#315c40",
 "Desert Arena":"#a78652",
 "Snow Base":"#8ba7b7",
 "Craftland":"#59466d"
 };
 ctx.fillStyle=colors[$("map").value]||"#315c40";
 ctx.fillRect(0,0,c.width,c.height);

 ctx.strokeStyle="#ffffff18";
 for(let x=0;x<c.width;x+=40){
  ctx.beginPath();ctx.moveTo(x,0);
  ctx.lineTo(x,c.height);ctx.stroke();
 }
 for(let y=0;y<c.height;y+=40){
  ctx.beginPath();ctx.moveTo(0,y);
  ctx.lineTo(c.width,y);ctx.stroke();
 }

 targets.forEach(t=>{
  ctx.fillStyle="#ffca48";
  ctx.beginPath();ctx.arc(t.x,t.y,t.r,0,Math.PI*2);
  ctx.fill();
  ctx.fillStyle="#17202b";
  ctx.fillRect(t.x-4,t.y-4,8,8);
 });

 shots.forEach(s=>{
  ctx.fillStyle="#67f4e2";
  ctx.beginPath();ctx.arc(s.x,s.y,5,0,Math.PI*2);
  ctx.fill();
 });

 ctx.fillStyle="#5be4ff";
 ctx.beginPath();
 ctx.arc(player.x,player.y,14,0,Math.PI*2);
 ctx.fill();
 ctx.fillStyle="white";
 ctx.fillRect(player.x-4,player.y-22,8,8);
}

function move(dx,dy){
 if(!running)return;
 player.x=Math.max(14,Math.min(c.width-14,player.x+dx));
 player.y=Math.max(14,Math.min(c.height-14,player.y+dy));
 draw();
}

["left","right","up","down"].forEach(id=>{
 const dirs={
 left:[-12,0],right:[12,0],up:[0,-12],down:[0,12]
 };
 const act=()=>move(...dirs[id]);
 $(id).addEventListener("pointerdown",e=>{
  e.preventDefault();act();
 });
});

function fire(){
 if(!running)return;
 shots.push({x:player.x,y:player.y,vx:9,vy:0});
 const s=shots[shots.length-1];
 for(let i=targets.length-1;i>=0;i--){
  const t=targets[i];
  if(Math.hypot(s.x-t.x,s.y-t.y)<65){
   targets.splice(i,1);
   score++;
   $("score").textContent=score;
   break;
  }
 }
 if(targets.length===0){
  running=false;missionDone=true;
  $("message").textContent=
   "Mission complete! Claim your free diamonds.";
 }
 draw();
}

$("fire").addEventListener("pointerdown",fire);
$("start").addEventListener("click",newMission);
$("claim").addEventListener("click",()=>{
 if(!missionDone){
  $("message").textContent=
   "Complete the mission first!";
  return;
 }
 diamonds+=10;
 $("diamonds").textContent=diamonds;
 missionDone=false;
 $("message").textContent="10 free diamonds earned!";
});

resize();
</script>
</body>
</html>