jsはドラッグと衝突検出を実現する。


本論文の例では、jsが引張と衝突検出を実現する具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。

ドラッグします
原理分析
divの箱をドラッグするには、まずマウスを箱の上に移動し、マウスの左ボタンを押して目標の位置に移動し、マウスを放します。この過程の分析に対して、
3つのマウスイベントが必要です。
  • マウスを押しながら:onmousedown
  • 移動マウス:onmousemove
  • マウスを離す:onmouseup
  • ステップを実行
    1、マウスを押した時:**マウスの現在位置の位置距離ページの左境界と上境界の距離を取って、それぞれ箱の距離ページの左境界と上境界の値を減らします。
    マウスの距離の箱の左と上の境界の値を得ました。
    2、**マウスが移動する時:**この時、マウス距離ページの左境界と上境界の値を再び取得し、更にそれらからステップ1で得られたマウス距離箱の左境界と上境界の値を減算します。
    得られた値を再び箱に割り当てます。このように箱はマウスと静止して、ページの上で移動できます。
    3、**がマウスを離すと、**がマウス移動イベントをクリアします。
    コードを実現
    
    var oDiv = document.getElementById('box2');
      oDiv.onmousedown = function(ev){
       var e = ev||window.event;
       var offsetX = e.clientX - oDiv.offsetLeft;
       var offsetY = e.clientY - oDiv.offsetTop;
       document.onmousemove = function(ev){
        var e = ev||window.event;
        var l =e.clientX-offsetX;
        var t = e.clientY- offsetY;
        
        if(l<=0){
         l=0;
        }
        if(t<=0){
         t=0;
        }
        var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
        if(l>=windowWidth-oDiv.offsetWidth){
         l=windowWidth-oDiv.offsetWidth;
        }
        var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
        if(t>=windowHeight-oDiv.offsetHeight){
         t=windowHeight-oDiv.offsetHeight;
        }
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
       }
      }
      document.onmouseup = function(){
       document.onmousemove = null;
      }
    衝突検出
    原理分析
    jsの中で衝突して検査していくつかの小さいゲームを作ることに応用して、例えば飛行機の大戦、れんがを打って、蛇などを食いしん坊して、それではどのように衝突の検査を実現しますか?
    二つの長方形のブロックの間の衝突について、コードを直接に書く方法を考えたら、それらの間に接触があるかどうかを検査します。これは比較的難しいことです。考え方を変えてもいいです。
    それらが衝突していない状況を探し出して、これらの情況を排除して、残りの情況は必然的に衝突が発生したのです。
    以下の図のように、ブロックaとbの間に衝突が発生したかどうかを検出し、aとbの上、下のtop値、左右のleft値をそれぞれ取得することができます。以下の4つの場合は衝突が発生していません。

    衝突しない4つの場合:
    1、a左>b右
    2、a上>b下
    3、a右
    4、a下a左:a.offset Left
    a右:a.offset Left+a.offset Width;
    a上:a.offset Top
    a下:a.offset Top+a.offset Height;
    b左:b.offset Left
    b右:b.offset Left+b.offset Width;
    b上:b.offset Top
    b下:b.offset Top+b.offset Height;
    上の四つの状況のいずれかが発生したら、衝突しません。
    コードを実現
    
    function knock(node1,node2){
       var l1 = node1.offsetLeft;
       var r1 = node1.offsetLeft + node1.offsetWidth;
       var t1 = node1.offsetTop;
       var b1 = node1.offsetTop+node1.offsetHeight;
       var l2 = node2.offsetLeft;
       var r2 = node2.offsetLeft + node2.offsetWidth;
       var t2 = node2.offsetTop;
       var b2 = node2.offsetTop+node2.offsetHeight;
       if(l2>r1||r2<l1||t2>b1||b2<t1){
        return false;
       }else{
        return true;
       }
      }
    ドラッグと衝突の完全なコード
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #box1{
          width: 100px;height: 100px;position: absolute;
          top: 200px;left: 250px;background-color: blueviolet;
        }
        #box2{
          width: 100px;height: 100px;position: absolute;
          top: 400px;left: 550px;background-color: salmon;
        }
      </style>
    </head>
    <body>
      <div id="box1"></div>
      <div id="box2"></div>
      <script>
        var box11 = document.getElementById("box1")
        var box21 = document.getElementById("box2")
        
        if(knock(box21,box11)){
          box1.style.backgroundColor="blue";
        }else{
          box1.style.backgroundColor="grey";
        }
        
        function knock(node1,node2){
          var l1 = node1.offsetLeft;
          var r1 = node1.offsetLeft + node1.offsetWidth;
          var t1 = node1.offsetTop;
          var b1 = node1.offsetTop+node1.offsetHeight;
          var l2 = node2.offsetLeft;
          var r2 = node2.offsetLeft + node2.offsetWidth;
          var t2 = node2.offsetTop;
          var b2 = node2.offsetTop+node2.offsetHeight;
          if(l2>r1||r2<l1||t2>b1||b2<t1){
            return false;
          }else{
            return true;
          }
        }
        var oDiv = document.getElementById('box2');
        oDiv.onmousedown = function(ev){
          var e = ev||window.event;
          var offsetX = e.clientX - oDiv.offsetLeft;
          var offsetY = e.clientY - oDiv.offsetTop;
          document.onmousemove = function(ev){
            var e = ev||window.event;
            var l =e.clientX-offsetX;
            var t = e.clientY- offsetY;
            if(knock(box21,box11)){
              box1.style.backgroundColor="blue";
            }else{
              box1.style.backgroundColor="grey";
            }
            if(l<=0){
              l=0;
            }
            if(t<=0){
              t=0;
            }
            var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;
            if(l>=windowWidth-oDiv.offsetWidth){
              l=windowWidth-oDiv.offsetWidth;
            }
            var windowHeight = document.documentElement.clientHeight||document.body.clientHeight
            if(t>=windowHeight-oDiv.offsetHeight){
              t=windowHeight-oDiv.offsetHeight;
            }
            oDiv.style.left = l + "px";
            oDiv.style.top = t + "px";
          }
        }
        document.onmouseup = function(){
          document.onmousemove = null;
        }
      </script>
    </body>
    </html>
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。