如何在单击按钮时使项目有跌落的机会

<button id="dropButton">点击我</button>
<div id="item" class="item">项目</div>

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  top: 0;
  transition: top 0.5s;
}

document.getElementById('dropButton').addEventListener('click', function() {
  var item = document.getElementById('item');
  var randomOffset = Math.floor(Math.random() * 100) - 50; // 生成-50到50之间的随机数
  item.style.top = randomOffset + 'px';
});

document.getElementById('dropButton').addEventListener('click', function() {
  var item = document.getElementById('item');
  var randomOffset = Math.floor(Math.random() * 100) - 50;
  item.classList.add('fall-animation');
  item.style.top = randomOffset + 'px';

  // 动画结束后重置位置
  item.addEventListener('animationend', function() {
    item.classList.remove('fall-animation');
    item.style.top = '0';
  }, {once: true});
});

@keyframes fall {
  from { top: 0; }
  to { top: var(--random-offset); }
}

.fall-animation {
  animation: fall 0.5s forwards;
}