サイコロがなんだってんだ？

Javascript

横回転するスロットの手直しました。
自分の気に入ったものしか評価しないってのはどうよ！？
結局、徐々に減速して、ちょうど正面で止まるようにしたぜ〜！
http://okwave.jp/qa5343310.html

で、これの何が優れているかというと、最後の
var p = new Slot('waku0', 10, 10,+document.getElementById('a').value)
の部分を
var p0 = new Slot('waku0', 10, 10,+document.getElementById('a').value)
var p1 = new Slot('waku1', 10, 10,+document.getElementById('b').value)
var p2 = new Slot('waku2', 10, 10,+document.getElementById('c').value)
みたいにすると何個でもスロットが機能するんだなぁ〜
わかってないだろうけど。
まぁ〜自己満足か・・・。


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

<style type="text/css">
  #waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
  #waku0 img { border:0px none; width:120px; height:90px; }
</style>

<div id="waku0">
  <img src="./img/0.gif" alt="Image0">
  <img src="./img/1.gif" alt="Image1">
  <img src="./img/2.gif" alt="Image2">
  <img src="./img/3.gif" alt="Image3">
  <img src="./img/4.gif" alt="Image4">
  <img src="./img/5.gif" alt="Image5">
  <img src="./img/6.gif" alt="Image6">
  <img src="./img/7.gif" alt="Image7">
  <img src="./img/8.gif" alt="Image8">
  <img src="./img/9.gif" alt="Image9">
</div>
<p>
  <select id="a" onchange="if(p.eflag==2) { p = new Slot('waku0', 10, 10, +this.value); }">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10"  selected>10</option>
  </select>
  <input type="button" value="start" onclick="if(p.eflag == 2)p.start()"> /
  <input type="button" value="stop" onclick="p.stop()">
</p>
<script type="text/javascript">

var Math2 = new function ( ) {
  var sinTable = [ ];
  var cosTable = [ ];
  var i, t;

  for( i = 0; i < 720; i++ ) {
    t = i * Math.PI / 180;
    sinTable[ i ] = Math.sin( t );
    cosTable[ i ] = Math.cos( t );
  }

  this.sin = function ( deg ) {
    return cosTable[ (360 + deg % 360) |0 ];
  };
  this.cos = function ( deg ) {
    return cosTable[ (360 + deg % 360) |0 ];
  };
};


var Slot = function ( ) {
  this.init.apply( this, arguments );
};

Slot.prototype.init = (function ( ) {
  return function ( pid, step, interval, face ) {
    if( !( this.e = document.getElementById( pid ) ) ) return null;
    
    var c, o;
    this.e.style.overflow = 'hidden';
    this.e.style.position = 'relative';
    this.img = this.e.getElementsByTagName( 'IMG' );
    this.n = face || this.img.length;
    this.t = 360 / this.n;
    this.c = this.e.offsetWidth / 2;
    this.r = this.n < 3 ? this.c: this.e.offsetWidth * Math.tan( Math.PI / this.n )/(2*Math.sin(Math.PI/this.n));
    this.k = [ ];
    this.step = step;
    this.bstep = step;
    this.interval = interval;
    this.eflag = 2;
    this.ek = ( 90 - 180 / this.n ) | 0;
    for( c = 0; o = this.img[ c ]; c++) {
      this.k[c] = this.ek + this.t * c;
      o.style.position = 'absolute';
      o.style.visibility = c < this.n ? 'visible': 'hidden';
    }
    this.start(1);
    return true;
  };
})();

Slot.prototype.start = (function ( sin, abs, int ) {
  return function ( m ) {
    if( !m ) this.eflag = 0;
    var c, x0, x1, s, p;
    for( c = 0; c < this.n; c++) {
      x0 = -this.r * sin( this.k[c] );
      x1 = -this.r * sin( this.k[c] + this.t) + 1;
      s = this.img[c].style;
     if( x0 < x1 ) {
        s.left = int( this.c + x0 ) + 'px';
        s.width= int( abs( x1 - x0 ) ) + 'px';
        s.zIndex = 1 + '';
     } else {
        s.left = int( this.c + x1 ) + 'px';
        s.width= int( abs( x1- x0 ) ) + 'px';
       s.zIndex = 0 + '';
     }
      this.k[c] -= this.step;
    }

    if( this.eflag == 1) {
      if( this.step > 1) {
        this.step -= this.step / 15;
      } else {
        p = abs( (this.k[0] - this.ek) % this.t ) ;
        if( p < 1 ) {
          this.eflag = 2;
          this.step = this.bstep;
          alert( int( abs( (this.k[0]-this.ek) % 360) / this.t ) );
        }
      }
    }
    if( this.eflag == 2) return;
    setTimeout( (function (that) { return function () { that.start(1); }; })( this ), this.interval );
  };
})( Math2.sin, Math.abs, Math.floor );

Slot.prototype.stop = (function ( ) {
  return function ( ) {
    if( this.eflag == 0 ) this.eflag = 1;
  };
})();

var p = new Slot('waku0', 10, 10,+document.getElementById('a').value)
</script>