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

<html>
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
  <!-- 玩家1 -->
  <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; margin: 10px auto;"></div>
    <button onclick="nextStep()">下一步</button>
    <div>当前步骤：<span id="step-display">Ban - 玩家1</span></div>
  </div>

  <!-- 玩家2 -->
  <div>
    <h3 style="color:red;">玩家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: "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: "