簡単なJavaスロットマシーンについて＞＜

質問

下記の通り、簡単なスロットマシーンで、絵柄が3つ揃った際に「大当たり！」とポップアップウィンドウで表示される物を作りたいのですが、3つ絵柄が揃っても当たり表示が出るときと出ない時がまちまちで、困っています。
アドバイスをいただけましたら幸いです。

<script language="JavaScript"><!--
myImageCnt = 3;
myImage = new Array(
"img/header/kuji/kuji1.gif",
"img/header/kuji/kuji2.gif",
"img/header/kuji/kuji2.gif"
);
myBuffer = new Array(myImageCnt);

for(i=0; i<myImageCnt; i++){
myBuffer[i] = new Image();
myBuffer[i].src = myImage[i];
}

myStartFlg = 0;
myStopFlg1 = 0;
myStopFlg2 = 0;
myStopFlg3 = 0;

function myStart(){
if (myStartFlg == 0){
myStartFlg = 1;
myStopFlg1 = -1;
myStopFlg2 = -1;
myStopFlg3 = -1;
myLoop();
}
}

function myLoop(){
if (myStopFlg1==-1||myStopFlg2==-1||myStopFlg3==-1){
if (myStopFlg1==-1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg1.src = myBuffer[myRnd].src;
}
if (myStopFlg2==-1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg2.src = myBuffer[myRnd].src;
}
if (myStopFlg3==-1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg3.src = myBuffer[myRnd].src;
}
setTimeout( "myLoop()" , 50 );
}else{
myStartFlg = 0;
if (myStopFlg1 == myStopFlg2 && myStopFlg2 == myStopFlg3) {
　　　alert("大当たり～～");
　}
}
}

function myStop1(){
if (myStopFlg1 == -1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg1.src = myBuffer[myRnd].src;
myStopFlg1 = myRnd;
}
}
function myStop2(){
if (myStopFlg2 == -1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg2.src = myBuffer[myRnd].src;
myStopFlg2 = myRnd;
}
}
function myStop3(){
if (myStopFlg3 == -1){
myRnd = Math.floor(Math.random()*myImageCnt);
document.myFormImg3.src = myBuffer[myRnd].src;
myStopFlg3 = myRnd;
}
}
// --></script>
<div style="width:50px; padding:5px; background-color:#cccccc;">
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg1"></td>
</tr>
<tr>
<td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop1()"></p></form></td>
</tr>
<tr>
<td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg2"></td>
</tr>
<tr>
<td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop2()"></p></form></td>
</tr>
<tr>
<td align="center"><img src="img/header/kuji/kuji1.gif" name="myFormImg3"></td>
</tr>
<tr>
<td align="center"><form style="margin:0; "><p style="margin:2px 0px 5px 0px; "><input type="button" value="STOP" onclick="myStop3()"></p></form></td>
</tr>
<tr>
<td align="center"><form style="margin:0; "><p style="margin:5px 0px; "><input type="button" value="Start" onclick="myStart()"></p></form></td>
</tr>
</table>
</div>

回答No.1

suzuki-_- · ベストアンサー

＞ myImage = new Array(
＞ "img/header/kuji/kuji1.gif",
＞ "img/header/kuji/kuji2.gif",
＞ "img/header/kuji/kuji2.gif"

上記はkuji2.gifがだぶってますが、これは意図的な記述ですか？

--- 解決案 1
別々３枚でやりたいならば、単純に画像の最後のパスをkuji3.gif等に変更してみて下さい

--- 解決案 2
２枚だとすると、各々をSTOPしたときの乱数として出したフラグが、
1でも2でも図柄は一緒になってしまいます
でも、内部的には違うものです
だからそれらを比較して、条件に合わず大当たりと出ないのだと思います

単純に２枚でやるならば、下記に変更してみてください
myImageCnt = 2;
myImage = new Array(
"img/header/kuji/kuji1.gif",
"img/header/kuji/kuji2.gif"
);

--- 解決案 3
確率などを考慮するために画像をダブらせて使用しているならば、
各myStopX()内のフラグ代入の際に、

//例：myStopFlg1に代入の場所
//myStopFlg1 = myRnd　のところを
myStopFlg1 = myRnd == 0 ? 0 : 1;

とすれば大丈夫です

myRndが 0（kuji1.gif表示）の時はフラグに0、
それ以外（1又は2 kuji2.gif表示）はフラグに1を代入し統一させるということです

補足

ご回答ありがとうございます！！
大変初歩的なミスをおかしていたようで…お恥ずかしい限りです。
解決案1で大丈夫そうです。
本当にありがとうございました。

あと、大変お詳しいようですのでもう1点お伺いしたいのですが、
あたる確立を下げる為、画像の枚数を5枚…7枚と増やす場合は単純に、1.2.3と3すくみになった箇所をそれぞれ増やしていくだけで大丈夫でしょうか？
最後に、当たった際にポップアップで現れる物に画像を使ったりもできるのでしょうか。
Javaに関しては素人でして、教えていただけましたら幸いです。

回答No.4

suzuki-_-

＞そこで、質問なのですが、上記のようにならず、当たった時にBのページよりも手前に表示させる方法はあるのでしょうか？

AページのimgタグをBページの iframeタグの後に記述して（Aページのは削除）、
document.getElementById("ooatari").style.display = "none";//又は"block";　を

parent.document.getElementById("ooatari").～
と先頭に"parent."をつければＯＫです(親要素を指定)

AとBが違うドメイン間の場合は無理なのでwindow.open等に切り替える必要があるでしょう

ps ＃３
＞ >showModalDialogというのがありますがie専用なので推奨できません
＞ 超蛇足ですがwindow.openを使用することでそれっぽい挙動は出来ます。
window.openについては＃２の後半で一応触れていますよ

お礼

いつも迅速なご回答本当にありがとうございます！
アドバイスいただいた通りにして思い通りにうまくいきました＾＾
この度は本当にお世話になりました。
私もこれからもっと勉強して、今度は逆に他の人から同様に質問された時に答えてあげれるぐらいになりたいと思います。
本当に助かりました。
ありがとうございました。

回答No.3

wp_

>showModalDialogというのがありますがie専用なので推奨できません
超蛇足ですがwindow.openを使用することでそれっぽい挙動は出来ます。

が、
>大当たり用の画像をそのまま表示させるのが良いかと思います
私もこの意見に賛成だったりします。^^;

お礼

ありがとうございます。
やはり画像を直接表示するのが良いようですね＾＾
あくまでもページ内の遊びコンテンツとしてなので、これで十分です。
ご回答ありがとうございました。

回答No.2

suzuki-_-

＞ あたる確立を下げる為、画像の枚数を5枚…7枚と増やす場合は単純に、1.2.3と3すくみになった箇所をそれぞれ増やしていくだけで大丈夫でしょうか？

基本的な考え方はそれで大丈夫だと思います
一応気をつける点をあげておきます

myImageCnt = 3;
//3の部分 myImageに使われている画像の枚数と合わせること

myImage = new Array(
"img/header/kuji/kuji1.gif",
"img/header/kuji/kuji2.gif",
"img/header/kuji/kuji2.gif"//←★
);
//パスは""でくくること
//区切りに , (カンマ) を使用すること
//区切りなので、カンマは最後には必要なし（★部分）

＞最後に、当たった際にポップアップで現れる物に画像を使ったりもできるのでしょうか。

alertだと画像は使えません
showModalDialogというのがありますがie専用なので推奨できません

単純にその画面のみで遊ぶというのならば、
個人的には新規ポップアップではなく、
大当たり用の画像をそのまま表示させるのが良いかと思います

</div>の次行あたりに

<img id="ooatari" src="大当たり用画像パス" onclick="this.style.display='none';" width="800" height="400" style="display:none;cursor:pointer;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-400px;">

を記述しておきます
ちなみにmargin-top:-200px;　は画像のheight（例では400）の半分をマイナスにした値
margin-leftには画像のwidthの半分をマイナスにした値を入れることで、画面の中央に表示できます

次に、
if (myStopFlg1 == myStopFlg2 && myStopFlg2 == myStopFlg3) {

の中、当たり時のアクションとして、

document.getElementById("ooatari").style.display = "block";

とする
こうすれば、当たった際画面に画像が表示されます

画像をクリックすることで消えますが、故意にjavascript側で消したい場合は、

document.getElementById("ooatari").style.display = "none";

とすればよいです（myStart()の中に使用などで）

当り用画像タグの記述自体もjavascript等でやったほうがよさげですが、
ここでは基本的な考え方とその方法案ということでここまでにしときます

他の方法ではwindow.open()がお手軽です

ちなみにJavaではなくjavascriptです
今回はjavascriptの他にcssも利用してますが、
何かがわからなくなったら深く理解を得るために、
気になった語句等をそのまま検索等で調べてみるのが吉です

多くの参考文献が出てくると思いますし、
ある程度自力で知識を得て試していったほうが、
今後の応用力としてその知識は重宝しますよ！

長くなりましたが、是非自分で納得のいくよう頑張ってみてくださいね

お礼

ご丁寧にありがとうございます！！

アドバイスいただきました通りで、うまくいきました＾＾
本当に感謝いたします。

Javascriptはまだまだ勉強を始めたばかりで、奥が深くまだまだ覚えるのには時間がかかりそうですが、その分いろいろな事が可能になるので頑張って勉強したいと思います。

この度は本当にありがとうございました。

補足

何度も質問して本当に申し訳ありませんが、もう一つだけ教えて欲しい事があります！

上記のようにJavascriptで作ったスロットのページをAとして、
さらにBという別のwebページ上にAを「i frame」で読み込ませます。
すると、当たった時に表れる当たりの画面がBのページの下に隠れてしまい、Aを表示している枠内にしか現れません。
（何故わざわざi frameで読み込ませなければならないかは聞かないでください…＞＜）

そこで、質問なのですが、上記のようにならず、当たった時にBのページよりも手前に表示させる方法はあるのでしょうか？