script.aculo.usのEffectを使ってみる - 日替わり NAT’s Champloo

script.aculo.usのEffectを使って、ちょっとしたサンプルを作ってみた。文字がマウスの位置を追いかけて動いたり、クリックすると震えたりするという、何の役にも立たないもの。
ソースコードはこんな感じ。jsディレクトリに、prototype.jsやscript.aculo.usのjsファイルが置いてあるのが前提。

<html>
<head>
<title>Mouse Chaser</title>
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js"></script>
<script>
  var effect = null;
  var nextEffect = null;
  var hp = 5;
  function makeMoveEffect(element, x, y) {
    effect = new Effect.Move(
      element,
      { x: x, y: y, mode: 'absolute',
        afterFinish: effectFinished}
    );
  }
  function effectFinished() {
    effect = null;
    if(nextEffect != null) {
      makeMoveEffect(
        nextEffect.element, nextEffect.x, nextEffect.y);
    }
    nextEffect = null;
  }
  function mouseMove(e) {
    if(hp <= 0) return;
    var x = Event.pointerX(e);
    var y = Event.pointerY(e);
    var element = $('chaser');
    x = x - element.offsetWidth / 2;
    y = y - element.offsetHeight / 2;
    if(effect != null) {
      nextEffect = {
        element: element,
        x:x, y:y};
      return;
    }
    makeMoveEffect(element, x, y);
  }
  function clicked() {
    hp--;
    if(hp == 0) {
      new Insertion.Bottom('chaser', ' Dead!!');
      new Effect.Shrink('chaser', {duration: 3.0});
    } else {
      new Effect.Shake('chaser');
    }
  }
</script>
</head>
<body onMouseMove="mouseMove(event)">
  <div id="chaser" style="position:absolute" onClick="clicked()">
    Mouse Chaser
  </div>
</body>
</html>

マウスの位置へ文字が動くのに、Effect.Moveで1秒かけて移動させるので、ワンテンポ遅れた感じで動く。震えるのにはEffect.Shakeを使い、5回クリックするとEffect.Shrinkで小さくなって消える。
一応http://wiki.script.aculo.us/scriptaculous/show/HomePageにドキュメントがあるけど、細かいところまでは書いてないので、自分の思ったように動作させるには、ある程度ソースを読んだり、試行錯誤してみないといけないみたい。その辺りは、まだまだ発展途上ということなのだろうな。
script.aculo.usやprototype.jsのソースの方も、JSONやthisキーワードとかを使いまくりで、今までに私が見たことのあるJavaScriptと全然違って見えるので、何だか違う言語みたい。