javascriptでスロットゲームを作ろうとしています。

Question

javascriptでスロットゲームを作ろうとしています。途中まではなんとかできたんですけど、出来ないところがあるんで質問したいと思います。スロットゲーム

スロットゲーム

★絵柄がランダムじゃなくて順番に回転させる。 ★各絵柄がすべてそろうと、大当たりとしてページの背景色が変化する。 ★大当たり後、再度スタートボタンを押すと、背景色は元の色にもどる。 ★すべての絵柄が止まってないのに、大当たりの背景色変化が起こらないようになっている。

fujillin · Accepted Answer

#1です。 #2に回答がでているので、#3様にならってオブジェクト的になもの(？)を練習で作ってみました。（prototype使うの慣れてないので、要領悪いかも…）

となっている要素の中に、ドラムが作成されます。とりあえず、imgではなくtextで代用していますが、ドラムを生成する時にTextNodeの代わりにimg要素を入れるようにすれば、表示をそのまま画像に替えられるはず。 stopボタンを押してから空回りして止まるようにしています。その変化をintervalとstepを変えることで行なっているので、数値を変えると止まるまでの時間や回り方も変わります。最後に止まるときに、どちら側で止まるのか逆転させたりして、ややアナログ的な雰囲気にしたつもり。ご愛嬌ですが、ご参考まで… test

dram1

dram2

dram3

dram4

dram5

dram6

dram7

babu_baboo · Answer

やっぱり、自信がないんだよね～。＞メモリーリークパターン
http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view&no=146&p=2
とか、ここの検索で、このキーワードで調べてみて～！
あなたなら判る！俺は無理。

イベントはバブルするから大元でチェックすれば充分。ってのが見つかるはず。
ここの受け売りみたいで申し訳ない。

fujillin · Answer

＞メモリーリーク

よくわかってないので、なんとも言えませんが…
　sp.onclick = (function(obj) {
　　return function(){obj.stop();}
　})(this);
thisはDOMオブジェクトではないので、かってにならないだろうと思っていたんだけど…

＞回避策とかありますか？
とりあえず、
　sp.onclick = set(this);
　function set(t) {
　　return function() { t.stop(); }
　}
みたいにするとかではダメ？

babu_baboo · Answer

//その６

var images = ImageLoader( image_base64_number, 'data:image/gif;base64' );//画像の先読みっぽい？
var dram0 = new Drum( 's0', images );
var dram1 = new Drum( 's1', images );
var dram2 = new Drum( 's2', images );
var dram3 = new Drum( 's3', images );
var dram4 = new Drum( 's4', images );//回転ドラムを３個つくる

new Slot( 'swStart', [ 'sw0', dram0 ], [ 'sw1', dram1 ], [ 'sw2', dram2 ], [ 'sw3', dram3 ], [ 'sw4', dram4 ] );//スイッチとセットでスロットを作る

</script>

以上で～～す！
１つ手前の投稿は、画像データです。そのうち閲覧可能になるでしょう～～！

babu_baboo · Answer

//その５
var image_base64_number = [
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADXXi63P4wPkNGqQSSAIYpnNcUQGkoRDk0QwksaVkshvui7oq7sBv0vJ1J0QoeYjKiDZg8FEtMwMy5FEqt0axQQKseXZnFk3micQDlYphREAAElNLacfkQypK8ft9IAAA7',
　'R0lGODlhEAAYAKIAAP///+7u7rCwsHZ2dkFBQRkZGQAAAAAAACwAAAAAEAAYAAADN2i63P4wxkKGIHEEwAGGhNB5kiFyX3SS0ppCbhm33fvMai3rNLr7PdajoOkIBpDBqFNqOp/QRQIAOw==',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADZHi63P4wOkPGOJYYVwIQBQYAQbgY3rcdI7keRAsQikwrcXvLl4KOgRWPQdEoCraIQSAzTZg6SAEKGDgbuYExYrlGCuCGYfCaygRaAtO0lLlHi9y71YOVDhSqSlIgELwSgYKDBwkAOw==',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADY3i63P4wvkKGqaQ8AgAxhdBZDDcqRgcIzKAC2vESi6vG81KorJLrhA9KFTBECjZPJCmIQS4iQMD5JBoVyAFt8TsEVFuZaoB9kX3jchrdCduKaun1cBldvgBS4/IJCiWAgYINCQA7',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADTni63P4wSkUGmacAcKURWxcRG+eR4Uig5lMEayky33Cw8zIExi07pALlx3iJcI0BYMCMbQQWXYnD2tggSEn2YSCAnoSeQzPdCDHotHqSAAA7',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADYXi63P4wNlOKmaURwLsQwKB1JJcxWwkEhFMQcGw9lcQMhEFUOzQMIBiH5RiETqmQpsUAcZgRI0fAKPxOBylnUSCdtIBFEsDUUhXjcgdqcIoOhsB0YmQVnDna7pW3+f+ACgkAOw==',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADZXi63P4wQjJIGdU4I0AoBgEAQtEMI6GI48AUI6AeaMzUsoILTBDPhc5nYYjlFqaX0VITzBSwH8Xogi6tP2xqsVtcdcZFZwu2rbJlEhFNYx9Y1cNYoGGwCIbaoN4IgQh4EoKDhA4JADs=',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADTHi63P4wtmLKuMQsqgoYQCgKBFh0YqpqhycMgRoOCwGwRRkHBFNKwFaABrQFWBEboCdRHiWG2KcoYkYEVWBKoE2drt7mKJjLBM/odAIAOw==',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADaHi63P4wPkMGKcM+AoAoVPcxXEcsnWcsQnoqKfAe8VwvgYvqysDTqZXC0PKASjJHaVAQFRoGHyBAiHYCzwXSdhUabjBe8xcbKMamXcesyKXD78N2mAoIFQR3tch0GAoEVYFZEoWGhwwJADs=',
　'R0lGODlhEAAYAKIAAP///+7u7tTU1LCwsHZ2dkFBQRkZGQAAACwAAAAAEAAYAAADY3i63P4wPjJGoeQZAYAwRPc1XGcoITAwabe0xTJ0Lkqvyky/dCDTAB7tdGgFbbTYwRCgZYpAZbHpNEqXlAEBFGURpEZWEulhAHGtp+JMJubGB51aYdAJLp05A7S9uCWAgYIMCQA7'
];

babu_baboo · Answer

//その４
Slot.prototype.idCheck = (function ( ) {
　return function ( id ) {
　　var obj;
　　
　　if( obj = this.buf[ id ] ) {
　　　obj.stop(
　　　　(function ( that, id ) {
　　　　　return function ( num ) {
　　　　　　that.nums[ id ] = num;
　　　　　　that.numsCheck();
　　　　　};})( this, id )
　　　);
　　} else this.start();
　};})();


Slot.prototype.numsCheck = (function ( ) {
　return function ( ) {
　　var nums = '', k;
　　for( k in this.nums ) {
　　　if( this.nums.hasOwnProperty( k ) ) {
　　　　if( this.nums[ k ] === false ) return false;
　　　　nums += this.nums[ k ];
　　　}
　　}
　　alert(nums);//結果は文字列
　　return nums;
　};})();
　
　
//何が押されたか
Slot.handler = function ( evt ) {
　var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
　var o;
　e && ( o = Slot.buffer[ e.id ] ) && o.idCheck( e.id );
};

//クリックされたら
(function ( ) {
　document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
　　'click', Slot.handler, false );
})();

//画像データ

babu_baboo · Answer

//その３
//呼ばれるたびドラムを回転
Drum.prototype.roll = (function ( int ) {
　return function ( ) {
　　if( this.f ) {
　　　//加速
　　　this.step = Math.min( this.step + this.ac, 15 );
　　} else {
　　　//減速
　　　this.step = Math.max( this.step - this.ac, 1 );
　　　if( 1 == this.step && int( this.angle % this.n ) == 0) {
　　　　clearInterval( this.tmid );
　　　　this.tmid = null;
　　　　if( 'function' === typeof this.cbFunc ) {
　　　　　this.cbFunc( this.getNumber() );
　　　　}
　　　}
　　}
　　this.angle += this.step;
　　this.view();
　};
})( Math.floor );


Drum.prototype.start = (function ( ) {
　return function ( ) {
　　if( !this.tmid ) {
　　　this.f = true;
　　　this.step = 0;
　　　this.tmid = setInterval( (function ( that ) {
　　　　return function ( ) { that.roll( ); }; })( this ), 30);
　　}
　};})();


Drum.prototype.stop = (function ( ) {
　return function ( cbFunc ) {
　　this.cbFunc = cbFunc;
　　this.f = false;
　};})();


Drum.prototype.getNumber = (function ( ) {
　return function ( ) {
　　return this.tmid ? false: Math.floor( ( this.angle % 360 ) / this.n );
　};})();


//スロットを定義
var Slot = function ( ) {
　this.init.apply( this, arguments );
};

Slot.buffer = [ ];//clickでidをキーとして、オブジェクトを調べるため

Slot.prototype.init = (function ( ) {
　return function ( tgsw /*, [ swid, dramObj ], [ ] */ ) {
　　this.name = 'Slot';
　　this.buf = [ ];
　　this.nums = [ ];
　　var cnt = 1;
　　var ary, id, drum;

　　Slot.buffer[ tgsw ] = this;
　　
　　while( ary = arguments[ cnt++ ] ) {
　　　id = ary[0], drum = ary[1];
　　　this.buf[ id ] = drum;
　　　Slot.buffer[ id ] = this;
　　}
　};})();


Slot.prototype.start = (function ( ) {
　return function ( ) {
　　for( var k in this.buf )
　　　if( this.buf.hasOwnProperty( k ) ) {
　　　　this.nums[ k ] = false;
　　　　this.buf[ k ].start();
　　　}
　};})();

babu_baboo · Answer

//その２


var Drum = function ( ) {
　this.init.apply( this, arguments );
};

//ドラムの初期化
Drum.prototype.init = function ( id, images, setNo, ac ) {
　var cnt = 0;
　var pnt = document.getElementById( id );
　var img, newImg;
　
　this.imgs = [ ];
　
　while( img = images[ cnt++ ] ) {
　　newImg = document.createElement( 'img' );
　　newImg.src = img.src;
　　newImg.alt = img.alt;

　　with( newImg.style )
　　　position = 'absolute',top = left = '0px';

　　this.imgs.push( pnt.appendChild( newImg ) );
　}

　this.name = 'Drum';
　this.max = --cnt;
　this.radius　= newImg.offsetHeight / (2 * Math.tan( Math.PI / cnt ) );//半径
　this.center = Math.floor( pnt.offsetHeight / 2 );//中心
　this.n = 360 / cnt; //ｎ角形
　this.angle = setNo || Math.floor( Math.random( ) * cnt ) * this.n; //ドラムの回転角度
　this.step = 0; //回転量（加速量）
　this.ac = ac || .2;//加速度
　this.f = false;//true:加速 false:減速
　this.tmid = null;
　this.view();
};


//ドラムの絵柄表示
Drum.prototype.view = (function ( int, deg, sin ) {
　return function ( ) {
　　var cnt = 0;
　　var sa = this.angle + this.n / 2;
　　var py0, py1, img, style;

　　py0 = int( this.center + sin( sa * deg ) * this.radius );

　　while( img = this.imgs[ cnt++ ] ) {
　　　style = img.style;
　　　sa -= this.n;
　　　py1 = int( this.center + sin( sa * deg ) * this.radius );

　　　if( py0 > py1 ) {
　　　　style.top = py1 + 'px';
　　　　style.height = py0 - py1 + 'px';
　　　　style.display = 'inline';
　　　} else {
　　　　style.display = 'none';
　　　}
　　　py0 = py1;
　　}
　};
})( Math.floor, Math.PI / 180, Math.sin );

babu_baboo · Answer

長いので分割してアップします。全角空白は、全て半角空白になおしてくださいその１スロットゲーム

babu_baboo · Answer

おぅ～がっつり書きましたね～。まってました！＞fujillin さん

ここでは、がっつんと指摘する人が少ないので、やんわりと・・・。
最後の方の
　sp.onclick = (function(obj) {
　　return function(){obj.stop();}
　})(this);
とかって、メモリーリークだと思ってる。
回避策とかありますか？

いまだに、自分も悩みます。

OKWaveからだと、文字数制限があって、一度にアップできなくて、分割するのが面倒です。^^;

javascriptでスロットゲームを作ろうとしています。

#1です。

やっぱり、自信がないんだよね～。

＞メモリーリーク

//その６

//その５

//その４

//その３

//その２

長いので分割してアップします。

おぅ～がっつり書きましたね～。

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング