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

6236 ワード

本論文の例では、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>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

javascriptはレンガゲームをすることを実現します。（完全なソースを添付します。）

鴻蒙システムにおけるJS開発の枠組み