js zur Implementierung der Kollisionserkennung

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Kollisionserkennung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
</Kopf>
<Stil>
  div {
    Position: absolut;
    oben: 0px;
    rechts: 0px;
    unten: 0px;
    links: 0px;
    Rand: automatisch;
    Breite: 300px;
    Höhe: 300px;
    Hintergrundfarbe: grün;
  }
  
  Spanne {
    Position: absolut;
    oben: 0px;
    links: 0px;
    Anzeige: Block;
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: RGB (10, 151, 233);
  }
</Stil>
 
<Text>
  <div></div>
  <span></span>
  <Skript>
    var div = document.getElementsByTagName('div')[0];
    var span = document.getElementsByTagName('span')[0];
    span.onmousedown = Funktion(e) {
      // Mit Ereignisobjekt kompatibel e = window.event || e;
      // Globale Erfassung hinzufügen, wenn (span.setCapture) {
        span.setCapture();
      }
      // Drücken Sie die Maus, um den Abstand zwischen der Maus und dem linken und oberen Rand der Seite zu ermitteln. var x = e.clientX;
      var y = e.clientY;
      // Der Abstand zwischen dem Element und der linken und oberen Seite der Seite var elex = span.offsetLeft;
      var eley = span.offsetTop;
      // Abstand zwischen Maus und Element = Abstand zwischen Maus und Seite - Abstand zwischen Element und Seite var X = x - elex;
      var Y = y - eley;
      Dokument.onmousemove = Funktion(e) {
        //Mausbewegung ermittelt den Abstand zwischen der Maus und der Seite //Ereignisobjekt kompatibel e = window.event || e;
        var movex = e.clientX;
        var movey = e.clientY;
        // Die linken und oberen Werte des Elements = der Abstand zwischen der Maus und der Seite – der Abstand zwischen der Maus und dem Element var leftx = movex – X;
        var lefty = movey - Y;
        /*-----------------------------------------------------------*/
        // Kollisionserkennung // 1. Linker Sicherheitsabstand = Abstand zwischen großem Feld und linker Seite der Seite - Breite des kleinen Felds var safeleft = div.offsetLeft - span.offsetWidth;
        // 2. Der rechte Sicherheitsabstand ist der Abstand zwischen der großen Box und der linken Seite der Seite + die Breite der großen Box var saferight = div.offsetLeft + div.offsetWidth;
        // 3. Oberer Sicherheitsabstand = Abstand zwischen großem Feld und oberem Seitenrand – Höhe des kleinen Felds var safetop = div.offsetTop – span.offsetHeight;
        // 4. Unterer Sicherheitsabstand = Abstand zwischen großem Feld und oberem Seitenrand + Höhe des großen Felds var safebottom = div.offsetTop + div.offsetHeight;
 
        wenn (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
          div.style.background = "grün";
        } anders {
          div.style.background = "rot";
        }
 
        /*-----------------------------------------------------------*/
 
        // Grenzwert // Leftif (leftx <= 0) {
          linksx = 0;
        }
        // wenn (lefty <= 0) {
          Linkshänder = 0;
        }
        //Rechts var rightx = document.documentElement.clientWidth - span.offsetWidth;
        wenn (linksx >= rechtsx)
          linksx = rechtsx;
        // Nächste Variable righty = document.documentElement.clientHeight - span.offsetHeight;
        wenn (links >= rechts) {
          Linkshänder = Rechtshänder;
        }
 
 
        span.style.left = leftx + "px";
        span.style.top = lefty + "px";
      }
      Dokument.onmouseup = Funktion() {
 
          Dokument.onmousemove = null;
          wenn (span.releaseCapture) {
            span.releaseCapture();
          }
 
 
        }
        // Standardereignis verhindern return false;
    }
  </Skript>
</body>
 
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Analyse von JS-Kollisionserkennungsmethoden
JavaScript ermöglicht die Kapselung von Code zur Kollisionserkennung bei der Spieleentwicklung
js, um die Kollisionserkennung und die gemeinsame Nutzung von Spezialeffektcodes zu erreichen
Beispiel einer Kollisionserkennungsfunktion, die durch natives JS implementiert wurde
Natives JS zur Implementierung der Kollisionserkennung
JavaScript zum Implementieren der Polygonkollisionserkennung
Implementierung einer Kollisionserkennung basierend auf Javascript
js zur Realisierung der Drag- und Kollisionserkennung
Natives JS zur Realisierung eines bewegten Balls (Kollisionserkennung)
Beispiel für die Implementierung der Kollisionserkennung mit js
three.js verwendet Raycaster zur Kollisionserkennung

<<: So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben

>>: Formatieren der Linux-Systemfestplatte und manuelles Hinzufügen einer Swap-Partition