衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
</head>
<スタイル>
  div {
    位置: 絶対;
    上: 0px;
    右: 0px;
    下: 0px;
    左: 0px;
    マージン: 自動;
    幅: 300ピクセル;
    高さ: 300px;
    背景色: 緑;
  }
  
  スパン {
    位置: 絶対;
    上: 0px;
    左: 0px;
    表示: ブロック;
    幅: 100ピクセル;
    高さ: 100px;
    背景色: rgb(10, 151, 233);
  }
</スタイル>
 
<本文>
  <div></div>
  <span></span>
  <スクリプト>
    タグ名で要素を取得する
    タグ名に要素を追加する
    span.onmousedown = 関数(e) {
      // イベント オブジェクトと互換性があります e = window.event || e;
      // グローバルキャプチャを追加 if (span.setCapture) {
        span.setCapture();
      }
      // マウスを押すと、マウスとページの左上との距離が取得されます。var x = e.clientX;
      var y = e.clientY;
      // 要素とページの左上と左上の間の距離 var elex = span.offsetLeft;
      var eley = span.offsetTop;
      // マウスと要素間の距離 = マウスとページ間の距離 - 要素とページ間の距離 var X = x - elex;
      変数 Y = y - エレ;
      document.onmousemove = 関数(e) {
        //マウスの動きにより、マウスとページ間の距離が取得されます //イベント オブジェクトと互換性があります e = window.event || e;
        var movex = e.clientX;
        var movey = e.clientY;
        // 要素の左と上の値 = マウスとページ間の距離 - マウスと要素間の距離 var leftx = movex - X;
        var lefty = movey - Y;
        /*--------------------------------------------------------*/
        // 衝突検出 // 1. 左の安全距離 = 大きなボックスとページの左側の間の距離 - 小さなボックスの幅 var safeleft = div.offsetLeft - span.offsetWidth;
        // 2. 右の安全距離は、大きなボックスとページの左側の間の距離 + 大きなボックスの幅です。var saferight = div.offsetLeft + div.offsetWidth;
        // 3. 上部の安全距離 = 大きなボックスとページの上部の間の距離 - 小さなボックスの高さ var safetop = div.offsetTop - span.offsetHeight;
        // 4. 下部の安全距離 = 大きなボックスとページの上部の間の距離 + 大きなボックスの高さ var safebottom = div.offsetTop + div.offsetHeight;
 
        （leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom）の場合 {
          div.style.background = '緑';
        } それ以外 {
          div.style.background = '赤';
        }
 
        /*--------------------------------------------------------*/
 
        // 境界値 // Leftif (leftx <= 0) {
          左x = 0;
        }
        // 左利き <= 0 の場合 {
          左利き = 0;
        }
        //右 var rightx = document.documentElement.clientWidth - span.offsetWidth;
        （左x >= 右x）の場合
          左x = 右x;
        // 次へ var righty = document.documentElement.clientHeight - span.offsetHeight;
        （左利き >= 右利き）の場合 {
          左利き = 右利き;
        }
 
 
        span.style.left = leftx + 'px';
        span.style.top = lefty + 'px';
      }
      document.onmouseup = 関数() {
 
          ドキュメント.onmousemove = null;
          （span.releaseCapture）の場合{
            span.releaseCapture();
          }
 
 
        }
        // デフォルトイベントを防止します。false を返します。
    }
  </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: