实现图片偏好排序游戏遇阻，求JS代码修正方案

原代码的核心问题是采用了顺序两两对比所有图片的逻辑，完全没有实现需求中「新图片与已排序列表从后往前逐个对比、找到正确位置插入」的核心规则，这是功能不符合预期的根本原因。以下是符合需求的完整实现代码：

const images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let result = [];
// 当前待插入的图片索引（从第3张开始，对应索引2）
let currentImageIdx = 2;
// 当前正在对比的已排序列表位置，初始为最后一位
let currentComparePos;

const bottomUpForm = document.getElementById("bottomUpForm");
const bottomUpTitle = document.getElementById("bottomUpTitle");

// 初始化：生成前两张图片的对比
function initFirstPair() {
    generatePair(images[0], images[1]);
}

// 生成对比图片对
function generatePair(imgAId, imgBId) {
    const imagePairContainer = document.createElement("div");
    imagePairContainer.className = "choice-container";

    const imgA = document.createElement("img");
    imgA.src = `/images/obj${imgAId}.jpg`;
    imgA.alt = `Image ${imgAId}`;
    imgA.className = "choice-image";

    const imgB = document.createElement("img");
    imgB.src = `/images/obj${imgBId}.jpg`;
    imgB.alt = `Image ${imgBId}`;
    imgB.className = "choice-image";

    imgA.addEventListener("click", () => handleSelection(imgAId, imgBId));
    imgB.addEventListener("click", () => handleSelection(imgBId, imgAId));

    imagePairContainer.appendChild(imgA);
    imagePairContainer.appendChild(imgB);

    bottomUpForm.innerHTML = "";
    bottomUpForm.appendChild(imagePairContainer);
}

// 处理用户选择
function handleSelection(selectedId, unselectedId) {
    // 处理初始的前两张图片
    if (result.length === 0) {
        result.push(selectedId, unselectedId);
        // 开始处理第3张图片，初始对比位置是列表最后一位
        currentComparePos = result.length - 1;
        generatePair(images[currentImageIdx], result[currentComparePos]);
        return;
    }

    // 判断是新图片胜出还是已列表项胜出
    const currentNewImage = images[currentImageIdx];
    if (selectedId === currentNewImage) {
        // 新图片胜出，继续往前对比
        currentComparePos--;
        if (currentComparePos < 0) {
            // 已经比到列表头部，插入到最前面
            result.unshift(currentNewImage);
            moveToNextImage();
        } else {
            // 继续和前一项对比
            generatePair(currentNewImage, result[currentComparePos]);
        }
    } else {
        // 已列表项胜出，插入到当前对比位置的下一位
        result.splice(currentComparePos + 1, 0, currentNewImage);
        moveToNextImage();
    }
}

// 切换到下一张待插入的图片
function moveToNextImage() {
    currentImageIdx++;
    if (currentImageIdx >= images.length) {
        // 所有图片排序完成，展示结果
        bottomUpTitle.innerHTML = "Result:";
        bottomUpForm.innerHTML = result.join(", ");
        alert("Final Result: " + result.join(", "));
        return;
    }
    // 重置对比位置为当前列表最后一位
    currentComparePos = result.length - 1;
    generatePair(images[currentImageIdx], result[currentComparePos]);
}

// 启动游戏
initFirstPair();

关键逻辑说明 #

• 初始流程：先对比前两张图片，生成初始的偏好列表
• 新图片插入逻辑：
  • 每张新图片从已排序列表的最后一位开始对比
  • 新图片胜出则继续与前一位对比，直到落败或到达列表头部
  • 新图片落败则直接插入到当前对比位置的下一位
• 状态跟踪：用currentImageIdx跟踪待插入的图片，用currentComparePos跟踪当前对比的列表位置，确保每一步都符合需求的排序规则

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