游戏脚本开发问题：按钮切换图片同步及最近三张图片记录

Hey there! Let's work through your game script issues one by one—sounds like you're close, just a few tweaks needed to get everything synced and tracking properly.

Key Issues & Fixes #

1. Syncing the Second Image When Switching

The main problem here is likely that you're only updating the first image's src and not propagating that change to the second image. We need to make sure every time we pick a new random image, we assign it to both image elements at the same time.

2. Getting the Updated Image src

If you're storing the initial src in a variable and never updating it, that's why you can't get the latest value. Instead, we'll pull the src directly from the DOM element every time we need it—this ensures we always have the current value.

3. Tracking & Displaying the Last 3 Random Images

We'll use an array to keep track of recent images, adding new ones to the front and trimming the array to stay at 3 items max. Then we'll render this array to the page so players can see it.

Full Working Example #

First, let's assume your HTML looks something like this (adjust IDs to match your actual code):

<button id="switch-btn">切换图片</button>
<img id="main-card" src="images/img1.jpg" alt="主卡牌">
<img id="sync-card" src="images/img1.jpg" alt="同步卡牌">
<div id="recent-cards">最近使用的卡牌：</div>

Now here's the updated JavaScript that fixes all your issues:

// 你的图片列表（替换成你实际的图片路径）
const cardImages = [
  "images/img1.jpg",
  "images/img2.jpg",
  "images/img3.jpg",
  "images/img4.jpg",
  "images/img5.jpg"
];

// 存储最近三张图片的数组
let recentCards = [];

// 获取页面元素（确保ID和你的HTML匹配！）
const switchButton = document.getElementById('switch-btn');
const mainCard = document.getElementById('main-card');
const syncCard = document.getElementById('sync-card');
const recentContainer = document.getElementById('recent-cards');

// 初始化：把初始图片加入最近列表
addToRecent(mainCard.src);
renderRecentCards();

// 点击按钮时触发的切换逻辑
switchButton.addEventListener('click', () => {
  // 随机选一张和当前主图不一样的图片（可选，避免重复切换到同一张）
  let newImageSrc;
  do {
    const randomIndex = Math.floor(Math.random() * cardImages.length);
    newImageSrc = cardImages[randomIndex];
  } while (newImageSrc === mainCard.src);

  // 同步更新两张图片的src
  mainCard.src = newImageSrc;
  syncCard.src = newImageSrc;

  // 更新最近使用列表并渲染
  addToRecent(newImageSrc);
  renderRecentCards();
});

// 把图片添加到最近列表，保持最多3个
function addToRecent(imageSrc) {
  // 先移除列表中已有的同一张图（避免重复展示）
  recentCards = recentCards.filter(card => card !== imageSrc);
  // 把新图片放到列表最前面
  recentCards.unshift(imageSrc);
  // 如果超过3张，删掉最后一张
  if (recentCards.length > 3) {
    recentCards.pop();
  }
}

// 把最近的图片渲染到页面上
function renderRecentCards() {
  // 清空容器，避免重复渲染
  recentContainer.innerHTML = "最近使用的卡牌：";
  
  // 为每张最近的图片创建元素并添加到容器
  recentCards.forEach(src => {
    const smallCard = document.createElement('img');
    smallCard.src = src;
    smallCard.alt = "最近卡牌";
    smallCard.style.width = "60px"; // 调整缩略图大小，按需修改
    smallCard.style.margin = "0 5px";
    recentContainer.appendChild(smallCard);
  });
}

Quick Notes to Adapt to Your Code #

• Double-check that all element IDs in the JS match exactly what's in your HTML.
• If you don't mind switching to the same image repeatedly, you can remove the do-while loop that prevents duplicates.
• Adjust the thumbnail size in renderRecentCards() to fit your game's UI.

This should get your image sync working, let you access the latest src values, and display the last 3 random images properly!

内容的提问来源于stack exchange，提问作者samlf3rd