どうも、よざっちです。
タイトルの通り、今回簡単な謎解きページを作ってみました。
制作時間はだいたい、
- デザイン・レイアウト 2時間
- 画像制作・編集 2時間
- 謎制作 1時間
- コーディング 20時間
くらいでしょうか。死ぬほど時間がかかってしまいました(笑)
JavaScriptの復習のために作ってみたんですが、見事に色々と忘れていましたね。
やっぱり、毎日ちょっとずつでもいいからコードを書かないといけない。
だけど、自分が欲しい情報の調べ方さえしっかりと身に着けていれば何とかなる！
今回改めて実感しました。
作っているうちに色々思い出してきたし、これからも色々と作ってみようと思います。
備忘録として今回Webページを作るにあたって、参考にした記事をまとめてみました。
ゲームのネタバレになるので気になる方はゲームをクリア後に見てみてください！
使ったもの
- 無料の画像素材
- Adobe Illustrator（画像が編集できるソフトであればOK）
- Visual Studio Code（コードを書くため）
- GitHub（ページを表示するため）
作るために参考にした記事一覧
ドラクエ風のタイトル画像をつくる
別になくてもいいですが、あった方が雰囲気出るので作ったドラクエ風のロゴ。
この記事と違ってillustratorだけで作りましたが、意外と雰囲気でたのでよかったです。
トップページを開いたときに画面全体がフェードする
Now Loadingみたいな画面が欲しくて作りました。
画面全体がふわぁーっとフェードするだけでサイトの雰囲気が変わりますよね。
テキストボックスの枠線を消す
これも必ずしも必要ではないけど、世界観を出したくてやってみました。
テキストボックスにも背景を指定できるので、石板っぽく。
ボタンをクリックするとイベント開始
今回多用したクリックイベント。
特に入力した答えの正誤判定の部分でかなりお世話になりました。
これだけでかなりできることの幅が広がるからいいよね。
JavaScriptのカウントボタン：押した数をカウントする
今回のキモでもあるカウントボタン。
「ある条件を満たすと次が…」みたいな感じで、とても役に立ちました。
JavaScriptでページ遷移
直リンクではなく、JavaScriptによって発動するページ遷移。
これ自体は別に難しくないのですが、相対パスにちょっと手間取りました。
最初コードを書いているJavaScriptのファイルを起点にパスを書いていたのですが、実際はhtmlからだったよう。
相対パスって大変。
Twitterのシェアリンクをつくる
これはおまけというか、せっかくならシェアボタンをつけて感想を聞いてみたかったのでつけてみました。
よくあるシェアボタンも自分で作ってみるとなると、色々なものが作用しているんだと勉強になりました。
2年後にまた謎解きをつくってみました。
この謎解きを作ってから、ちょうど2年後。
WEB制作会社での経験を生かして、再度謎解きサイト作りにチャレンジしてみました！
この2年間でどれだけ成長したかみてくれい！
