查看“PVP比赛专用”的源代码

<div style="display: flex; justify-content: space-between; align-items: flex-start;">
  <!-- 左边玩家 -->
  <div>
    <h3 style="color:blue;">玩家1</h3>
    <div>Ban: <span id="ban1"></span></div>
    <div>Pick: <span id="pick1"></span></div>
  </div>

  <!-- 中间精灵选择区 -->
  <div style="text-align:center;">
    <h3>点击精灵进行 Ban / Pick</h3>
    <div id="sprite-grid" style="display: grid; grid-template-columns: repeat(4, 80px); gap: 8px;"></div>
    <button onclick="nextStep()">下一步</button>
    <div>当前步骤：<span id="step-display">Ban - 玩家1</span></div>
  </div>

  <!-- 右边玩家 -->
  <div>
    <h3 style="color:brown;">玩家2</h3>
    <div>Ban: <span id="ban2"></span></div>
    <div>Pick: <span id="pick2"></span></div>
  </div>
</div>

<script>
const sprites = [
  { id: 1, name: "布布种子", img: "头像-1.png" },
  { id: 2, name: "布布草", img: "头像-2.png" },
  { id: 3, name: "布布花", img: "头像-3.png" },
  { id: 4, name: "伊优", img: "头像-4.png" },
  { id: 5, name: "尤里安", img: "头像-5.png" },
  { id: 6, name: "巴鲁斯", img: "头像-6.png" },
  { id: 7, name: "小火猴", img: "头像-7.png" },
  { id: 8, name: "烈火猴", img: "头像-8.png" },
  { id: 9, name: "烈焰猩猩", img: "头像-9.png" },
  { id: 10, name: "皮皮", img: "头像-10.png" },
  { id: 11, name: "比比波", img: "头像-11.png" },
  { id: 12, name: "波克尔", img: "头像-12.png" }
];

const steps = [
  "ban1", "ban2", "ban1", "ban2",
  "pick1", "pick2", "pick2", "pick1",
  "pick1", "pick2", "pick2", "pick1"
];
let currentStep = 0;

function renderGrid() {
  const grid = document.getElementById("sprite-grid");
  sprites.forEach(sprite => {
    const img = document.createElement("img");
    img.src = "/images/" + sprite.img;
    img.alt = sprite.name;
    img.title = sprite.name;
    img.style.width = "80px";
    img.style.cursor = "pointer";
    img.onclick = () => pickSprite(sprite);
    grid.appendChild(img);
  });
}

function pickSprite(sprite) {
  const step = steps[currentStep];
  const el = document.getElementById(step);
  if (el && !el.textContent.includes(sprite.name)) {
    el.textContent += `[${sprite.name}] `;
  }
}

function nextStep() {
  if (currentStep < steps.length - 1) {
    currentStep++;
    updateStepDisplay();
  }
}

function updateStepDisplay() {
  const step = steps[currentStep];
  const phase = step.includes("ban") ? "Ban" : "Pick";
  const player = step.endsWith("1") ? "玩家1" : "玩家2";
  document.getElementById("step-display").textContent = `${phase} - ${player}`;
}

renderGrid();
updateStepDisplay();
</script>