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: 8p…”)
 
无编辑摘要
 
(未显示同一用户的9个中间版本)
第1行: 第1行:
<html>
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
   <!-- 左边玩家 -->
   <!-- 玩家1 -->
   <div>
   <div>
     <h3 style="color:blue;">玩家1</h3>
     <h3 style="color:blue;">玩家1</h3>
第7行: 第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>
   </div>
   </div>


   <!-- 右边玩家 -->
   <!-- 玩家2 -->
   <div>
   <div>
     <h3 style="color:brown;">玩家2</h3>
     <h3 style="color:red;">玩家2</h3>
     <div>Ban: <span id="ban2"></span></div>
     <div>Ban: <span id="ban2"></span></div>
     <div>Pick: <span id="pick2"></span></div>
     <div>Pick: <span id="pick2"></span></div>
第25行: 第26行:
<script>
<script>
const sprites = [
const sprites = [
   { id: 1, name: "布布种子", img: "头像-1.png" },
   { id: 1, name: "布布种子", img: "https://wiki.len-chat.ca/images/7/78/头像-1.png" },
   { id: 2, name: "布布草", img: "头像-2.png" },
   { id: 2, name: "布布草", img: "https://wiki.len-chat.ca/images/3/3b/头像-2.png" },
   { id: 3, name: "布布花", img: "头像-3.png" },
   { id: 3, name: "布布花", img: "https://wiki.len-chat.ca/images/c/c5/头像-3.png" },
   { id: 4, name: "伊优", img: "头像-4.png" },
   { id: 4, name: "伊优", img: "https://wiki.len-chat.ca/images/e/e9/头像-4.png" },
   { id: 5, name: "尤里安", img: "头像-5.png" },
   { id: 5, name: "尤里安", img: "https://wiki.len-chat.ca/images/2/24/头像-5.png" },
   { id: 6, name: "巴鲁斯", img: "头像-6.png" },
   { id: 6, name: "巴鲁斯", img: "https://wiki.len-chat.ca/images/8/80/头像-6.png" },
   { id: 7, name: "小火猴", img: "头像-7.png" },
   { id: 7, name: "小火猴", img: "https://wiki.len-chat.ca/images/9/91/头像-7.png" },
   { id: 8, name: "烈火猴", img: "头像-8.png" },
   { id: 8, name: "烈火猴", img: "https://wiki.len-chat.ca/images/e/ee/头像-8.png" },
   { id: 9, name: "烈焰猩猩", img: "头像-9.png" },
   { id: 9, name: "烈焰猩猩", img: "https://wiki.len-chat.ca/images/1/12/头像-9.png" },
   { id: 10, name: "皮皮", img: "头像-10.png" },
   { id: 10, name: "皮皮", img: "https://wiki.len-chat.ca/images/f/fd/头像-10.png" }
  { id: 11, name: "比比波", img: "头像-11.png" },
  { id: 12, name: "波克尔", img: "头像-12.png" }
];
];


第44行: 第43行:
   "pick1", "pick2", "pick2", "pick1"
   "pick1", "pick2", "pick2", "pick1"
];
];
let currentStep = 0;
let currentStep = 0;


第50行: 第50行:
   sprites.forEach(sprite => {
   sprites.forEach(sprite => {
     const img = document.createElement("img");
     const img = document.createElement("img");
     img.src = "/images/" + sprite.img;
     img.src = sprite.img;
     img.alt = sprite.name;
     img.alt = sprite.name;
     img.title = sprite.name;
     img.title = sprite.name;
第85行: 第85行:
updateStepDisplay();
updateStepDisplay();
</script>
</script>
</html>

2025年5月15日 (四) 07:03的最新版本

玩家1

Ban:
Pick:

点击精灵进行 Ban / Pick

当前步骤:Ban - 玩家1

玩家2

Ban:
Pick:

👥 当前在线人数:36