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

解決済

質問者：mutekisama
質問日時：2010/01/12 23:32
回答数：15件

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

<html>
<head>
<title>スロットゲーム</title>
</head>
<body>
<h3>スロットゲーム</h3>
<hr>
<form name="slot">
<table border="2">
<tr>

</tr>
<tr bgcolor="#CCCCCC">
<td><div id="dram0">☆</div></td>
<td><div id="dram1">☆</div></td>
<td><div id="dram2">☆</div></td>
</tr>
<tr>
<td><input type="button" value="ストップ" onClick="dramstop(0)"></td>
<td><input type="button" value="ストップ" onClick="dramstop(1)"></td>
<td><input type="button" value="ストップ" onClick="dramstop(2)"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="スタート" onClick="dramreset()"></td>
</tr>
</table>
</form>

<hr>
<div id="rireki"></div>

<script language="JavaScript">
img = new Array("<img src='0.png'>" ,"<img src='1.png'>","<img src='2.png'>"
,"<img src='3.png'>" ,"<img src='4.png'>","<img src='5.png'>","<img src='6.png'>"
,"<img src='7.png'>","<img src='8.png'>","<img src='9.png'>");
kiroku = new Array();
rrk = "";
rrk_num = 0;

dramreset();

dramstart();

function dramreset() {
var s = "";
for (i=0; i<3; i++) {
s += img[kiroku[i]];

document.slot.elements[i].disabled = false;
}

rrk_num++;

}

function dramstart() {
for (i=0; i<3; i++) {
if (!document.slot.elements[i].disabled) {
r = Math.floor(Math.random() * 10);
document.getElementById("dram" + i).innerHTML = img[r];
}
}
setTimeout("dramstart()",200);
}

function dramstop(btn) {
r = Math.floor(Math.random() * 10);
document.getElementById("dram"+btn).innerHTML = img[r];
document.slot.elements[btn].disabled = true;
kiroku[btn] = r;
}

</script>
</body>
</html>

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (15件中11～15件)

ベストアンサー優先
最新から表示
回答順に表示

No.5

回答者： babu_baboo
回答日時：2010/01/13 18:51

まちがえた

//cc_on
を
//@cc_on
に

あぁ～今年こそ無駄な回答をしないようにと、思ってたのに・・・。

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2010/01/13 18:45

つづき。

//ドラムを回転させる
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>

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2010/01/13 18:44

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

<title>スロットゲーム</title>

<table border="2">
<tr>
<td><img src='./img/0.gif' alt="no0" id="d0"></td>
<td><img src='./img/0.gif' alt="no1" id="d1"></td>
<td><img src='./img/0.gif' alt="no2" id="d2"></td>
</tr>
<tr>
<td><input type="button" value="ストップ" id="sw0"></td>
<td><input type="button" value="ストップ" id="sw1"></td>
<td><input type="button" value="ストップ" id="sw2"></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="スタート" id="swStart"></td>
</tr>
</table>

<script type="text/javascript">

//cc_on
//________________________
var imageList = [
'./img/0.gif', './img/1.gif', './img/2.gif', './img/3.gif', './img/4.gif',
'./img/5.gif', './img/6.gif', './img/7.gif', './img/8.gif', './img/9.gif'
];

//画像の先読み
function ImageLoader ( srcList ) {
var rst = [ ];
var cnt = 0;
var max = srcList.length;

while( cnt < max ) {
rst[ cnt ] = new Image;
rst[ cnt ].src = srcList[ cnt ];
cnt++;
}
return rst;
};

//ドラムを１つを定義する
var Dram = function ( ) {
this.init.apply( this, arguments );
};

//初期化
Dram.prototype.init = function ( targetId, images, wait, stratNo ) {
this.tgt = document.getElementById( targetId );
this.img = images;
this.max = images.length;
this.wait = wait;
this.no = 'number' === typeof startNo ? startNo % this.max: Math.random() * this.max |0;
this.tmid = null;
this.name = 'Dram';
this.setNo();
};

//指定した画像番号にする機能
Dram.prototype.setNo = function ( n ) {
if( 'number' === typeof n ) this.no = n % this.max;
this.tgt.src = this.img[ this.no ].src;
};

//次の画像番号に画像を変える
Dram.prototype.next = function ( ) {
this.no = ( this.no + 1 ) % this.max;
this.setNo();
};

//現在のドラムの番号を返す
Dram.prototype.getNoValue = function ( ) {
return this.tmid ? false: this.no;
};

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2010/01/13 18:42

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

えっと。
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";
みたいにかえられます

話は変わりますが、ちがうところで、オブジェクト指向てきなのやってますね。
普段からのサンプルも、それ方式でやってほしいなぁ～と思ってます。