本文介绍如何修改 startnewround() 函数，使其从预定义的价格区间中精准筛选出两个价值落在同一区间的商品，并正确展示其名称、图片与价格。核心在于先选定首个商品，再动态匹配其所属价格区间，最后在该区间内筛选并随机选取第二个商品。
本文介绍如何修改 startnewround() 函数，使其从预定义的价格区间中精准筛选出两个价值落在同一区间的商品，并正确展示其名称、图片与价格。核心在于先选定首个商品，再动态匹配其所属价格区间，最后在该区间内筛选并随机选取第二个商品。
要实现“在相同价格区间内随机选取两个商品”，关键在于避免盲目全量随机（如原代码中 Math.random() * items.length 可能导致两商品跨区间），而应采用区间感知的两级筛选策略：先定位首个商品所属区间，再仅在该区间内寻找第二个候选。
以下是优化后的 startNewRound() 函数完整实现（已整合价格区间逻辑，并修复潜在边界与空数组风险）：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
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" },
];
let item1, item2, correctIndex;
function startNewRound() {
// Step 1: 随机选取第一个商品
const randomIndex1 = Math.floor(Math.random() * items.length);
item1 = items[randomIndex1];
// Step 2: 查找 item1 所属的价格区间（注意：使用 = 包含边界）
const range = priceRanges.find(r => r.min
item !== item1 && range.min item2.value ? 1 : 0;
// 重置动画状态（保留原逻辑）
const vsElement = document.querySelector('.vs');
vsElement.style.animation = 'none';
void vsElement.offsetWidth;
vsElement.style.animation = null;
// ✅ 注意：handleMoreClick / handleLessClick / showValue 等内部函数无需改动，
// 因为它们只依赖 item1/item2 的值和 correctIndex，与选取逻辑解耦。
}
// 公共工具函数（建议移至全局作用域，避免重复定义）
function formatCurrency(value) {
return `$${value.toLocaleString()}`;
}
⚠️ 关键注意事项：
- 边界包含性：使用 r.min
- 空候选兜底：当某价格区间内仅有 1 个商品（如 items 扩展后仍可能遇到），candidates.length === 0 会触发安全降级逻辑，防止程序崩溃。
- 性能友好：priceRanges.find() 和 items.filter() 时间复杂度均为 O(n)，对于百项以内数据完全可忽略；若商品量极大（>10k），建议预先构建「区间 → 商品列表」映射表。
- UI 同步：原代码中 showValue()、animateValue() 等函数不依赖选取方式，因此无需修改，只需确保 item1/item2 赋值正确即可无缝衔接。
通过此方案，你的比价游戏将真正实现「同档对决」——无论是百万超跑还是亿级文物，用户每次面对的都是价值量级一致的挑战，显著提升游戏公平性与体验深度。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
