PVP比赛专用

玩家1

Ban:

Pick:

点击精灵进行 Ban / Pick

   <button onclick="nextStep()">下一步</button>

当前步骤：Ban - 玩家1

玩家2

Ban:

Pick:

<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>