【作ってみた】入力ダイアログで謎解きゲーム | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ 【作ってみた】入力ダイアログで謎解きゲーム

ども!開発部のいろはです!(`・ω・´)
突然ですが皆さんは、「重ね言葉」をご存知でしょうか?
重ね言葉とは「まず第一に…」「後で後悔した」
など、それとなく同じ言葉同士を繋げてしまうことです。
うーむ…考えていても無意識にポロって言ってしまいそうですね…
(友達の前で「頭痛が痛い」と言った時にその場にいた全員から総ツッコミされたのは今となればいい思い出です)
この他にも「最◯の切り札」「音速のソ◯ック」もこれに含まれるだとか
前置きはさておき、今回は謎解きゲームをご用意いたしましたので頭の体操がてら、お読みいただければ幸いです。

入力ダイアログで謎解きゲーム

今回はjavaScriptの「Window」を使い、指定した値が入力された時だけ処理を行なうプログラムを作ってみました!

  • ソース ※一部変更を加えております
  • 解説

t4  t5
左上の宝箱を押下すると右下のようなフォームが出現します。
この白い枠の部分がJava Scriptのフォームです!
(今回は正解の値を入力すると正解ページに飛ぶように設定しました)
このダイアログを表示しているのは

この「window.prompt()」という部分です。
青色で囲まれた部分が利用者に表示されるテキストで、
オレンジ色で囲まれた部分がフォームの初期値になります。
qa
この入力欄に正しい答えが入力されると正解ページに移動しますが、
不正解の場合とキャンセルを選択した場合は以下のようになります。

キャンセルか、ブラウザの✕を選択すると「null」になります。
今回は不正解の判定を行いたいので、演算子の「!=」を使用しました。
よって、「キャンセルか✕を選択しなければ」という意味になります。

elseでキャンセルか✕を選択した時の処理を書きます。
メッセージだけを表示させたい場合は「window.alert()」を使用します。
また、画像を押して入力ダイアログを開くようにするには「onClick」を使用します。

 
この問題は以下のボタンから遊ぶことができますので、よろしければ是非チャレンジしてみてください!
(半角数字のみでお答えください)
Let’s try!!

ABOUT ME
いろは
いろは
2017年入社 開発部所属のいろはと申します! 当ブログではWordPressなどWEBに関するアイデアや応用例をを中心に発信して参ります。