PVP比赛专用:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的3个中间版本) | |||
第11行: | 第11行: | ||
<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> | ||
// | 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" } | |||
]; | |||
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日 (四) 07:03的最新版本
玩家1
Ban:
Pick:
点击精灵进行 Ban / Pick
当前步骤:Ban - 玩家1
玩家2
Ban:
Pick:
👥 当前在线人数:65