011. 中ボス「魔法弾を発射せよ」

body {
  margin: 0;
  min-height: 100vh;
  background: #111;
}

.bullet {
  position: fixed;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.flying {
  animation: fly 100s ease-out forwards;
}

@keyframes fly {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 1500px));
  }
}

document.addEventListener('click', function(event) {
  for (let i=0; i<30; i++){
  // 1. 魔法弾を工作する
  const bullet = document.createElement('div');
  bullet.classList.add('bullet');
  const bomb = document.createElement('span');
  bomb.textContent = '💣️'
  bullet.appendChild(bomb)

  // 2. クリックした場所に置く
  bullet.style.left = event.clientX + i*40 + 'px';
  bullet.style.top  = event.clientY + 'px';

  // 3. ランダムなサイズを決める
  const size = Math.random() * 40 + 20;
  bullet.style.width  = size + 'px';
  bullet.style.height = size + 'px';

  // 4. ランダムな色を決める
  const colors = ['gold', 'tomato', 'deepskyblue', 'limegreen', 'violet'];
  const bgcolors = ['orange', 'blue', 'red', 'green', 'violet'];
  bullet.style.background = colors[Math.floor(Math.random() * colors.length)];
document.body.style.background = bgcolors[Math.floor(Math.random() * bgcolors.length)];


  // 5. 舞台に出す
  document.body.appendChild(bullet);

  // 6. アニメーション開始
  bullet.classList.add('flying');

  // 7. 1秒後に消す
  setTimeout(function() {
    bullet.remove();
  }, 60000);
  }
});