ども！開発部のいろはです！(｀・ω・´)
突然ですが皆さんは、「重ね言葉」をご存知でしょうか？
重ね言葉とは「まず第一に…」「後で後悔した」
など、それとなく同じ言葉同士を繋げてしまうことです。
うーむ…考えていても無意識にポロって言ってしまいそうですね…
（友達の前で「頭痛が痛い」と言った時にその場にいた全員から総ツッコミされたのは今となればいい思い出です）
この他にも「最◯の切り札」「音速のソ◯ック」もこれに含まれるだとか
前置きはさておき、今回は謎解きゲームをご用意いたしましたので頭の体操がてら、お読みいただければ幸いです。
入力ダイアログで謎解きゲーム
今回はjavaScriptの「Window」を使い、指定した値が入力された時だけ処理を行なうプログラムを作ってみました！
- ソース ※一部変更を加えております
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function q(){ //Windowに表示させるテキストと初期値 answer = window.prompt("問題","答えを入力") //正解の場合は別のページにジャンプ if(answer == "答え"){ location.href = "a.php"; } //不正解の時は警告ダイアログを表示 else if(answer != "" && answer != null){ window.alert("答えが違うようだ…"); } //キャンセルを選択した場合は警告ダイアログを表示 else{ window.alert("キャンセルしました"); } } |
- 解説
→
左上の宝箱を押下すると右下のようなフォームが出現します。
この白い枠の部分がJava Scriptのフォームです！
（今回は正解の値を入力すると正解ページに飛ぶように設定しました）
このダイアログを表示しているのは
|
1 2 |
//Windowに表示させるテキストと初期値 answer = window.prompt("問題","答えを入力") |
この「window.prompt()」という部分です。
青色で囲まれた部分が利用者に表示されるテキストで、
オレンジ色で囲まれた部分がフォームの初期値になります。
この入力欄に正しい答えが入力されると正解ページに移動しますが、
不正解の場合とキャンセルを選択した場合は以下のようになります。
|
1 2 3 4 |
//不正解の時は警告ダイアログを表示 else if(answer != "" && answer != null){ window.alert("答えが違うようだ…"); } |
キャンセルか、ブラウザの✕を選択すると「null」になります。
今回は不正解の判定を行いたいので、演算子の「!=」を使用しました。
よって、「キャンセルか✕を選択しなければ」という意味になります。
|
1 2 3 4 |
//キャンセルを選択した場合は警告ダイアログを表示 else{ window.alert("キャンセルしました"); } |
elseでキャンセルか✕を選択した時の処理を書きます。
メッセージだけを表示させたい場合は「window.alert()」を使用します。
また、画像を押して入力ダイアログを開くようにするには「onClick」を使用します。
|
1 |
<img src="takarabako.png" onClick="q()"> |
この問題は以下のボタンから遊ぶことができますので、よろしければ是非チャレンジしてみてください！
（半角数字のみでお答えください）
Let’s try!!