function createSnow2() {
const snow2 = document.createElement("div");
snow2.classList.add("snow2");
snow2.style.left = Math.random() * window.innerWidth + "px";
snow2.style.animationDuration = Math.random() * 10 + 10 + "s";
snow2.style.top = "200px";
document.body.appendChild(snow2);
setTimeout(() => snow2.remove(), 10000);
}
setInterval(createSnow2, 300);
// 물리 시뮬레이션에 필요한 변수들
const snowWidth = 50;
const snowHeight = 50;
const gravity = 0.3; // 중력 가속도
const friction = 0.99; // 마찰 (좌우 속도 감쇠)
const bounceFactor = 0.7; // 바닥 충돌 시 튕기는 정도
const snowArray = [];
// 강아지(스노우독) 생성 함수
function createSnow() {
const snow = document.createElement("div");
snow.classList.add("snow");
// 시작 위치: 화면 위쪽 조금 바깥쪽 (자연스럽게 떨어지도록)
const left = Math.floor(Math.random() * (window.innerWidth - snowWidth));
const top = -snowHeight;
snow.style.left = left + "px";
snow.style.top = top + "px";
// 초기 속도 (수평 랜덤, 수직은 0)
snow.vx = (Math.random() * 5 - 2); // -2 ~ 2 사이
snow.vy = 0;
document.body.appendChild(snow);
snowArray.push(snow);
}
// 매 프레임마다 각 스노우독의 위치 업데이트
function updateSnow() {
snowArray.forEach(snow => {
// 현재 위치
let currentTop = parseFloat(snow.style.top);
let currentLeft = parseFloat(snow.style.left);
// 속도에 중력 적용 (수직)
snow.vy += gravity;
// 위치 업데이트
let newTop = currentTop + snow.vy;
let newLeft = currentLeft + snow.vx;
// 바닥에 닿으면 튕기고 마찰 효과 적용
if (newTop + snowHeight > window.innerHeight) {
newTop = window.innerHeight - snowHeight;
snow.vy = -snow.vy * bounceFactor;
// 매우 느린 수직 속도는 0으로 처리하여 정지시키기
if (Math.abs(snow.vy) < 0.5) {
snow.vy = 0;
}
}
// 좌우 벽 충돌 처리
if (newLeft < 0) {
newLeft = 0;
snow.vx = -snow.vx;
} else if (newLeft + snowWidth > window.innerWidth) {
newLeft = window.innerWidth - snowWidth;
snow.vx = -snow.vx;
}
// 좌우 마찰 적용 (지면에서 굴러갈 때 서서히 감속)
if (newTop >= window.innerHeight - snowHeight) {
snow.vx *= friction;
}
// 실제 스타일에 반영
snow.style.top = newTop + "px";
snow.style.left = newLeft + "px";
});
requestAnimationFrame(updateSnow);
}
// 주기적으로 새 강아지 생성 (0.5초마다)
setInterval(createSnow, 1000);
// 애니메이션 루프 시작
updateSnow();
document.addEventListener("mousemove", () => {
snowArray.forEach(snow => snow.remove()); // 눈송이 삭제
snowArray.length = 0; // 배열 초기화
});
setInterval(createSnow, 1000);
updateSnow();
