원생 JS 불꽃 효과 구현

원생 JS 는 불꽃 효 과 를 구현 하고 페이지 를 클릭 해 불꽃 을 생 성하 여 사방 으로 확산 한 뒤 추락 시킨다.(여기 불꽃 은 제 가 쓰 는 특수 문자 하트 모양 입 니 다)

기본 css 코드

 /*      css   */
 body{background: #000;overflow: hidden;}
 .fire{position: absolute;width: 4px;height: 30px;}

js 코드:
1.페이지 에 클릭 이벤트 추가,주체 불꽃 생 성

 //         
 document.onclick = function(eve){
 var e = eve || window.event;
 //       ,         
 var arr = [];
 //         
 var x = e.clientX;
 var y = e.clientY;
 //    
 var speed = 20;
 //     ,    css  ,            
 var fire = document.createElement('div');
 fire.className = 'fire';
 fire.style.background = randomColor();
 fire.style.left = x + 'px';
 fire.style.top = document.documentElement.clientHeight+'px';
 //          
 document.body.appendChild(fire);

2.타이머 설정,불꽃 위로 운동,삭제

 //     
 var t = setInterval(function(){
 //        TOP        ,     ,        
 if(fire.offsetTop <= y){
 clearInterval(t);
 document.body.removeChild(fire);
 //  show(     )
 show();
 }
 //          
 fire.style.top = fire.offsetTop - speed +'px';
 },30);

3.클릭 한 위치 에 작은 불꽃 을 생 성하 고 스타일 설정

function show(){
 //    ,  50    ,      css  
 for(var i=0;i<50;i++){
 var sFire = document.createElement('div');
 // sFire.className = 'small-fire';
 sFire.style.left = x +'px';
 sFire.style.top = y +'px';
 // sFire.style.background = randomColor();
 sFire.style.color = randomColor();
 sFire.innerHTML = '❤';
 sFire.style.position = 'absolute';
 //     
 var a=Math.random()*360;
 sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random();
 sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random();
 //          
 document.body.appendChild(sFire);
 //               
 arr.push(sFire);
 }
 }

4.타 이 머 를 설치 하여 작은 불꽃놀이 가 자유 낙하 운동 을 완성 하도록 한다.

setInterval(function move(){
 //              
 for(var i=0;i<arr.length;i++){
 //         i         
 arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
 arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
 //               ,      
 arr[i].sy += 1;
 //              ,   ,     
 if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){
 document.body.removeChild(arr[i]);
 // arr.splice(i,1);
 }
 }
 },30)
 }

5.마지막 으로 우리 의 난수 와 랜 덤 색상 의 포장 을 잊 지 마 세 요.

 //      
 function random(max,min){
  return Math.round(Math.random()*(max-min)+min);
 }
 //     
 function randomColor(){
  return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
 }

결국 우리 의 불꽃놀이 효 과 는 이 루어 졌 다.
오늘 의 나 눔 은 여기까지 입 니 다.여러분 이 좋아해 주 셨 으 면 좋 겠 습 니 다.
더 많은 JavaScript 하 이 라이트 효 과 를 여러분 에 게 공유 합 니 다:
자 바스 크 립 트 메뉴
javascript QQ 특수효과 집합
자 바스 크 립 트 시계 필터 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.