클릭하면 불꽃놀이

몇 달 전에 SCSS와 JavaScript를 사용하여 몇 가지 불꽃놀이를 작성했습니다. 하지만 저는 생각했습니다. 신호에 따라 불꽃놀이를 할 수 있다면 어디를 클릭해야 할까요? 오늘은 5월 1일로 많은 국가에서 공휴일이므로 기념식에서 불꽃놀이를 즐기기에 좋은 날인 것 같습니다.

전에 했던 불꽃놀이부터 시작해서 수정하고 있습니다. 따라서 내가 설명하지 않는 코드가 혼란스럽다면 이 시리즈의 이전 게시물을 살펴보십시오.

설정

SCSS는 이전과 거의 동일합니다.

@use "sass:math";

html {
  height: 100%;
}

body {
  background-color:black;    
  height: 100%;
  width: 100%;
  margin: 0;
  overflow:hidden;
}

.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  opacity: 1;
}

@keyframes launchFirework {
  to { opacity: 0; }
}

@for $i from 1 through 50 {
  @keyframes launchFirework#{$i} {
   to { transform: translate(random(201) - 101 + px, random(201) - 101 + px); }
  }
  .firework#{$i} {
    animation: launchFirework random(1001) + 499 + ms linear forwards, launchFirework#{$i} random(1001) + 499 + ms linear forwards;
  }
}

이 코드에 대한 간략한 설명:
우리는 하늘을 시뮬레이트하기 위해 검정색 배경을 설정하고 불꽃놀이가 절대적인 위치에 있도록 설정합니다. 그런 다음 애니메이션을 사용하여 그것들을 펼치고 시간이 지남에 따라 더 투명하게 만듭니다.

추가 사항은 html을 높이 100%로 설정하는 것입니다. 그것 없이는 전체가 검은색이고 불꽃이 올바른 위치에 나타나기 때문에 몸이 화면을 채우고 있는 것처럼 보입니다. 그러나 실제로는 콘텐츠가 없기 때문에 높이가 0px입니다(불꽃놀이는 절대적으로 배치됨). html을 높이 100%로 설정한다는 것은 본문을 100%로 설정하면 화면을 가득 채운다는 의미입니다.

JavaScript 함수 중 두 가지는 동일합니다.

function random(min, max) {
  return min + Math.random() * (max + 1 - min);
}

이 함수는 몇 가지를 무작위로 추출하는 데 사용됩니다. 최소값과 최대값 사이에서 무작위화하기가 쉽습니다. Math.random()은 기본적으로 최대값을 포함하지 않습니다.

const deleteFirework = () => {
  const setToDelete = set - 3
  if (set >= 0) {
    const oldFireworks = document.querySelectorAll(`.set${setToDelete}`);

    oldFireworks.forEach(firework => {
      firework.remove();      
    });      
  }
}

잠시 후 불꽃놀이를 삭제해야 합니다. 그렇지 않으면 빠르게 수천 개의 div를 갖게 됩니다. JavaScript는 불투명도가 0에 도달했는지 알 수 없으므로 여기서는 최소 3세트 이전의 불꽃놀이를 삭제해야 합니다.

화면 클릭

이제 우리는 이벤트 리스너가 본문의 클릭을 수신하고(따라서 본문이 화면을 채우도록 해야 함) 불꽃놀이를 생성하기를 원합니다. 그리고 3세트 전의 폭죽을 삭제합니다.

let set = 0

document.body.addEventListener('click', (event) => {
  deleteFirework()
  createFirework(event)
})

그런 다음 createFirework 함수는 매우 유사하지만 불꽃을 무작위로 배치하는 대신 클릭한 위치에 배치합니다.

const createFirework = (event) => {
  const xPos = event.clientX
  const yPos = event.clientY
  const colour = '#'+Math.random().toString(16).substr(2,6);

  // Create 50 divs, start them on top of each other
  // so they can radiate out from the centre
  for (let i = 1; i <= 50; i++) {
    const firework = document.createElement('div')
    firework.className = 'firework'
    firework.classList.add(`firework${i}`)
    firework.classList.add(`set${set}`)
    firework.style.backgroundColor = colour
    firework.style.left = xPos + 'px'
    firework.style.top = yPos + 'px'
    document.body.appendChild(firework)
  }  

  set += 1
}

여기에는 두 가지 변경 사항이 있습니다. 첫 번째는 맨 위에 있습니다.

  const xPos = event.clientX
  const yPos = event.clientY

이 함수에 이벤트를 전달했으므로 클릭했을 때 마우스 위치를 선택하는 데 사용할 수 있습니다. clientX 및 clientY는 각각 가로 및 세로 위치를 제공합니다.

마우스 위치를 가져오는 방법에는 두 가지가 있습니다. 클라이언트는 뷰포트에 상대적인 위치를 가져오고 스크롤을 무시합니다. 페이지는 페이지에 상대적인 위치를 가져오고 스크롤을 포함합니다. 본문이 페이지를 채우므로 둘 다 동일한 번호를 제공하므로 어느 쪽을 사용하든 상관 없습니다.

다른 변경 사항은 xPos 및 yPos를 사용하는 방법입니다. 이전에는 백분율이었지만 이제는 픽셀이 되기를 원합니다.

    firework.style.left = xPos + 'px'
    firework.style.top = yPos + 'px'

최종 코드

그리고 그게 다야! 다음은 CodePen의 코드입니다. 나만의 불꽃놀이를 만들어 보세요! (같은 곳을 여러 번 클릭하면 재미있다)