マウスストーカーを書いてみた。方向性のある複数の画像を枚数によってい切り替えるので、楽しいかも。

JavaScript

ホームページにゴーカートのマウスストーカーをつけなきゃならないので書いてみた。
サンプルをここにおければ良いのだろうけど、動かせそうにないから

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Kart</title>
<body>


<script type="text/javascript">
//@cc_on

var MousePointer = function () {
  document./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
    'mousemove', (function(_){
      return function( evt ) { _.handler( evt ); }; 
    })(this), false );
  this.x = 0;
  this.y = 0;
  
  this.handler = function ( evt ) {
    this.x = evt./*@if( @_jscript ) x @else@*/ pageX /*@end@*/;
    this.y = evt./*@if( @_jscript ) y @else@*/ pageY /*@end@*/;
  };
};


var KART = function ( ) {
  this.initializer.apply( this, arguments );
};


KART.prototype.initializer = function ( ary ) {
  this.Loader( ary );
  this.Display(1);
  this.Demo( );
};


KART.prototype.Loader = function ( ary ) {
  var d = document;
  var path = './img/';
  var cnt;
  var e, p;
  var max;
  
  //配列がなければ、デフォルトの画像
  if( 'undefined' === typeof ary ) {
    var ary = [ ];
    for( cnt = 0; cnt < 24 ; cnt++ )
      ary[ cnt ] = path + 'kart' + cnt + '.gif';
  }
  //画像の先読みを行う
  max = ary.length;
  this.kartImage = [ ];
  this.kartNumber = cnt = max;
  this.num = 360 / max |0;
  this.kijun = 360 + this.num / 2 | 0;
  while( cnt-- )
    (this.kartImage[ cnt ] = new Image).src = ary[ cnt ];
  
  this.x = 0;
  this.y = 0;
  //ドキュメントに登録
  e = d.createElement( 'IMG' );
  e.src = this.kartImage[0].src;
  e.alt = 'Kart';
  e.style.position = 'absolute';
  e.style.display = 'none';
  e.style.zIndex = 999 + '';
  e.style.top = '0px';
  e.style.left = '0px';
  e.style.display = 'none';

  p = d.createElement( 'DIV' );
  p.appendChild( e );
  document.body.appendChild( p );
  this.kart = e;
};

KART.prototype.Display = function ( mode ) {
  if( 'undefined' === typeof mode )
    mode = ( 'inline' == this.e.style.display );
  else
    this.kart.style.display = mode ? 'inline': 'none';
  return mode;
};


KART.prototype.Demo = function () {
  this.timerId = setInterval(
    (function(_) { return function() { _.go(); }; })(this) , 30);
}

KART.prototype.go = (function ( getMouse ) {
  return function () {
    var h = getMouse.y - this.y;
    var w = getMouse.x - this.x;
    var n = (this.kijun + Math.atan2( -h, w) * 180 / Math.PI) % 360 / this.num |0;
    
    this.x += w /10 |0;
    this.y += h /10 |0;
    this.kart.style.top = this.y + 'px';
    this.kart.style.left = this.x + 'px';
    this.kart.src = this.kartImage[ n ].src;
  };
})( new MousePointer );

var kart = new KART();


</script>