2.ブログの補足とマップ番号の変更

日付:

 10/20の最初の投稿で足りなかった説明をしようと思ったので投稿します。

今後の方針

　週一回のペースを目標に更新をしたいと考えています。タイトルに番号をつけることで最初の投稿から何週間経ってるか分かりやすくなります。また、自分のモチベーションアップにも繋がると考えました。今回は第2週という意味です。


進捗紹介

・前回の課題

　前回、教材のプログラムの木がキャンバスの緑に書いてあるという点について分からなかったが、今回判明しました。fieldpaint()関数でフィールドを描画していたが、そこにある配列の値によって使う画像を変えています。そしてこれらにはif文で条件分岐がされていおり、草原は09、木は08の値として設定しているため両者は共存ができません。それに対して、黒いプレイアブルキャラクターの描画するコードはif文の外に記述していました。そのため草原が書かれた上から描画されているという関係になっていました。そのため、木の描画するコードの前に草原のコードを置いたことで草原の上に木が上書きしてある状況を作り出すことに成功しました。

・フィールドの値の役割変更

　このフィールドは縦に11、横に20の配列で構成されています。キャラクターが移動不可能な障害物が00~08、キャラクターが通行可能な草原が09、マップ遷移が10番台としています。しかし、これでは開発においてわかりにくいと感じたので変更しました。通行可能なマスを0～19、障害物を20～39、マップ遷移を40番台としました。その時、草原や木は現在600マス近くあり、とてもマスが多いため「09を01に、08を21に変更しろ」とChatGPTに指示しました。

メモ　
01　草
21　木
22　崖
23　水
40,41,42,43,44　画面遷移
画面遷移は1の位をmap番号とすることを忘れずに


今まで気づかなかったが、VSコードにはいまどこの関数を編集しているかが分かりやすくなる機能があることに気が付いた。


改良予定

・キャラクターの移動の挙動について
・イベントの追加

参考文献

田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス,2015年

田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス,2017年

田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス,2022年