<div class="playzone">
  <div class="player"></div>
  <div class="bonus"></div>
  <div class="counter">
   <span>0</span>
    очков
  </div>
</div>

* {
 padding: 0;
 margin: 0;
}

.playzone {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.player {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: green;
  position: absolute;
}

.bonus {
  background-color: red;
  width: 10px;
  height: 10px;
  position: absolute;
}

.counter {
  position: absolute;
  color: black;
  font-weight: 500;
  top: 5px;
  right: 5px;
}

const playzone = document.querySelectorAll(".playzone")[0];
const player = document.querySelectorAll(".player")[0];
const count = document.querySelectorAll(".counter span")[0];
const bonus = document.querySelectorAll(".bonus")[0];
let counter = 1;
let widthPlayzone = playzone.getBoundingClientRect().width
let heightPlayzone = playzone.getBoundingClientRect().height
let playerStats = {
  playerName: "Player",
  health: 100,
  width: 40,
  height: 40,
  color: "green",
  tail: "none",
}
let randomX = bonus.style.left = getRandomInt(widthPlayzone - 5) + "px"
let randomY = bonus.style.top = getRandomInt(heightPlayzone - 5) + "px"
setInterval(() => { bonusSpawn() },15000)

document.addEventListener("mousemove", function(e){
  let xPlayer = player.getBoundingClientRect().x;
  let yPlayer = player.getBoundingClientRect().y;
  widthPlayzone = playzone.getBoundingClientRect().width
  heightPlayzone = playzone.getBoundingClientRect().height
  player.style.top = e.clientY - 20 + "px";
  player.style.left = e.clientX - 20 + "px";
  if (((e.clientX) && (e.clientX + 30) >= Number(randomX.split("px")[0])) && ((e.clientX) && (e.clientX - 30) <= Number(randomX.split("px")[0]))
      && ((e.clientY) && (e.clientY + 30) >= Number(randomY.split("px")[0])) && ((e.clientY) && (e.clientY - 30) <= Number(randomY.split("px")[0])) ){
    destroyBonus()
  }
})

function destroyBonus() {
  player.style.width = playerStats.width + "px";
  player.style.height = playerStats.height + "px";
  playerStats.width++;
  playerStats.height++;
  bonus.style.display = "none";
  count.innerHTML = counter++;
  bonusSpawn()
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function bonusSpawn() {
  bonus.style.display = "block";
 randomX = bonus.style.left = getRandomInt(widthPlayzone - 5) + "px"
 randomY = bonus.style.top = getRandomInt(heightPlayzone - 5) + "px"
}