всем HELLO!
я создаю что то по типу case opener.
Но не могу реализовать логику по которой marker окажется на выигрышном предмете.
Помогите пожалуйста создать логику по которой marker будет над выигрышном предмете (resultText).
JS КОД:
const items = [
{ name: "100 000", reward: "100000_sr", chance: 5 },
{ name: "VIP (14 дней)", reward: "14_vipsr", chance: 3 },
{ name: "1000 Алмазов", reward: "1000_az", chance: 2 },
{ name: "75 000 ", reward: "75000_sr", chance: 10 },
{ name: "VIP SILVER (7 дней)", reward: "7_sl", chance: 8 },
{ name: "500 Алмазов", reward: "500_az", chance: 7 },
{ name: "1000 Пыли", reward: "1000_ds", chance: 6 },
{ name: "25 000 ", reward: "25000_sr", chance: 15 },
{ name: "200 Алмазов", reward: "200_az", chance: 15 },
{ name: "300 Пыли", reward: "300_ds", chance: 15 },
{ name: "Ускорение (3 lvl)", reward: "3_boost", chance: 10 },
{ name: "Улучшение (3 lvl)", reward: "3_imp", chance: 10 },
{ name: "VIP SILVER (2 дня)", reward: "2_sl", chance: 10 },
{ name: "10 000 ", reward: "10000_sr", chance: 20 },
{ name: "5 000 ", reward: "5000_sr", chance: 20 },
{ name: "100 Алмазов", reward: "100_az", chance: 20 },
{ name: "Ускорение (2 lvl)", reward: "2_boost", chance: 20 }
];
const caseContainer = document.getElementById("caseContainer");
const scrollingItems = document.getElementById("scrollingItems");
const resultText = document.getElementById("resultText");
const openCaseButton = document.getElementById("openCaseButton");
const marker = document.getElementById("marker");
let populatedItems = []; // Массив для хранения созданных предметов
let winningIndex = 0; // Индекс выигрышного предмета
function populateItems() {
for (let i = 0; i < 151; i++) { // Создаем 241 предмет
const item = items[i % items.length]; // Используем элементы из массива
const div = document.createElement("div");
div.className = "item";
div.innerText = item.name;
scrollingItems.appendChild(div);
populatedItems.push(item); // Сохраняем предмет в массив
}
}
function animateScroll(duration) {
const itemWidth = scrollingItems.children[0].offsetWidth; // Ширина одного предмета
const totalItems = scrollingItems.children.length;
// Позиция, на которую нужно прокрутить, чтобы выигрышный элемент оказался под стрелкой
const targetPosition = (winningIndex * itemWidth) - (caseContainer.offsetWidth / 2) + (itemWidth / 2); // Центрируем выигрышный элемент
const scrollWidth = totalItems * itemWidth; // Общая ширина прокрутки
const startTime = performance.now();
function scrollAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
const easeProgress = easeInOutQuad(progress);
const currentPosition = -scrollWidth * easeProgress + targetPosition; // Прокручиваем к целевой позиции
scrollingItems.style.marginLeft = `${currentPosition}px`;
if (progress < 1) {
requestAnimationFrame(scrollAnimation);
} else {
// После завершения анимации, показываем выигрышный элемент
showWinningItem(); // Показываем выигрышный элемент
}
}
requestAnimationFrame(scrollAnimation);
}
function showWinningItem() {
const winningItem = populatedItems[winningIndex]; // Получаем выигрышный предмет
resultText.innerText = `Вы выиграли: ${winningItem.name}`;
// Изменяем текст выигрышного предмета в scrollingItems
const winningElement = scrollingItems.children[winningIndex];
winningElement.classList.add("winning-item"); // Добавляем класс для стилей
winningElement.innerText = winningItem.name; // Обновляем текст
}
openCaseButton.addEventListener("click", () => {
resultText.innerText = ""; // Очищаем текст результата
populatedItems = []; // Очищаем массив предметов
scrollingItems.innerHTML = ""; // Очищаем элементы прокрутки
populateItems(); // Заполняем предметами при загрузке страницы
// Выбираем случайный индекс выигрышного предмета
winningIndex = Math.floor(Math.random() * populatedItems.length); // Случайный индекс в пределах массива items
animateScroll(2000); // Запускаем анимацию прокрутки (уменьшено время)
});
Буду очень признателен за помощь!)