如何在JavaScript的startNewRound函数中实现同价格区间物品配对

需求说明 #

需要添加以下价格区间数组：

const priceRanges = [
  { min: 0, max: 100000 },
  { min: 100000, max: 500000 },
  { min: 500000, max: 1000000 },
  { min: 1000000, max: 5000000 },
  { min: 5000000, max: 10000000 },
  { min: 10000000, max: 25000000 },
  { min: 25000000, max: 50000000 },
  { min: 50000000, max: 100000000 },
  { min: 100000000, max: 500000000 },
  { min: 500000000, max: 1000000000 },
];

并修改startNewRound函数，使其从同一个价格区间内随机选取2个不同的物品，展示它们的名称、图片和价值。

修改后的完整代码 #

const priceRanges = [
  { min: 0, max: 100000 },
  { min: 100000, max: 500000 },
  { min: 500000, max: 1000000 },
  { min: 1000000, max: 5000000 },
  { min: 5000000, max: 10000000 },
  { min: 10000000, max: 25000000 },
  { min: 25000000, max: 50000000 },
  { min: 50000000, max: 100000000 },
  { min: 100000000, max: 500000000 },
  { min: 500000000, max: 1000000000 },
];

const items = [ 
  { name: "Lamborghini Hurracan", value: 400000, imageSrc: "https://i.ibb.co/D4s85gw/KURCINA.png"}, 
  { name: "Lamborghini Revuelto", value: 600000, imageSrc: "https://i.ibb.co/NpjS7sw/image-2023-10-04-235935431.png"},
  { name: "The Chinese Terracotta Army", value: 30000000, imageSrc:"https://images.unsplash.com/photo-1528163186890-de9b86b54b51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dGVycmFjb3R0YSUyMGFybXl8ZW58MHx8MHx8fDA%3D&w=1000&q=80"},
  // 补充同区间物品用于测试
  { name: "Ferrari F8", value: 330000, imageSrc: "example-url-1.png"},
  { name: "McLaren 720S", value: 310000, imageSrc: "example-url-2.png"},
  { name: "Van Gogh's Starry Night", value: 150000000, imageSrc: "example-url-3.png"},
  { name: "Mona Lisa", value: 860000000, imageSrc: "example-url-4.png"},
];

let item1, item2, correctIndex;
// 假设这些DOM元素已存在
const questionTextElement = document.getElementById('questionText');
const questionTextElement2 = document.getElementById('questionText2');
const valueIndex = document.getElementById('valueIndex');
const valueIndex2 = document.getElementById('valueIndex2');
const moreBtn = document.getElementById('moreBtn');
const lessBtn = document.getElementById('lessBtn');

function startNewRound() {
  // 移除旧监听，避免重复触发
  removeClickListeners();

  let selectedRange, availableItems;
  // 循环找到有至少2个物品的区间
  do {
    const rangeIndex = Math.floor(Math.random() * priceRanges.length);
    selectedRange = priceRanges[rangeIndex];
    // 左闭右开规则筛选区间内物品，避免边界重复匹配
    availableItems = items.filter(item => item.value >= selectedRange.min && item.value < selectedRange.max);
  } while (availableItems.length < 2);

  // 从筛选结果中选两个不同物品
  const index1 = Math.floor(Math.random() * availableItems.length);
  let index2;
  do {
    index2 = Math.floor(Math.random() * availableItems.length);
  } while (index2 === index1);

  item1 = availableItems[index1];
  item2 = availableItems[index2];

  // 展示物品信息
  questionTextElement.innerHTML = item1.name;
  questionTextElement2.innerHTML = item2.name;
  document.getElementById("item1").textContent = `${item1.name} ${formatCurrency(item1.value)}`;
  document.getElementById("item2").textContent = `${item2.name} ${formatCurrency(item2.value)}`;
  // 渲染物品图片
  document.getElementById("item1Img").src = item1.imageSrc;
  document.getElementById("item2Img").src = item2.imageSrc;

  // 确定正确选项索引（对应"更多/更少"按钮）
  correctIndex = item1.value > item2.value ? 0 : 1;

  // 绑定新的点击事件
  moreBtn.addEventListener('click', handleMoreClick);
  lessBtn.addEventListener('click', handleLessClick);

  // 触发VS元素淡入动画
  const vsElement = document.querySelector('.vs');
  vsElement.style.animation = 'none';
  void vsElement.offsetWidth; // 强制触发重绘
  vsElement.style.animation = null;
}

function handleMoreClick() {
  handleItemClick(0, correctIndex);
  showValue(0, correctIndex, item1, item2);
  removeClickListeners();
}

function handleLessClick() {
  handleItemClick(1, correctIndex);
  showValue(1, correctIndex, item1, item2);
  removeClickListeners();
}

function showValue(clickedIndex, correctIndex, item1, item2) {
  valueIndex.style.display = "block";
  valueIndex2.style.display = "block";

  if (clickedIndex === correctIndex) {
    // 答对时展示数值动画
    animateValue(valueIndex, 0, item1.value, 2000);
    animateValue(valueIndex2, 0, item2.value, 2000);
  } else {
    // 答错时展示数值并触发游戏结束
    animateValue(valueIndex, 0, item1.value, 2000);
    animateValue(valueIndex2, 0, item2.value, 2000);
    setTimeout(endGame, 4000);
  }
}

function formatCurrency(value) {
  return `$${value.toLocaleString()}`;
}

function animateValue(element, start, end, duration) {
  let startTimestamp;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    element.textContent = formatCurrency(Math.floor(start + progress * (end - start)));
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  };
  requestAnimationFrame(step);
}

function removeClickListeners() {
  moreBtn.removeEventListener('click', handleMoreClick);
  lessBtn.removeEventListener('click', handleLessClick);
}

// 辅助函数（假设已有实现）
function handleItemClick(clickedIndex, correctIndex) {
  // 可添加点击后的状态更新，如按钮禁用等
}

function endGame() {
  alert('游戏结束！');
}

关键修改说明 #

1. 区间筛选逻辑：

   • 随机选择价格区间，用左闭右开规则筛选对应物品，避免边界重复匹配
   • 循环确保选中的区间至少有2个物品，防止出现无法选取两个物品的错误

2. 物品展示优化：

   • 补充图片渲染代码，确保物品图片正常展示
   • 修正原showValue函数中数值赋值颠倒的问题，保证动画与物品对应

3. 事件绑定修复：

   • 新增removeClickListeners函数，每次新回合前移除旧监听，避免重复触发
   • 明确correctIndex逻辑，对应点击按钮的索引，可根据实际DOM结构调整

4. 容错处理：

   • 补充测试物品，确保多个区间有足够物品可选
   • 处理区间内物品不足的情况，避免报错

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