Untitled

<!DOCTYPE html>
<html>
<head>
<title>Mini Clash Royale</title>
<style>
body { background:#222; color:white; text-align:center; font-family:Arial }
canvas { background:#4aa; border:4px solid black; touch-action: manipulation; }
button { font-size:14px; margin:4px; padding:8px }
</style>
</head>
<body>

<h2>Mini Clash Royale</h2>
<p>Click a card, then click a lane</p>

<div>
<button onclick="selectCard('knight')">Knight (3)</button>
<button onclick="selectCard('archer')">Archer (2)</button>
<button onclick="selectCard('giant')">Giant (5)</button>
</div>

<p id="info"></p>
<canvas id="game" width="700" height="400"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let selectedCard = null;
let elixir = 10;
let crownsPlayer = 0;
let crownsEnemy = 0;

const lanes = [150, 250];

const playerTowers = [
  {x:80, y:150, hp:300},
  {x:80, y:250, hp:300},
  {x:40, y:200, hp:500} // king
];

const enemyTowers = [
  {x:620, y:150, hp:300},
  {x:620, y:250, hp:300},
  {x:660, y:200, hp:500}
];

let troops = [];

const cards = {
  knight:{hp:120, dmg:6, cost:3, speed:0.6, range:15},
  archer:{hp:70, dmg:4, cost:2, speed:0.7, range:60},
  giant:{hp:300, dmg:10, cost:5, speed:0.3, range:15}
};

function selectCard(card){ selectedCard = card; }

canvas.onclick = e => {
  if(!selectedCard) return;
  let y = e.offsetY < 200 ? lanes[0] : lanes[1];
  let c = cards[selectedCard];
  if(elixir >= c.cost){
    elixir -= c.cost;
    troops.push({
      side:"player",
      card:selectedCard,
      x:120,
      y:y,
      hp:c.hp
    });
  }
};

function spawnEnemy(){
  let options = ["knight","archer","giant"];
  let card = options[Math.floor(Math.random()*options.length)];
  let lane = lanes[Math.floor(Math.random()*2)];
  troops.push({
    side:"enemy",
    card:card,
    x:580,
    y:lane,
    hp:cards[card].hp
  });
}

setInterval(()=>{ if(elixir<10) elixir++; },2000);
setInterval(()=>{ if(Math.random()<0.4) spawnEnemy(); },2500);

function update(){
  ctx.clearRect(0,0,700,400);

  drawTowers(playerTowers,"blue");
  drawTowers(enemyTowers,"red");

  troops.forEach(t=>{
    let c = cards[t.card];
    t.x += (t.side==="player"?c.speed:-c.speed);

    let targets = t.side==="player"?enemyTowers:playerTowers;
    let target = targets.find(to=>Math.abs(t.x-to.x)<c.range && Math.abs(t.y-to.y)<30 && to.hp>0);

    if(target) target.hp -= c.dmg/60;

    ctx.fillStyle = t.side==="player"?"cyan":"orange";
    ctx.fillRect(t.x-5,t.y-5,10,10);
  });

  checkCrowns();

  document.getElementById("info").innerText =
    `Elixir: ${elixir} | You 👑 ${crownsPlayer} - ${crownsEnemy} 👑 AI`;

  requestAnimationFrame(update);
}

function drawTowers(towers,color){
  ctx.fillStyle=color;
  towers.forEach(t=>{
    if(t.hp>0){
      ctx.fillRect(t.x-15,t.y-20,30,40);
      ctx.fillStyle="white";
      ctx.fillText(Math.floor(t.hp),t.x-15,t.y-25);
      ctx.fillStyle=color;
    }
  });
}

function checkCrowns(){
  if(playerTowers[2].hp<=0){ alert("You Lose!"); location.reload(); }
  if(enemyTowers[2].hp<=0){ alert("You Win!"); location.reload(); }

  playerTowers.slice(0,2).forEach(t=>{
    if(t.hp<=0 && !t.down){ crownsEnemy++; t.down=true; }
  });
  enemyTowers.slice(0,2).forEach(t=>{
    if(t.hp<=0 && !t.down){ crownsPlayer++; t.down=true; }
  });
}

update();
</script>

</body>
</html>
Editor is loading...