PVP比赛专用：修订间差异

来自赛尔号精灵图鉴
跳转到导航 跳转到搜索
可视化wikitext
无编辑摘要
无编辑摘要
第8行： 第8行：
   </div>
   </div>


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


<script>
<script>
// 你的 sprites + banpick 逻辑（和你贴出的一致）...
const sprites = [
  { id: 1, name: "布布种子", img: "https://wiki.len-chat.ca/images/7/78/头像-1.png" },
  { id: 2, name: "布布草", img: "https://wiki.len-chat.ca/images/3/3b/头像-2.png" },
  { id: 3, name: "布布花", img: "https://wiki.len-chat.ca/images/c/c5/头像-3.png" },
  { id: 4, name: "伊优", img: "https://wiki.len-chat.ca/images/e/e9/头像-4.png" },
  { id: 5, name: "尤里安", img: "https://wiki.len-chat.ca/images/2/24/头像-5.png" },
  { id: 6, name: "巴鲁斯", img: "https://wiki.len-chat.ca/images/8/80/头像-6.png" },
  { id: 7, name: "小火猴", img: "https://wiki.len-chat.ca/images/9/91/头像-7.png" },
  { id: 8, name: "烈火猴", img: "https://wiki.len-chat.ca/images/e/ee/头像-8.png" },
  { id: 9, name: "烈焰猩猩", img: "https://wiki.len-chat.ca/images/1/12/头像-9.png" },
  { id: 10, name: "皮皮", img: "https://wiki.len-chat.ca/images/f/fd/头像-10.png" },
  { id: 11, name: "比比波", img: "https://wiki.len-chat.ca/images/6/63/头像-11.png" },
  { id: 12, name: "波克尔", img: "https://wiki.len-chat.ca/images/7/7a/头像-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 = 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();
renderGrid();
updateStepDisplay();
updateStepDisplay();
</script>
</script>
</html>
</html>

2025年5月15日 (四) 06:21的版本

玩家1

Ban:
Pick:

点击精灵进行 Ban / Pick

当前步骤：Ban - 玩家1

玩家2

Ban:
Pick:

👥 当前在线人数：66
取自“https://wiki.len-chat.ca/index.php?title=PVP比赛专用&oldid=5260”