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

fujillin · Answer

作ると長くなりそうなので、とりあえず似ているものを探してみました。

このあたり（↓）が参考になるのでは？
http://jimita.com/etc/javascript/slot/slot.html
http://www.tac-net.ne.jp/~imekat/senkousha/slot/slot0.html

比較的読み易く書いてあるみたい。

babu_baboo · Answer

ゲームですか？がんばってください
えっと。
document.getElementById("dram" + i).innerHTML = img[r];
で、上書きしてますが、

<img src=""alt="" id="abc">
だとしたら
document.getElementById('abc').src='2.png';
みたいにできますよ

ランダムな部分を、順列にするなら
r = Math.floor(Math.random() * 10);
を

if( ++r == img.length ) r = 0;
//もしくは、 r=++r%img.length;
（変数 r は、グローバルですよね）

背景色は、
document.body.style.backgroundColor = "red";
みたいにかえられます


話は変わりますが、ちがうところで、オブジェクト指向てきなのやってますね。
普段からのサンプルも、それ方式でやってほしいなぁ～と思ってます。

babu_baboo · Answer

スロットゲーム

babu_baboo · Answer

つづき。

//ドラムを回転させる
Dram.prototype.start = function () {
if( this.tmid ) return;
var that = this;
this.tmid = setInterval(
(function( that ) {
return function() {
that.next( );
};
})( this ), this.wait );
};

//ドラムを停止させる
Dram.prototype.stop = function () {
clearInterval( this.tmid );
this.tmid = null;
};

//スロットを定義
var Slot = function ( ) {
this.init.apply( this, arguments );
};

Slot.buffer = [ ];

Slot.prototype.init = function ( tgsw /*, [ swid, dramObj ], [ ] */ ) {
this.name = 'Slot';
this.buf = [ ];
var cnt = 1;
var ary;

Slot.buffer[ tgsw ] = this;
while( ary = arguments[ cnt++ ] ) {
this.buf[ ary[0] ] = ary[1];
Slot.buffer[ ary[0] ] = this;
}
};

Slot.prototype.start = function ( ) {
var cnt = 0, k, o;
for( k in this.buf ) {
o = this.buf[ k ];
if( 'Dram' === o.name ) o.start();
}
};

Slot.prototype.check = function ( id ) {
var obj = this.buf[ id ];
var k, o, n, num = '';

if( obj ) {
obj.stop();
for( k in this.buf ) {
o = this.buf[ k ];
if( 'Dram' === o.name ) {
n = o.getNoValue();
if( false === n ) return;
num += n + '';
}
}
alert( num );
}
else
this.start();
};

//何が押されたか
Slot.handler = function ( evt ) {
var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
var obj;

if( e.id && ( obj = Slot.buffer[ e.id ] ) )
obj.check( e.id );
};

//クリックされたら
(function ( ) {
document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
'click', Slot.handler, false );
})();

var images = ImageLoader( imageList );//画像の先読みっぽい？
var dram0 = new Dram( 'd0', images, 100, 0 );
var dram1 = new Dram( 'd1', images, 100, 0 );
var dram2 = new Dram( 'd2', images, 100, 0 );//回転ドラムを３個つくる

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

</script>

babu_baboo · Answer

まちがえた
//cc_on
を
//@cc_on
に

あぁ～今年こそ無駄な回答をしないようにと、思ってたのに・・・。

babu_baboo · Answer

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

babu_baboo · Answer

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

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

//その３
//呼ばれるたびドラムを回転
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();
　　　}
　};})();

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

作ると長くなりそうなので、とりあえず似ているものを探してみました。

ゲームですか？がんばってください

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

つづき。

まちがえた

#1です。

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

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

//その２

//その３

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

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

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

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

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

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