【参考記事まとめ】HTML,CSS,JavaScriptで簡単なWeb謎解きページを作ってみました。

どうも、よざっちです。

タイトルの通り、今回簡単な謎解きページを作ってみました。

制作時間はだいたい、

  • デザイン・レイアウト 2時間
  • 画像制作・編集 2時間
  • 謎制作 1時間
  • コーディング 20時間

くらいでしょうか。死ぬほど時間がかかってしまいました(笑)

JavaScriptの復習のために作ってみたんですが、見事に色々と忘れていましたね。

やっぱり、毎日ちょっとずつでもいいからコードを書かないといけない。

だけど、自分が欲しい情報の調べ方さえしっかりと身に着けていれば何とかなる!

今回改めて実感しました。

作っているうちに色々思い出してきたし、これからも色々と作ってみようと思います。

TREASURE DUNGEON-Web謎解き

備忘録として今回Webページを作るにあたって、参考にした記事をまとめてみました。

ゲームのネタバレになるので気になる方はゲームをクリア後に見てみてください!




使ったもの

  • 無料の画像素材
  • Adobe Illustrator(画像が編集できるソフトであればOK)
  • Visual Studio Code(コードを書くため)
  • GitHub(ページを表示するため)

作るために参考にした記事一覧

ドラクエ風のタイトル画像をつくる

別になくてもいいですが、あった方が雰囲気出るので作ったドラクエ風のロゴ。

この記事と違ってillustratorだけで作りましたが、意外と雰囲気でたのでよかったです。

トップページを開いたときに画面全体がフェードする

Now Loadingみたいな画面が欲しくて作りました。

画面全体がふわぁーっとフェードするだけでサイトの雰囲気が変わりますよね。

テキストボックスの枠線を消す

これも必ずしも必要ではないけど、世界観を出したくてやってみました。

テキストボックスにも背景を指定できるので、石板っぽく。

ボタンをクリックするとイベント開始

今回多用したクリックイベント。

特に入力した答えの正誤判定の部分でかなりお世話になりました。

これだけでかなりできることの幅が広がるからいいよね。

JavaScriptのカウントボタン:押した数をカウントする

今回のキモでもあるカウントボタン。

「ある条件を満たすと次が…」みたいな感じで、とても役に立ちました。

JavaScriptでページ遷移

直リンクではなく、JavaScriptによって発動するページ遷移。

これ自体は別に難しくないのですが、相対パスにちょっと手間取りました。

最初コードを書いているJavaScriptのファイルを起点にパスを書いていたのですが、実際はhtmlからだったよう。

相対パスって大変。

Twitterのシェアリンクをつくる

これはおまけというか、せっかくならシェアボタンをつけて感想を聞いてみたかったのでつけてみました。

よくあるシェアボタンも自分で作ってみるとなると、色々なものが作用しているんだと勉強になりました。

シェアしてくれたら嬉しくて小躍りします。

記事の感想はこちらから。

ABOUTこの記事をかいた人

よざっち

神奈川生まれ、沖縄育ちの30歳。 中学・高校時代は卓球部で汗を流し、大学時代はサークルでミュージカルに熱中していました。 今はイベントスタッフと書店員の仕事で生計を立てるフリーター。 トラベラーズノートやほぼ日手帳などの手帳も大好きです。   >>詳しいプロフィール >>よざっちの欲しいものリスト