본문 바로가기

javascript

마우스를 클릭하면 불꽃놀이를 합니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=euc-kr">
<TITLE> Jasko Sample Script </TITLE>

<!---- [1단계] 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요 ---->

<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver;}
</style>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

var intervals=2000
var sparksOn     = true;
var speed        = 40;
var power        = 3;

var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var sparksAflyin = false;
var allDivs      = new Array(10);
var totalSparks  = 0;

function initAll(){
        if(!ns && !ie){
        sparksOn = false;
        return;
        }
setInterval("firework()",intervals)

if (ns)
        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
        for(dNum=0; dNum<7; ++dNum){
                if(ie)
                        allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
                else
                        allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
        }
}

function firework(){
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset

}
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)


        if(sparksOn){
                if(!sparksAflyin){
                        sparksAflyin=true;
                        totalSparks=0;
                        for(var spark=0;spark<=6;spark++){
                                dx=Math.round(Math.random()*50);
                                dy=Math.round(Math.random()*50);
                                moveTo(spark,randomx,randomy,dx,dy);
                        }
                }
        }
}

function moveTo(i,tempx,tempy,dx,dy){
        if(ie){
                if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
                        tempy=document.body.offsetHeight+document.body.scrollTop-80;
                if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
                        tempx=document.body.offsetWidth+document.body.scrollLeft-80;
        }
        if(tempx>-50&&tempy>-50){
                tempx+=dx;tempy+=dy;    
                allDivs[i].left=tempx;
                allDivs[i].top=tempy;
                dx-=power;dy-=power;
                setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
        }
        else
                ++totalSparks
        if(totalSparks==7){
                sparksAflyin=false;
                totalSparks=0;
        }
}
window.onload=initAll;
//-->
</script>

<!------------------------- 여기까지 ---------------------------------->

</HEAD>

<BODY bgColor=black>

<!---- [2단계] 아래의 방법으로 원하는 위치에 복사 해 넣으세요 ------------------>

<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>

<!------------------------- 여기까지 ---------------------------------->

</BODY>
</HTML>