下記の通り、簡単なスロットマシーンで、絵柄が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></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ベストアンサー
- 回答日時:
> myImage = new Array(
> "img/header/kuji/kuji1.gif",
> "img/header/kuji/kuji2.gif",
> "img/header/kuji/kuji2.gif"
上記はkuji2.gifがだぶってますが、これは意図的な記述ですか?
--- 解決案 1
別々3枚でやりたいならば、単純に画像の最後のパスをkuji3.gif等に変更してみて下さい
--- 解決案 2
2枚だとすると、各々をSTOPしたときの乱数として出したフラグが、
1でも2でも図柄は一緒になってしまいます
でも、内部的には違うものです
だからそれらを比較して、条件に合わず大当たりと出ないのだと思います
単純に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
- 回答日時:
>そこで、質問なのですが、上記のようにならず、当たった時にBのページよりも手前に表示させる方法はあるのでしょうか?
AページのimgタグをBページの iframeタグの後に記述して(Aページのは削除)、
document.getElementById("ooatari").style.display = "none";//又は"block"; を
parent.document.getElementById("ooatari").~
と先頭に"parent."をつければOKです(親要素を指定)
AとBが違うドメイン間の場合は無理なのでwindow.open等に切り替える必要があるでしょう
ps #3
> >showModalDialogというのがありますがie専用なので推奨できません
> 超蛇足ですがwindow.openを使用することでそれっぽい挙動は出来ます。
window.openについては#2の後半で一応触れていますよ
いつも迅速なご回答本当にありがとうございます!
アドバイスいただいた通りにして思い通りにうまくいきました^^
この度は本当にお世話になりました。
私もこれからもっと勉強して、今度は逆に他の人から同様に質問された時に答えてあげれるぐらいになりたいと思います。
本当に助かりました。
ありがとうございました。
No.2
- 回答日時:
> あたる確立を下げる為、画像の枚数を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で作ったスロットのページをAとして、
さらにBという別のwebページ上にAを「i frame」で読み込ませます。
すると、当たった時に表れる当たりの画面がBのページの下に隠れてしまい、Aを表示している枠内にしか現れません。
(何故わざわざi frameで読み込ませなければならないかは聞かないでください…><)
そこで、質問なのですが、上記のようにならず、当たった時にBのページよりも手前に表示させる方法はあるのでしょうか?
ご丁寧にありがとうございます!!
アドバイスいただきました通りで、うまくいきました^^
本当に感謝いたします。
Javascriptはまだまだ勉強を始めたばかりで、奥が深くまだまだ覚えるのには時間がかかりそうですが、その分いろいろな事が可能になるので頑張って勉強したいと思います。
この度は本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
プルダウンメニューを表の中に...
-
Yahoo! UI LibraryのDataTable...
-
テキストエリアに入力した改行...
-
javascriptで表に画像を貼る
-
テーブル中に設けた背景画像を...
-
画面表示とともに、テーブルの...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
slickのレスポンシブ > center...
-
javascript による POST 送信時...
-
フォーム内で記入したクエリ送...
-
selectを変更不可にしたい
-
VBSでブラウザ上のテキストボッ...
-
セレクトボックスの値から料金...
-
netscapeでもinnerTextやinnner...
-
イベント発生順序
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報