|
|
| 第14行： |
第14行： |
| <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> |
| <img src="https://wiki.len-chat.ca/images/7/78/头像-1.png" style="width:80px">
| |
| </div> | | </div> |
|
| |
|
| 第26行： |
第25行： |
|
| |
|
| <script> | | <script> |
| const sprites = [
| | // 你的 sprites + banpick 逻辑（和你贴出的一致）... |
| { 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/4/49/头像-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; // ✅ 不拼 /images/
| |
| 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> |