- 締切済み
jQueryMobileでテキスト分岐ゲーム
JavaScript&jQuery初心者です。 JavaScriptの勉強のために、jQueryMobileを使って、スマホ向けの簡単なテキストゲームを作ってみましたが、変数で処理の分岐のさせ方がわかりません。 ページがロードされたときに、have_mapが決まってしまいます。 以下のサンプルだと、常に地図を手に入れた状態で宿屋に行けてしまいます。 ボタンの選択によって、状態を変数に入れて、分岐などに使いたいのですが。。。 そもそも、変数定義の流れがよく分かっていないのだと思うのですが。。。 アドバイスがいただけるとうれしいです。 よろしくお願いいたします。 コードはこちらになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ChooseAvatar</title> <!-- jQuery MobileのCSSを読み込む --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <!-- jQuery本体を読み込む --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- jQuery MobileのJSを読み込む --> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script> </head> <body> <script> var have_map = 0; </script> <div id="page1" data-role="page"> <div data-role="header" > <h1>質問１</h1> </div> <div data-role="content" align="center"> <p> 宝箱を見つけた<br> </p> <p> <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> have_map = 0; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page2" data-role="page"> <div data-role="header" > <h1>宝箱</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 地図を手に入れた<br> </p> <p> <a href="#page3" data-role="button">先に進む</a> </p> <script> have_map = 1; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page3" data-role="page"> <div data-role="header" > <h1>分かれ道</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 分かれ道です<br> </p> <p> <script> //alert(have_map); if( have_map === 1 ){ have_map_text_A = "宿屋に入る"; have_map_text_B = "お店に入る"; }else{ have_map_text_A = "右に進む"; have_map_text_B = "左に進む"; } document.write("<a href='#page4' data-role='button'>"+have_map_text_A+"</a>"); document.write("<a href='#page5' data-role='button'>"+have_map_text_B+"</a>"); </script> </p> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
- mappy6464
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- rtgp
- ベストアンサー率100% (4/4)
NO.1です。 > clickイベントで変数を代入しても、ページをロードしたときに、document.writeの内容が決まっているのでしょうか。 仰る通りです。 リンクがクリックされたタイミングで、have_map_text_*の内容に文字列を代入する必要があります。 あくまでJavascriptは読み込まれたタイミングで一旦全て評価されてしまいますので、とあるタイミングでのみ処理を走らせたい場合は、全てイベントリスナーに紐付けないといけません。
- rtgp
- ベストアンサー率100% (4/4)
こんにちは <script>の中にhave_mapを書いて代入していますが、これだとページがロードしたときに全て処理が進んでしまいます。 なので、ロードしたタイミングでhave_mapが1になります。 jQuery Mobileのdata-role=pageでページを切り替えているのは、見た目別ページをロードしているように見えますが、実際はひとつのページなので、ロードのタイミングで全部実行されちゃうんですね。 で、押したリンクによって処理を分けるなら、イベントリスナーを使うとかですかね。 例えば、 <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> ↓ <a href="#page2" data-role="button" class="open">開ける</a> <a href="#page3" data-role="button" class="nonopen">開けない</a> <script> $(".open").click(function(){ have_map = 1; }); </script> みたいな感じでしょうか （実際動かしてないので、これで動かなかったら言ってください。。） （上記はjQueryの書き方です、素のJavascriptだとaddEventListenerというやつを使います）
お礼
回答をありがとうございます。 早速Clickイベントを追加してみました。 <a href="#page2" data-role="button" onclick='open_box'>開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> function open_box(){ have_map = 1; alert(have_map); } </script> ですが、Page3をロード・解釈する時点で、have_mapが０なので、常に左右に進む表示になってしまいます。 clickイベントで変数を代入しても、ページをロードしたときに、document.writeの内容が決まっているのでしょうか。 すみません。本当の基本がわかっていない気がしてきました。。。
お礼
ありがとうございます。 そうですよね。