10.画面移動のバグ修正

 進捗状況

 前回の画面移動バグの修正について指摘した人に 改善したところを見せたところ、移動が不自然だといわれてしまいました。確かに、移動先を1マス内側に調整するのはマップとして使える範囲が制限されてしまう。また、見た目を考えても画面端にいたほうが好ましいと思ったため改良したいと思います。

プログラムのコードを解説し、画面移動の仕組みについて教え、改良方法について一緒に考えてもらいました。そこで、画面を大きくして黒い移動マスを作るという方法ならしたいことが実現できるということを提案してもらいました。

まず、移動先を1マス内側に調整すると画面端に移動したように見えるようにまずマップの広さを縦20マスから22へ、横14マスから16マスへ増やして移動マスのエリアを作りました。

そのあと一つ内側に移動先をずらしことで自然な表示とバグの修正を両立させました。

黒い場所に居続けることは不可能です。


参考文献

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

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

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