JavaScriptフェアリーダストReadme

マウスを動かすとその軌跡に星が飛び散るJavaScriptです。

動作確認ブラウザ

以下のブラウザでの動作を確認しています。

Netscape Communicator 4.04 (MacOS)
Netscape Communicator 4.75 (MacOS)
Netscape Communicator 4.78 (MacOS)
Netscape 6.01 (MacOS)
Internet Explorer 4.5 (MacOS)
Internet Explorer 5.0 (MacOS)
Internet Explorer 4.0 (Windows)

簡単な設置方法

組み込みたいHTMLファイルの末尾(BODY要素の終了タグの前あたり)に以下のHTMLを追加してください。そのHTMLファイルと同じディレクトリにsparkset.jsとfairydust.gifを置いてください。これだけです。

<SCRIPT type="text/javascript" src="sparkset.js"> </SCRIPT>
<SCRIPT type="text/javascript"><!--
var lx = 0;
var ly = 0;

fairyDust = new SparkSet("dust",70,0.8);
fairyDust.startWithWriteElements(30,"fairydust.gif",13,13,7);
document.onmousemove = handleMouseMove;
if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);

function handleMouseMove(e)
{
    var x = (e) ? e.pageX : event.x + document.body.scrollLeft;
    var y = (e) ? e.pageY : event.y + document.body.scrollTop;

    var dx = (x - lx > 0) ? 3 : -3;
    var dy = (y - ly > 0) ? 3 : -3;
    var num = Math.round(Math.random()) + 1;
    for(var i = 0; i < num; i++){
        var spX = Math.floor(dx * Math.random());
        var spY = Math.floor(dy * Math.random());
        var px = x + Math.floor(20 * Math.random()) - 10;
        var py = y + Math.floor(20 * Math.random()) - 10;
        var lifetime = 5 + Math.floor(5 * Math.random());
        fairyDust.birthSpark(px,py,spX,spY,lifetime);
    }

    lx = x;
    ly = y;
}
//--></SCRIPT>

カスタマイズ

startWithWriteElements()メソッドの引数を変更することにより、飛び散る星の総数や、画像、大きさなどを変更することが出来ます。

startWithWriteElements(星の総数,画像のURL,画像の横の大きさ,画像の縦の大きさ,大きさの揺らぎ)

大きさの揺らぎというのは、星の大きさに変化を付けるためのものです。指定した大きさから大きさの揺らぎ分だけ小さくなった大きさまで、ランダムに変化します。

もっとこだわりたい場合は、WriteSparkElement()メソッドを使い、要素をひとつずつ出力します。必要な分だけ出力したらstart()メソッドで管理を開始させます。

WriteSparkElement(番号,画像のURL,画像の横の大きさ,画像の縦の大きさ)
start(星の総数)

たとえばこんな感じです。

fairyDust.WriteSparkElement(0,"fairydust1.gif",13,13);
fairyDust.WriteSparkElement(1,"fairydust1.gif",8,8);
fairyDust.WriteSparkElement(2,"fairydust2.gif",11,11);
fairyDust.WriteSparkElement(3,"fairydust2.gif",5,5);
fairyDust.WriteSparkElement(4,"fairydust2.gif",8,6);
fairyDust.start(5);

詳しくはAPIリファレンスを参照してください。

応用

クリックすると星が飛び散るスクリプト。

<SCRIPT type="text/javascript" src="sparkset.js"> </SCRIPT>
<SCRIPT type="text/javascript"><!--
clickSpark = new SparkSet("star",50,10);
clickSpark.startWithWriteElements(30,"star.gif",16,15,7);
document.onmousedown = handleMouseDown;
if (document.captureEvents) document.captureEvents(Event.MOUSEDOWN);

function handleMouseDown(e)
{
    var x = (e) ? e.pageX : event.x + document.body.scrollLeft;
    var y = (e) ? e.pageY : event.y + document.body.scrollTop;

    for(var i = 0; i < 10; i++){
        var spX = Math.floor(80 * Math.random()) - 40;
        var spY = -10 - Math.floor(60 * Math.random());
        var lifetime = 5 + Math.floor(15 * Math.random());
        clickSpark.birthSpark(x,y,spX,spY,lifetime);
    }
}
//--></SCRIPT>

プログラムの配布について

再配布、転載を許可します。改造とかいろいろしちゃっても構いません。

なお、ソフトウェアの使用により何らかの損害を被ったとしても作者は一切責任を負いませんので御了承ください。

りゅう/rryu@t3.rim.or.jp