任意の形の領域内でオブジェクトが跳ね返る動作の実現方法

Question

実現したいこと

html, css, jsで作成されたウェブサイトでの実装です
クオータービューの背景絵があり
その中に柵で囲われたひし形に近い庭のエリアがあります
その庭内のみで複数のオブジェクト（人や生き物）が動き回り、端まで来たらランダムな角度に跳ね返らせたいです
ルートは直線的で良く、端まで来たら向きを変えて動く形です

発生している問題・分からないこと

主に考え方についてアドバイスをいただきたいです

クオータービューでの7 * 6マスの長方形（実際の見た目は左右非対称のひし形に近い）内で跳ね返り判定を行う場合、
どのように判定するのがいいでしょうか

いくつかサンプルコードを検索し候補を見つけました
これらのような方法で判定するのがよいでしょうか
さらに簡易に判別する方法があればご教示お願い致します。

• 跳ね返り判定用のラインを引いてそれと計算して判定する
• リストこちらのアルゴリズムのように内外判定を行い外判定が出たら跳ね返りを行う

https://www.sojudo.net/programming/gamealgorithm/anglebounce
https://tori29.jp/blog/export_9
https://qiita.com/ykob/items/6118b8e2e7ddcd8b6355

該当のソースコード

こちらの参考サイトをもとに自分なりにコードに落とし込めるか試してみました
試しにコード化してみた自作のデモ

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

いくつかサンプルコードを検索し候補を見つけました
これらのような方法で判定するのがよいでしょうか
さらに簡易に判別する方法があればご教示お願い致します。

• 跳ね返り判定用のラインを引いてそれと計算して判定する
• リストこちらのアルゴリズムのように内外判定を行い外判定が出たら跳ね返りを行う

https://tori29.jp/blog/export_9
https://qiita.com/ykob/items/6118b8e2e7ddcd8b6355

補足

座標変換の方法がいまいち分からなかったのでこちらの参考サイトをもとに自分なりにコードに落とし込めるか試してみました
試しにコード化してみた自作のデモ

しかし、マップチップ座標などの概念がいまいち理解できておらず下記のメソッドでのアイソメ座標とマップ座標（上面図？）の相互の変換が出来ませんでした。
mapToIso、isoToMapの2つのメソッド内で参照するオフセットや幅のデータが間違っていそうです。
これら相互の変換をできるようにし、対象がエリア外に出たらランダムな角度で直線状に跳ね返ってエリア内を動き回る挙動を作成したいです。
また、この変換処理を利用して画面に対して右方向（上面図においては斜め方向）に動いているときは対象の向きを変えたい（左右どちらかの２パターン）です。

Comments

[TakaiY]

「検索し候補を見つけました」とありますが、見つけた方法に問題があるということだと思いますが、どのような問題があるのでしょうか。

[merry]

コメントありがとうございます。座標変換処理を試しましたがまだ解決できていません。
試した結果とでもコードを質問に追記しました。

[TakaiY]

やはり、質問の内容が具体的ではありません。 「これらのような方法で判定するのがよいでしょうか」とか「さらに簡易に判別」などと聞かれても答えられる人は少ないでしょう。

すでに実装しているようですから、困っていることやわからないことを「具体的」に、ピンポイントでコードを示したほうがいいでしょう。あれこれコードを並べられても、全て読む気にはなりません。

Answer 1

雑ですがSVGでサンプル作ってみました

<style>
svg{background-Color:lightgray;}
</style>
<script>

window.addEventListener('DOMContentLoaded', ()=>{
  const svgNS = svg.namespaceURI;
  const points=[[100,100],[500,100],[400,300],[0,300]];
  const createContainer=(points=[],fill=null)=>{
    const container=document.createElementNS(svgNS,"polygon");
    container.setAttributeNS(null,'fill',fill);
    const pointsStr=points.map(x=>x.join(",")).join(" ");
    container.setAttributeNS(null,"points",pointsStr);
    return container;
  }
  const container=createContainer(points,"yellow");
  svg.appendChild(container);
  const lines=points.reduce((x,y,z,w)=>(x.push([y,w[z==w.length-1?0:z+1]]),x),[]);
  const createMember=(options)=>{
    const position=[options.x,options.y,null]
    const member=document.createElementNS(svgNS,'rect');
    member.setAttribute('x',options.x);
    member.setAttribute('y',options.y);
    member.setAttribute('width',options.width);
    member.setAttribute('height',options.height);
    member.setAttribute('fill',options.fill);
    const path=document.createElementNS(svgNS,'path');
    path.setAttributeNS(null,'id',options.id);
    const motion=document.createElementNS(svgNS,'animateMotion');
    motion.setAttributeNS(null,'fill','freeze');
    const mpath=document.createElementNS(svgNS,'mpath');
    mpath.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href',`#${options.id}`);
    svg.appendChild(member);
    member.appendChild(path);
    member.appendChild(motion);
    motion.appendChild(mpath);
    let timerId;
    let timer;
    let delay;
    const callback=()=>{
      timer=new Date().getTime();
      motion.endElement();
      let rnd=parseInt(Math.random()*lines.length);
      while(rnd==position[2]){
        rnd=parseInt(Math.random()*lines.length);//再抽選
      }
      position[2]=rnd;
      let ratio=Math.random();
      let x=parseInt((lines[rnd][1][0]-lines[rnd][0][0])*ratio+lines[rnd][0][0]);
      let y=parseInt((lines[rnd][1][1]-lines[rnd][0][1])*ratio+lines[rnd][0][1]);
      let w=options.width;
      let h=options.height;
      path.setAttributeNS(null,"d",`M${position[0]},${position[1]} L${x-w/2},${y-h}`);
      //path.setAttributeNS(null,"stroke","black");
      const distance=((position[0]-x)**2+(position[1]-y)**2)**.5;
      position[0]=x;
      position[1]=y;
      motion.setAttributeNS(null,"dur",parseInt(options.speed*distance/10)/100);
      motion.beginElement();
      delay=options.speed*distance;
      timerId=setTimeout(()=>callback(),delay);
    }
    btn_start.addEventListener('click',()=>{
      member.removeAttributeNS(null,'x');
      member.removeAttributeNS(null,'y');
      callback();
      btn_stop.disabled=false;
      btn_start.disabled=true;
    });
    btn_stop.addEventListener('click',()=>{
      clearTimeout(timerId);
      const past=new Date().getTime()-timer;
      const d=path.getAttributeNS(null,'d');
      const reg=/^M(\d+),(\d+) +L(\d+),(\d+)/;
      if(reg.test(d)){
        const matches=d.match(reg);
        const x=parseInt((Number(matches[1])+(matches[3]-matches[1])*past/delay)*100)/100;
        const y=parseInt((Number(matches[2])+(matches[4]-matches[2])*past/delay)*100)/100;
        position[0]=x;
        position[1]=y;
      }
      motion.endElement();
      btn_start.disabled=false;
      btn_stop.disabled=true;
    });
    motion.beginElement();
    return member;
  }
  const m=createMember({x:150,y:200,width:10,height:10,fill:'red',id:'path1',speed:3});
  createMember({x:250,y:200,width:20,height:20,fill:'blue',id:'path2',speed:2});
  createMember({x:350,y:200,width:10,height:15,fill:'green',id:'path4',speed:1});
  console.log(m);
});
</script>
<svg width=500 height=400 id="svg">
</svg>
<input type="button" value="start" id="btn_start">
<input type="button" value="stop" id="btn_stop" disabled>

Comments

[merry]

回答ありがとうございます。SVGという方法もあるのですね。
座標変換処理で進めることにしましたが試作のコードでうまく落とし込めませんでした

Answer 2

クオータービューでの長方形

であれば、長方形のままで座標と速度ベクトルを管理して、表示するときだけ座標を菱形にマップすれば簡単そうです。

Comments

[merry]

回答ありがとうございます。
おっしゃる通り座標変換処理で進めるのがよさそうなので試作でデモを作成してみました。
1マス、幅40高さ20のひし型でグリッドを作成してみましたがこれの上面図での幅がどうなるのか理解できておらず座標変換メソッドにうまく落とし込めませんでした。
参考にしたサイト（https://2dgames.jp/how-to-make-isometric-view/）だとトップビューのタイル画像が正方形ですが描画用の情報はひし形のサイズしかないので混乱してしまいました。