質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2490閲覧

変数の値に応じてhtml内のある部分の文書を書き換えたい

hideki0227

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/06/12 00:47

編集2016/06/12 00:56

JavaScript初心者です。
簡単なアドベンチャーゲームを作りたいのですがうまくいきません。
最初の画面id="00"で「郵便箱を開ける」をクリックすると違う画面id="03"に行きます。そこで「HIT HERE」をクリックすると末尾のopen_mailbox()関数を実行してmailboxを1にします。ここまではおそらく意図通りに動いているように思えます。問題は以降です。
再度id="03"の画面に行くとmailboxが1であれば別のテキストを出したいのですが、それが出ずに0としてのテキストが出ます。
またid="02"の画面ではmailboxが1か0かで異なるテキストを出したいのですが、どちらのテキストも出ません。
どうすればmailboxが1の場合のテキストを出せますでしょうか?

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>ペラ1ゾーク(偽物)</title> 6<style type="text/css"> 7* 8{ 9 background-color: #000000; 10 color: #ffffff; 11 font-size: 20px; 12 line-height:25px; 13} 14 15.box0 16{ 17 width: 640px; 18 margin: 0 auto; 19} 20 21.box1 22{ 23 width: 640px; 24 height: 2000px; 25 margin: 0 auto; 26} 27 28.dousuru 29{ 30 display: block; 31 float: left; 32 width: 86px; 33 height: 48px; 34 margin: 2px; 35 padding: 5px; 36 border: 1px solid #ffffff; 37 text-align: center; 38 overflow:hidden; 39} 40 41li 42{ 43 list-style-type:none; 44} 45 46a 47{ 48 text-decoration: none; 49 50} 51</style> 52<!-- <script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script> --> 53<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 54<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script> 55<script> 56$(document).ready(function() { 57$('a').smoothScroll(); 58}); 59</script> 60</head> 61<body> 62<script> 63var mailbox; 64mailbox = 0; 65 66</script> 67<div class="box0"> 68ペラ1ゾーク(偽物): 大地底帝国<br> 69<br> 70ようこそゾーク(偽物)の世界へ! 71あなたはどれだけ多くの宝物を持ってこの世界から脱出できるかな?<br> 72<br> 73ゲームの進行に応じてページが下のほうへスクロールして行きます。一番下がエンディングです。開始早々いきなり一番下までスクロールしないようにしましょう。<br> 74<br> 75* GAME START *<br> 76<br> 77<br> 78<br> 79</div> 80 81<div class="box1" id="00"> 82あなたは今、白い家の南の野原に立っています。正面に白い家があります。<br> 83ここには小さな郵便箱があります。<br> 84あなたは北を向いています。<br> 85<br> 86&gt;<br> 87<br> 88<a href="#01"><span class="dousuru">家を見る</span></a> 89<a href="#02"><span class="dousuru">手紙を<br>取る</span></a> 90<a href="#03"><span class="dousuru">郵便箱を<br>開ける</span></a> 91<a href="#04"><span class="dousuru">北に行く</span></a> 92</div> 93 94<div class="box1" id="01"> 95丸い形の不思議な家です。壁はやわらかそうで、モコモコしています。<br> 96<br> 97&gt;<br> 98<br> 99<a href="#00"><span class="dousuru">HIT<br>HERE</span></a> 100</div> 101 102<div class="box1" id="02"> 103<script> 104if (mailbox === 0) 105{ 106 document.write ('手紙? そんなものは見当たりませんよ。\n'); 107} else 108{ 109 document.write ('あなたは手紙を取りました。\n 110 手紙にはこうかいてあります。\n 111 「ひとの手紙を勝手に読むのはどうかと思う。」\n 112 あなたは郵便箱にそっと手紙をしまいました。\n'); 113} 114</script> 115<br> 116&gt;<br> 117<br> 118<a href="#00"><span class="dousuru">HIT<br>HERE</span></a> 119</div> 120 121<div class="box1" id="03"> 122<script> 123if (mailbox === 0) 124{ 125 document.write ('郵便箱を開けたら中に手紙がありました。\n'); 126} else 127{ 128 document.write ('郵便箱はすでに開いています。'); 129} 130</script> 131<br> 132&gt;<br> 133<br> 134<a href="#00" onclick="open_mailbox(mailbox);"><span class="dousuru">HIT<br>HERE</span></a> 135</div> 136 137<div class="box1" id="04"> 138家の前に来ました。<br> 139ここには玄関があります。<br> 140<br> 141&gt;<br> 142<br> 143<a href="#"><span class="dousuru">玄関を開ける</span></a> 144<a href="#"><span class="dousuru">辺りを見る</span></a> 145<a href="#00"><span class="dousuru">南に行く</span></a> 146</div> 147 148<script> 149function open_mailbox (mailbox) 150{ 151mailbox = 1; 152} 153</script> 154 155</body> 156</html> 157コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

**問題点1:**変数に複数行を入れている

JavaScript

1// ここ 2 document.write ('あなたは手紙を取りました。\n 3 手紙にはこうかいてあります。\n 4 「ひとの手紙を勝手に読むのはどうかと思う。」\n 5 あなたは郵便箱にそっと手紙をしまいました。\n'); 6```下記ページを参照。 7 8【JavaScriptで変数に代入するテキストを複数行にする方法まとめ - みかづきブログ その3】 9[http://kimizuka.hatenablog.com/entry/2014/09/12/095957](http://kimizuka.hatenablog.com/entry/2014/09/12/095957) 10 11--- 12 13**問題点2:**if の実行タイミングがわかっておられない 14 15今の書き方をされていると if はページを開いた際に1回だけ実行される。そのため必ず「mailbox === 0」が選ばれる。 16```JavaScript 17if (mailbox === 0)

**問題点3:**動作については問題ないが document.write は非推奨になる流れです

【HTML5でdocument.writeが非推奨であるならば | WEB制作システム-ホームページ制作・システム開発・SEO/SEM対策からWEBデザインまで】
http://labo-of.com/?p=1542

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]】
http://web.antenna.work/innerhtml/


とりあえずざっとみた所を指摘しました。
多分、クリックした際にjQueryで書き換え(追記:hidekichiさんのバージョン7以降参照)が手早いとは思いますが、スクロールで先が見えてしまう構造なのでそこから考えたほうが良いと思います。

投稿2016/06/12 03:29

編集2016/06/12 05:15
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hideki0227

2016/06/12 05:30

ありがとうございます。そもそも代入の時に改行しちゃいけないんですね。知りませんでした。ifの位置とdocument.writeを見直し、プレイヤーが行動を選択した時だけ条件分岐とinnerHTMLでのテキストの書き換えをする様にしたら、意図通りの動きになりました。 この先もこの考え方で進めてみます。作り始めでこれらのことを伺えて本当によかったです。
hideki0227

2016/06/12 05:34

追記: 手動スクロールでネタバレする仕様なのは、ご愛敬の範囲かと思ってます。いくつもフラグを立てないとエンディングは出ない様にもしますので。この点もご指摘ありがとうございます。
kei344

2016/06/12 05:52

スライダー系プラグインとか利用したり、下記の様な全画面系スライドを利用するなどするのも手かな、と思ったので。あと、要素(テキスト&選択肢)を最初に作るのではなく、選択肢のクリック後に生成すると見られることはないし、同じような動きを実現できると思います。 【Jquery fullContent.js】(全画面系スライド例) http://www.zehfernandes.com/jquery.fullContent/
hideki0227

2016/06/12 08:19

いろんなものがあるんですね。さっそく試してみます。重ねてありがとうございます。
guest

0

すいません、問題点は見てないんですが、色々手を加えました。

jsFiddle

アップデートしました。9
(気がついた所だけ直しておきました)

あんまりお見せするようなソースではないですけれども、何となしにこんな感じで行けたような気がするんですけれども。javascriptは一部しか使ってなくて、ほぼjQueryなんですけどね。

何かしらプラグインを読み込んでおられるのでjQueryはいけるんだと思いました。
まぁそのプラグインの分も中に仕込みましたけれども。

mailboxの件はflagと言うクラスを任意のIdに入れることでやりました。

投稿2016/06/12 02:25

編集2016/06/12 06:13
hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hideki0227

2016/06/12 05:31

ありがとうございます。ぼかしとか震えとか、いろいろできるんですね。ちょっと私にはまだ難しい世界でしたが、参考にさせて頂きます。
guest

0

以下のように、open_mailboxメソッドの引数を消せば動くと思います。

js

1function open_mailbox () 2{ 3mailbox = 1; 4}

「mailboxが1の場合のテキストが出ない」理由は、グローバル変数mailboxを判定している処理の段階で、グローバル変数mailboxの値が0だからです。ブラウザのデバッグ機能を使って、実際に確認してみてください。

で、引数を消すと動く理由ですが、まずJavaScriptはprimitive型については値渡しです。
http://qiita.com/mozisan/items/1b9d4bf5a1bb341dd354

引数がある状態では、変数mailboxはグローバル変数でなく、引数の方を指しています。
で、引数に1を代入していますが、値渡しのため呼び出し元のグローバル変数mailboxの値は変わりません。

引数を消した状態では、変数mailboxはグローバル変数を指していて、グローバル変数に1を代入しています。
だから、mailboxの判定処理では1になり、動くはずです。

投稿2016/06/12 02:04

yuji38kwmt

総合スコア437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hideki0227

2016/06/12 05:32

なるほど、そういうことになるんですね。おっしゃる通りに引数を消して、動いています。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問