1. Начнём с создания переменных:
const circle = document.createElement('div')
2. Зададим функцию, которая будет генерировать рандомные числа:
function getRandomNumber (min, max){
return Math.round(Math.random() * (max - min) + min)
}
//допустим, что у нашего обьекта вот такие размеры
const size = getRandomNumber(10,60)
circle.style.width = `${size}px`
circle.style.height = `${size}px`
3. Далее нам нужны константы, которые всегда будут находиться в пределах нашего поля и нам не нужно будет каждый раз вводить значения ширины и высоты
const {width, height} = board.getBoundingClientRect()
4. Из этих констант и метода генерации рандомных чисел мы получаем x и y и для того, чтобы избежать ошибок лучше еще и вычесть сам размер переменной
const x = getRandomNumber(0, width - size)
const y = getRandomNumber (0, height - size)
// задаём размеры
circle.style.top = `${y}px`
circle.style.left = `${x}px`
Всё это можно завернуть в одну функцию создания формы и вызывать её по клику.
Для практики можно обьеденить свойство генерации размера с генерацией цвета из прошлой статьи :)