三国沙盘出兵占地盘

by TurboShark21
131 lines4.7 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>三国沙盘占地盘</title>
<style>
*{box-sizing:border-box;font-family:"微软雅黑"}
body{background:#1a1a1a;color:#fff;margin:0;padding:10px}
#game{max-width:900px;margin:0 auto}
#mapContainer{position:relative;width:100%;height:520px;background:#3a2b26;border-radius:8px;overflow:hidden}
#mapImg{width:100%;height:100%;object-fit:cover;opacity:0.7}
.cityDot{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid #fff;cursor:pointer;transform:translate(-50%,-50%);font-size:10px;text-align:center;line-height:22px;color:#000;font-weight:bold}
.you{background:#4caf50}
.enemy{background:#f44336}
.neutral{background:#9e9e9e}
#info{margin:15px 0;padding:10px;background:#333;border-radius:6px}
button{padding:8px 14px;margin:4px;border:none;border-radius:4px;background:#2196f3;color:#fff;cursor:pointer}
</style>
</head>
<body>
<div id="game">
  <h2 style="text-align:center">🗺️ 三国沙盘出兵占地盘</h2>
  <div id="mapContainer">
    <img id="mapImg" src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/908fa0ec08fa513d7e8d4e6d3266d55fbb2fbd959.jpg">
  </div>
  <div id="info">
    <div>你的兵力：<span id="army">50</span></div>
    <div>占领城池：<span id="own">1</span> / 12</div>
    <div id="tip">玩法：点绿色城池出兵，打相邻城池，占领后每回合涨兵</div>
    <button onclick="nextTurn()">下一回合（涨兵+AI行动）</button>
  </div>
</div>

<script>
// 城池：name, x(%), y(%), owner(0中立/1你/2AI), army, 相邻城池索引
const cities = [
  {id:0,name:"凉州",x:15,y:20,o:0,arm:10,near:[1,3]},
  {id:1,name:"并州",x:30,y:15,o:0,arm:10,near:[0,2,4]},
  {id:2,name:"幽州",x:50,y:12,o:2,arm:20,near:[1,5]},
  {id:3,name:"长安",x:22,y:35,o:1,arm:15,near:[0,4,6]},
  {id:4,name:"洛阳",x:38,y:33,o:0,arm:12,near:[1,3,5,7]},
  {id:5,name:"邺城",x:55,y:30,o:2,arm:18,near:[2,4,8]},
  {id:6,name:"益州",x:18,y:60,o:0,arm:10,near:[3,7,9]},
  {id:7,name:"荆州",x:40,y:55,o:0,arm:14,near:[4,6,8,10]},
  {id:8,name:"许昌",x:60,y:45,o:2,arm:16,near:[5,7,11]},
  {id:9,name:"南中",x:25,y:78,o:0,arm:8,near:[6,10]},
  {id:10,name:"扬州",x:55,y:70,o:0,arm:12,near:[7,9,11]},
  {id:11,name:"江东",x:75,y:65,o:2,arm:22,near:[8,10]}
];

let fromCity = null;

function render(){
  const container = document.getElementById("mapContainer");
  // 清除旧点
  container.querySelectorAll(".cityDot").forEach(d=>d.remove());
  // 画城池点
  cities.forEach(c=>{
    const dot = document.createElement("div");
    dot.className = "cityDot " + (c.o===1?"you":c.o===2?"enemy":"neutral");
    dot.style.left = c.x + "%";
    dot.style.top = c.y + "%";
    dot.title = c.name + " 兵力:" + c.arm;
    dot.textContent = c.arm;
    dot.onclick = ()=>clickCity(c.id);
    container.appendChild(dot);
  });
  // 更新信息
  document.getElementById("army").textContent = cities.filter(c=>c.o===1).reduce((s,c)=>s+c.arm,0);
  document.getElementById("own").textContent = cities.filter(c=>c.o===1).length;
  checkWin();
}

function clickCity(id){
  const c = cities[id];
  if(c.o===1){
    fromCity = id;
    document.getElementById("tip").innerText = "已选【"+c.name+"】，点击相邻城池进攻";
  }else if(fromCity!==null && cities[fromCity].near.includes(id)){
    const att = cities[fromCity];
    const def = c;
    const cost = Math.floor(att.arm*0.6);
    if(att.arm>10){
      att.arm -= cost;
      if(cost>def.arm){
        def.o = 1;
        def.arm = cost-def.arm;
        document.getElementById("tip").innerText = "✅ 占领【"+def.name+"】！";
      }else{
        def.arm -= cost;
        document.getElementById("tip").innerText = "❌ 进攻失败，敌方剩余"+def.arm;
      }
    }else{
      document.getElementById("tip").innerText = "⚠️ 兵力不足！";
    }
    fromCity = null;
    render();
  }
}

function nextTurn(){
  // 你所有城涨兵
  cities.forEach(c=>{if(c.o===1) c.arm += 8;});
  // AI行动
  const aiCities = cities.filter(c=>c.o===2);
  aiCities.forEach(ai=>{
    const targets = ai.near.map(i=>cities[i]).filter(t=>t.o!==2);
    if(targets.length&&ai.arm>12){
      const t = targets[Math.floor(Math.random()*targets.length)];
      const cost = Math.floor(ai.arm*0.5);
      ai.arm -= cost;
      if(cost>t.arm){t.o=2;t.arm=cost-t.arm;}
      else t.arm -= cost;
    }
  });
  document.getElementById("tip").innerText = "新回合！城池自动涨兵，AI已行动";
  render();
}

function checkWin(){
  const own = cities.filter(c=>c.o===1).length;
  const ai = cities.filter(c=>c.o===2).length;
  if(own===12) alert("🎉 恭喜！统一三国！");
  if(own===0) alert("💀 游戏失败，被灭国了");
}

render();
</script>
</body>
</html>
Game Source: 三国沙盘出兵占地盘

Creator: TurboShark21
Libraries: none
Complexity: moderate (131 lines, 4.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-turboshark21" to link back to the original. Then publish at arcadelab.ai/publish.