LoginSignup
0
0

More than 5 years have passed since last update.

フラッシュ暗算のようなメッセージ表示をしたい

Posted at

こんにちは。
フラッシュ暗算の要領で、数字の羅列ではなく既に設定したメッセージをonClickで表示する仕組みを作りたいのですが、下記のフラッシュ暗算用のコードからどのように書き換えていけばよいか悩んでいます。例えば、Math.floor(Math.random()*)の部分などはメッセージ表示であれば関係ないので必要ない、という程度までは辛うじて理解しているのですが・・・。何かご指摘や解決のヒントなどございましたら、よろしくお願いします。


<div id="no">
?
</div>
<p>
  <input type="button" value="Start" onClick="Start()">
  <input type="text" value="" id="kotae">
  <input type="button" value="Check" onClick="Check()">
</p>

<script type="text/javascript">

var intRandom = function ( min, max, len ) {
  var a = new Array( len );
  var r = [ ];
  var s = max - min + 1;

  while( len-- ) r.push( Math.floor(Math.random() * s + min ) );
  return r;
}


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


Flash.prototype.init = (function ( ) {
  return function ( id, vtime, htime, ary ) {
    this.target = document.getElementById( id );
    this.vtime = 'number' == typeof vtime ? vtime: 700;
    this.htime = 'number' == typeof htime ? htime: 100;
    return this.ary = ary;
  };
})();


Flash.prototype.stop = function ( ) {
  clearTimeout( this.tmid );
  return this.setString( 'Stop!!' );
};


Flash.prototype.start = (function ( ) {
  return function ( ) {
    this.setString( 'Go!' ); 
    this.max = this.ary.length;
    this.mode = false;
    this.tmid = null;
    this.cnt = 0;
    setTimeout( (function(that){ return function(){ that.loop() }})(this), 500);
  };
})();


Flash.prototype.setString = (function ( ) {
  return function ( str ) {
    return this.target.firstChild.nodeValue = 'undefined' == typeof str ? '': str + '';
  };
})();


Flash.prototype.loop = (function ( ) {
  return function ( ) {
    var t = '?';

    if( this.max >= this.cnt ) {
      t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ];

      this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this),
        this.mode ? this.htime: this.vtime );
    }
    this.setString( t );
  };
})();


Flash.prototype.getTotal = (function ( ) {
  return function ( ) {
    var t = 0, c = this.max, n;
    while( c ) t += this.ary[ --c ];
    return t;
  };
})();


Flash.prototype.setData = (function ( ) {
  return function ( ary ) {
    return this.ary = ary;
  };
})();


Flash.prototype.check = (function ( ) {
  return function ( total ) {
    return total == this.getTotal();
  };
})();

var mondai = new Flash( 'no', 400, 150);

function Start( ) {
  document.getElementById( 'kotae' ).value = '';
  mondai.setData( intRandom( -10, 10, 5) );
  mondai.start( );
}

function Check( ) {
  var t = document.getElementById( 'kotae' );
  t.value = mondai.check( t.value ) ? "正解": mondai.getTotal();
}


</script>
0
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0