Запуск рулетки через JS
Есть горизонтальная рулетка. При открытии сайта и запуске рулетки, в консоль выводится 15 раз о прокруте. Я выставил 15 объектов в рулетке в generateItems(), и не знаю как сделать запуск рулетки 1 раз, но сохранить 15 объектов в рулетке
<div class="app">
<i class="pointer fa-solid fa-location-pin" style="font-size: 40px; color: rgb(163, 41, 41);"></i>
<div class="scope">
<ul class="list"></ul>
</div>
<button onclick="start()" class="start">Крутить</button>
</div>
function getRandomItem() {
let item;
while(!item) {
item = items[Math.floor(Math.random() * items.length)];
if (item.price > balance * 0.20) {
return getRandomItem();
} else {
countFlip++;
balance -= item.price;
if (balance < 0) {
console.log('Game over!');
return;
}
if (countFlip % 10 === 0) {
balance += 2000;
}
console.log(`You got ${item.name} for ${item.price}. Your balance is now ${balance}. ${countFlip}`);
}
return item;
}
}
let isSpinning = false;
function generateItems() {
if (isSpinning) {
return;
}
isSpinning = true;
document.querySelector('.list').innerHTML = '';
document.querySelector('.scope').innerHTML = `<ul class="list"></ul>`;
const list = document.querySelector('.list')
list.innerHTML = ''
for (let i = 0; i < 15; i++){
item = getRandomItem()
const li = document.createElement('li')
li.classList.add('list_item')
li.innerHTML = `
<img src ="${item.img}" alt="" />
`
list.append(li)
}
}
generateItems()
function start() {
generateItems()
const list = document.querySelector('.list')
requestAnimationFrame(() => {
list.style.left = '50%'
list.style.transform = 'translate3d(-50%, 0, 0)'
},0)
const item = list.querySelectorAll('li')[7]
list.addEventListener('transitionend', () =>{
item.classList.add('active')
isSpinning = false;
})
}