実行例

myImageCnt = 3;	// 画像の数
myImage = new Array(	// 画像ファイル名の設定
"kuji1.gif",
"kuji2.gif",
"kuji3.gif"
);
myBuffer = new Array(myImageCnt);	// 画像イメージを収納するバッファ
for(i=0; i<myImageCnt; i++){	// 画像イメージをメモリに取込む
myBuffer[i] = new Image();
myBuffer[i].src = myImage[i];
}

myStartFlg = 0;	// スタートボタンフラグ (0:動いていない 1:動いている)
myStopFlg1 = 0;	// ボタン1フラグ (-1:動いている 0～n:止まっている)
myStopFlg2 = 0;	// ボタン2フラグ (-1:動いている 0～n:止まっている)
myStopFlg3 = 0;	// ボタン3フラグ (-1:動いている 0～n:止まっている)

function myStart(){	// ボタンが押された
if (myStartFlg == 0){	// 既に押していなければ、
myStartFlg = 1;	// スタート!
myStopFlg1 = -1;	// ボタン1回転!
myStopFlg2 = -1;	// ボタン2回転!
myStopFlg3 = -1;	// ボタン3回転!
myLoop();
}
}

function myLoop(){	// 回転させるルーチン
if (myStopFlg1==-1\|\|myStopFlg2==-1\|\|myStopFlg3==-1){	// まだどこか回転しているか？
if (myStopFlg1==-1){	// ボタン1は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg1.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
if (myStopFlg2==-1){	// ボタン2は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg2.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
if (myStopFlg3==-1){	// ボタン3は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg3.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
setTimeout( "myLoop()" , 50 );	// ぐるぐる回転させる!
}else{
myStartFlg = 0;	// 全部止まった
}
}

function myStop1(){	// ボタン1が押された
if (myStopFlg1 == -1){	// ボタン１は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg1.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
myStopFlg1 = myRnd;	// 止まった画像の番号を退避
}
}

function myStop2(){	// ボタン2が押された
if (myStopFlg2 == -1){	// ボタン2は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg2.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
myStopFlg2 = myRnd;	// 止まった画像の番号を退避
}
}

function myStop3(){	// ボタン3が押された
if (myStopFlg3 == -1){	// ボタン3は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg3.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
myStopFlg3 = myRnd;	// 止まった画像の番号を退避
}
}

// --></script>

<table border="1">
<tr>
<td><img src="kuji0.gif" name="myFormImg1"></td>
<td><img src="kuji0.gif" name="myFormImg2"></td>
<td><img src="kuji0.gif" name="myFormImg3"></td>
</tr>
<tr>
<td><form><input type="button" value="STOP" onclick="myStop1()"></form></td>
<td><form><input type="button" value="STOP" onclick="myStop2()"></form></td>
<td><form><input type="button" value="STOP" onclick="myStop3()"></form></td>
</tr>
<tr>
<td align="center" colspan="3">
<form><input type="button" value="START" onclick="myStart()"></form>
</td>
</tr>
</table>

for(i=0; i<myImageCnt; i++){              // 画像イメージをメモリに取込む
  myBuffer[i] = new Image();
  myBuffer[i].src  = myImage[i];
}

myStartFlg = 0; // スタートボタンフラグ (0:動いていない 1:動いている)
myStopFlg1 = 0; // ボタン1フラグ (-1:動いている 0～n:止まっている)
myStopFlg2 = 0; // ボタン2フラグ (-1:動いている 0～n:止まっている)
myStopFlg3 = 0; // ボタン3フラグ (-1:動いている 0～n:止まっている)

function myStart(){     // ボタンが押された
  if (myStartFlg == 0){ // 既に押していなければ、
    myStartFlg = 1;     // スタート!
    myStopFlg1 = -1;    // ボタン1回転!
    myStopFlg2 = -1;    // ボタン2回転!
    myStopFlg3 = -1;    // ボタン3回転!
    myLoop();
  }
}

サンプルだけの HTMLはこちらへ

説明

前回、ボタンを押して画像を変えるというサンプルを作りました。
これは、視点を変えると、画像が変わっているのをボタンを押して止めるとなります。
これはスロットマシンですね。ちょっと作ってみましょう。

myImageCnt = 3;	// 画像の数
myImage = new Array(	// 画像ファイル名の設定
"kuji1.gif",
"kuji2.gif",
"kuji3.gif"
);

相変わらず、大吉、吉、凶の３つのファイルを使います。(^^;

myBuffer = new Array(myImageCnt);	// 画像イメージを収納するバッファ
for(i=0; i<myImageCnt; i++){	// 画像イメージをメモリに取込む
myBuffer[i] = new Image();
myBuffer[i].src = myImage[i];
}

今回は高速で画像を表示するので、あらかじめそれぞれの画像イメージをメモリに読み込んでおきます。

myStartFlg = 0;	// スタートボタンフラグ (0:動いていない 1:動いている)
myStopFlg1 = 0;	// ボタン1フラグ (-1:動いている 0～n:止まっている)
myStopFlg2 = 0;	// ボタン2フラグ (-1:動いている 0～n:止まっている)
myStopFlg3 = 0;	// ボタン3フラグ (-1:動いている 0～n:止まっている)

myStartFlg は、STARTボタンを押したかどうかのチェックをします。０であれば押していない、１であれば押したという感じです。
myStopFlg1～3 は、それぞれのストップボタンのチェックをします。-1であれば、そのスロットが回転している状態、それ以外はストップしていて、そのときの画像データの配列番号をセットします。本当のスロットマシンを作ろうとした場合は、この myStopFlg1～3 がすべて同じ数字なら揃ったということです。
今回は、揃ったかどうかの処理は入れていません。(^^;

function myStart(){	// ボタンが押された
if (myStartFlg == 0){	// 既に押していなければ、
myStartFlg = 1;	// スタート!
myStopFlg1 = -1;	// ボタン1回転!
myStopFlg2 = -1;	// ボタン2回転!
myStopFlg3 = -1;	// ボタン3回転!
myLoop();
}
}

スタートボタンが押されたときに呼ばれる関数です。
if (myStartFlg == 0){
は、スタートした後に、再び STARTボタンを押したときは無効にするための if 文です。

myStopFlg1～3 にそれぞれ -1 をセットして、回転させます。

回転のメインルーチン myLoop() を呼びます。

function myLoop(){	// 回転させるルーチン
if (myStopFlg1==-1\|\|myStopFlg2==-1\|\|myStopFlg3==-1){	// まだどこか回転しているか？
if (myStopFlg1==-1){	// ボタン1は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg1.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
if (myStopFlg2==-1){	// ボタン2は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg2.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
if (myStopFlg3==-1){	// ボタン3は回転しているか？
myRnd = Math.floor(Math.random()*myImageCnt);	// 乱数を求める
document.myFormImg3.src = myBuffer[myRnd].src;	// 乱数番目の画像を表示する
}
setTimeout( "myLoop()" , 50 );	// ぐるぐる回転させる!
}else{
myStartFlg = 0;	// 全部止まった
}
}

if (myStopFlg1==-1||myStopFlg2==-1||myStopFlg3==-1){
は、３つのスロットの１つでも回転していれば有効ということです。
すべてが -1 以外ということは、全部 STOP がかかったということなので、回転ループ処理(myLoop) が終了となります。
ということは、再び STARTボタンを有効にしないといけないので、
myStartFlg = 0;
としています。
本格的なスロットマシーンを作る場合は、この後に、絵が全部揃ったかのチェックをして、コイン枚数を加算するなどの処理をいれます。

まだ、STOPボタンが押されていないスロットがあれば、乱数で画像を変えて、setTimeout()で、ぐるぐるとループします。

サンプルの画像

kuji0.gif	kuji1.gif	kuji2.gif	kuji3.gif

presidentさんが、画像サンプルを作ってくれました。感謝 m(_ _)m

● 参考ステップ

Step.6 日付表示はありきたり？　だったら表現を変えてみましょう　※Math.floor
Step.14 九九の問題に答えてみましょう　※Math.random
Step.28 オープニングロゴを作ってみましょう　※setTimeout
Step.50 アクセス毎に画像を変えてみましょう　
Step.51 ボタンが押されたら画像を変えてみましょう　

● リファレンス

Q&A 1

[Ｑ] 3つそろったらalert表示させたいのですが・・・
[Ａ]

myStartFlg = 0; // 全部止まった

の次の行に

if (myStopFlg1 == myStopFlg2 && myStopFlg2 == myStopFlg3) {
alert("大当たり～～");
}

を入れればOK。

▲TOP

Q&A 2

Q: スロットを３つじゃなく、１つでやりたいのですが。

A: １つバージョンを作りました。

実行例

myStartFlgQA2 = 0;	// スタートボタンフラグクリア (0:動いていない 1:動いている)

function myStartQA2(){	// ボタンが押されて呼ばれる関数
if (myStartFlgQA2 == 0){	// [START]ボタンを押した
myStartFlgQA2 = 1;	// スタート！
document.myFormQA2.myFormButtonQA2.value = "STOP";	// ボタン表示を[STOP]に変更
myLoopQA2();	// 回転させる
}else{	// [STOP]ボタンを押した
myStartFlgQA2 = 0;	// ストップ！
document.myFormQA2.myFormButtonQA2.value = "START";	// ボタン表示を[START]に変更
}
}


function myLoopQA2(){	// 回転させるルーチン
if(myStartFlgQA2==1){	// 回転中?
myRndQA2 = Math.floor(Math.random()*myImageQA2.length);	// 乱数を求める
document.myImgQA2.src = myBufferQA2[myRndQA2].src;	// 乱数番目の画像を表示する
setTimeout( "myLoopQA2()" , 50 );	// ぐるぐる回転させる!
}
}

// --></script>

▲TOP

実行例

リスト

説明

Q&A 1

Q&A 2

実行例

リスト