Помогите с кодом! Добавьте рандомную смену цвета! JavaScript

Question

Помогите с кодом! Добавьте рандомную смену цвета! JavaScript

Tulopex Ученик (185), на голосовании 1 год назад

Сделайте пожалуйста цвет шарика при появление и когда появлялся другой шарик он уже был другого цвета. Вот код JS:

 const startBtn = document.querySelector('#start') 
const screens =document.querySelectorAll('.screen') 
const timeEl = document.querySelector('#time') 
const board = document.querySelector('#board') 
const timeList = document.querySelector('#time-list') 
let time = 11 
let score = 0 
 
startBtn.addEventListener('click', (event) => { 
    event.preventDefault() 
    screens[0].classList.add('up') 
}) 
 
timeList.addEventListener('click', event => { 
    if (event.target.classList.contains('time-btn')) { 
        console.log(event.target.getAttribute('data-time')) 
        time = parseInt(event.target.getAttribute('data-time')) 
        screens[1].classList.add('up') 
        startGame() 
    } 
}) 
 
board.addEventListener('click', event => { 
    if (event.target.classList.contains('circle')) { 
        score++ 
        event.target.remove() 
        createRandomCircle() 
    } 
}) 
 
function startGame() { 
    setInterval(decreaseTime, 1000) 
    createRandomCircle() 
    setTime(time) 
} 
 
function decreaseTime() { 
    if (time === 0) { 
        finishGame() 
    } else { 
        let current = --time 
    if (current < 10) { 
        current = `0${current}` 
    } 
    setTime(current) 
    } 
} 
 
function setTime(value) { 
    timeEl.innerHTML = `00:${value}` 
} 
 
function finishGame() { 
    timeEl.parentNode.classList.add('hide') 
    board.innerHTML = `Cчет: ${score}
` 
} 
 
function createRandomCircle() { 
    const circle = document.createElement('div') 
    const size = getRandomNumber(10, 60) 
    const {width, height} = board.getBoundingClientRect() 
    const x = getRandomNumber(0, width - size) 
    const y = getRandomNumber(0, height - size) 
 
    circle.classList.add('circle') 
    circle.style.width = `${size}px` 
    circle.style.height = `${size}px` 
    circle.style.top = `${y}px` 
    circle.style.left = `${x}px` 
 
 
 
    board.append(circle) 
} 
 
function getRandomNumber (min, max) { 
    return Math.round(Math.random() * (max - min) + min) 
}

Answer 1

Чтобы добавить рандомную смену цвета шарика, вы можете использовать CSS-свойство "background-color" и JavaScript-функцию Math.random(). Вы можете задать массив со значениями цветов и выбирать случайный цвет из массива при создании каждого шарика.
const colors = ["red", "blue", "green", "yellow", "purple", "orange"];

function createRandomCircle() {
const circle = document.createElement('div');
const size = getRandomNumber(10, 60);
const {width, height} = board.getBoundingClientRect();
const x = getRandomNumber(0, width - size);
const y = getRandomNumber(0, height - size);
const color = colors[Math.floor(Math.random() * colors.length)];

circle.classList.add('circle');
circle.style .width = `${size}px`;
circle.style .height = `${size}px`;
circle.style.top = `${y}px`;
circle.style .left = `${x}px`;
circle.style .backgroundColor = color;

board.append(circle);
}