難航したコード作成などの話(画像なし、文章のみ)
東京経済大学のおみぬーです。
今回はタイトル画面の追加と、エンディング後にタイトル画面に戻ることができるコードが完成したので、詳細を綴りたいと思います。
今回はタイトル画面の追加と、エンディング後にタイトル画面に戻ることができるコードが完成したので、詳細を綴りたいと思います。
今回はゲーム画面、コード詳細の前に完成までの経緯を語らせていただきます。また良い機会なので、私が今回のゲーム作成で意識していることも話させてもらいます。
初期の段階でタイトル画面の作成は決めていました。タイトル画面の作成を真っ先に行わなかった理由は、シナリオ作成に行き詰ったときの気分転換としてとっておきたかったということ、どのようなコードを使えばよいかまだ見当がついていなかったという2点です。
イベントをいくつか追加、改造していき、シナリオが浮かばなくなってきたタイミングでタイトル画面の作成を開始しようと考えました。またその際に、エンディング後サイトの更新をしなくてはゲームの再スタートができないことに不便さと違和感を覚えたため、タイトル画面に戻るコードの作成も決めました。その時はここまで難航するとは思っていませんでした。
コード作成に難航した理由ですが、ここで今回のゲーム作成で意識していることが関わってきます。今回私は自分の持っている知識のみ(友人との相談やアドバイスはありますが、、、)でゲームを完成させることを目標としています。そのためできる限りゼミで学んだ知識のみを利用してコードを作成していくことにしました。プログラミングをするうえで、様々なことを自ら学ぶ姿勢が大切だということは重々承知していますが、人生で初めてのプログラミングということもあり、難しいことを取り入れるよりも学んだことをしっかりと使えるかを試したいと考え、自分の持っている知識のみでゲームの完成を目指すことにしました。調べてしまえばすぐに答えは見つかると思いますが、それでは知識が身についているかの確認も、正しく利用できているかの確認もできません。そして何より自分の力で作ったという喜び、達成感を味わいたいという気持ちが強くありました。実際今回のコードを自分の力で完成できた時の喜びは半端なものではありませんでした。
長くなってしまいましたが、以上が今回のゲーム作成で意識していることです。
タイトル画面とタイトル画面に戻るコードの作成過程に話を戻します。タイトル画面自体は簡単に作成できました。fieldpaint関数よりも前にタイトル画面が表示され、かつボタンをクリックすることで初期リスポーン画面が表示されるようにコード(詳細は後ほど記載します)を組みました。そこまでは問題なかったのですが、タイトル画面に戻るコードの作成が大きな壁となりました。エンディング後にタイトル画面を呼び出すコードを組もうと、何度も試行錯誤しました。しかしどれもうまくいきませんでした。そこで、location.hrefを使うことにしました。このコードは講義内では(おそらく)触れてはいませんが、配布資料で見たのを思い出しこれを利用しようと考えました。location.hrefは="HTMLファイル名"で指定したファイルに切り替えることができるというものです。つまり今回はタイトル画面用のHTMLファイルとマップ用のHTMLファイルを作成し、それらを切り替えればよいと考えました。そこで「kenkyunotetitle」というHTMLファイルを新たに作成、既存のHTMLファイルを「kenkyunotemap」と名称を変更し、複数のHTMLファイルを用意しました。今回のブログではコードの詳細と画面は省かせていただきますが(次回ブログで記載するため)、location.hrefを使うことでタイトル画面とマップ画面の遷移が可能になりました。
以上がこの1~2週間で試行錯誤した内容になります。思っていた以上の分量になってしまったので、コードの詳細と画面は次回改めて紹介します。この長々とした分かりづらい文章を最後まで読んでくださりありがとうございます。コード作成もそろそろ佳境になると思いますので、最後までよろしくお願いいたします。
参考文献
田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス,2015年
田中賢一郎『ゲームで作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス,2017年
田中賢一郎『ゲームで学ぶJavaScript 入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!』インプレス,2022年