下記の通り、簡単なスロットマシーンで、絵柄が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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・プリン+醤油=ウニみたいな組み合わせメニューを教えて!
- ・タイムマシーンがあったら、過去と未来どちらに行く?
- ・遅刻の「言い訳」選手権
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・ハマっている「お菓子」を教えて!
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
javascriptで表に画像を貼る
-
画面表示とともに、テーブルの...
-
動的なcheckboxのcheckedについて
-
javascriptで<table>背景色の取得
-
value内に変数を入れたい
-
return trueとreturn falseの用...
-
特定<table>内の<td>の色を変える
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
-
マイナスなら赤字で表示したい...
-
文末の改行コードを削除したい
-
1つのページにformを2つ設置。2...
-
【jQuery】input nameの文字列...
-
onClickとsubmitの処理順序
-
JavaScriptで特定のtdタグにcla...
-
selectボックスの選択結果を変...
-
submitした値を返したい
-
プルダウン選択を変更すると、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
innerHTMLでのテーブル作成
-
jquery.csv2table.jsのテーブル
-
【jQuery】tableループ内のIDの...
-
javascriptでクリックするごと...
-
<iframe>内にHTMLをランダム表...
-
Javascriptでテーブルタグの座...
-
画面表示とともに、テーブルの...
-
テキストエリアに入力した改行...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
color 属性が追加できない
-
プルダウンメニューを表の中に...
-
JQueryでテーブルの行を追加し...
-
jquery にて、アラートダイアロ...
-
簡単なJavaスロットマシーンに...
-
javascriptでスロットマシン
-
Javascriptでの開閉リストの質問
おすすめ情報