やっぱりJavaScript! - ゲームを作る - 2

ゲームの画面と表示する自機(かぼちゃ)を表示させることができたので、次に動かせるようにします。マウスまたはタッチで絵文字の"かぼちゃ"を動かします。

const init = () => {}

の中に以下を追加します。

    {
                let originalX = -1;
                let originalY = -1;
                let originalHeroX = -1;
                let originalHeroY = -1;

                document.onpointerdown = (e) => {
                    e.preventDefault();
                    originalX = e.pageX;
                    originalY = e.pageY;
                    originalHeroX = heroX;
                    originalHeroY = heroY;
                };
                document.onpointermove = (e) => {
                    e.preventDefault();
                    if (originalX !== -1) {
                        const dx = e.pageX - originalX;
                        const dy = e.pageY - originalY;
                        heroX = originalHeroX + dx;
                        heroY = originalHeroY + dy;
                        update();
                    };

                };
                document.onpointerup = (e) => {
                    e.preventDefault();
                    originalX = -1;

                };

     }

Event.preventDefault() - Web API | MDN

  e.preventDefault();

これでマウスイベントの動作をまずキャンセルします。そのあと順次、次の命令を実行していきます。

MouseEvent.pageX - Web API | MDN

 e.pageX 

マウスがクリックされた位置の X（水平）座標を、文書全体の左端からの相対座標で返します。

マウスがクリックされた時点と、

    document.onpointerdown = (e) => {
                    e.preventDefault();
                    originalX = e.pageX;
                    originalY = e.pageY;
                    originalHeroX = heroX;
                    originalHeroY = heroY;
                };

動かした座標

      document.onpointermove = (e) => {
                    e.preventDefault();
                    if (originalX !== -1) {
                        const dx = e.pageX - originalX;
                        const dy = e.pageY - originalY;
                        heroX = originalHeroX + dx;
                        heroY = originalHeroY + dy;
                        update();
                    };
                };

を検知して、動いた距離分

const dx = e.pageX - originalX;
const dy = e.pageY - originalY;

現在の座標に足し込んで、座標を"update();"。動かします。

originalX !== -1

であればマウスは押されていない。違う数字が入ればマウスが押されているということで動かすことができるようになります。

ゲームの表示部分からはみ出さないようにします。CSSではみ出した部分を隠してしますには、

container.style.overflow = "hidden";

とすればはみ出した部分は消えます。

実際に動かしていくときにはみ出ないようにするコードをMathを使って最大値、最小値を取れるようにしてはみ出さないようにします。

   heroX = Math.min(width - heroSize / 2 ,Math.max(heroSize / 2 ,heroX));
   heroY = Math.min(height - heroSize / 2 ,Math.max(heroSize / 2 ,heroY));

Math.min(a,b, …)　複数の値a,b,…のうち一番小さなものを返す。

Math.max(a,b, …)　複数の値a,b,…のうち一番大きなものを返す。