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:
|
<<: 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
Artikel empfehlen
Der Unterschied zwischen HTML Empty Link href="#" und href="javascript:void(0)"
# enthält eine Standortinformation. Der Standardan...
So konfigurieren Sie die maximale Anzahl von Dateien, die von jedem Nginx-Prozess geöffnet werden können
1. Überprüfen Sie die maximale Anzahl geöffneter ...
XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung
<br />Das sinnvolle Hinzufügen von Bildern k...
JS Leicht verständliche Funktion und Konstruktor
Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...
MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)
Da ich Sicherheitsprodukte testen musste, wollte ...
js implementiert den Algorithmus zur Angabe der Reihenfolge und Menge der roten Umschläge
In diesem Artikel wird der spezifische JS-Code zu...
Schritte zum Anpassen der Knoteninstallation, um den Standardinstallationspfad globaler NPM-Module zu ändern
Ich habe Node auf dem Laufwerk D installiert und ...
Ubuntu-Grundlagen-Tutorial: apt-get-Befehl
Vorwort Der Befehl apt-get ist ein Paketverwaltun...
JavaScript realisiert den Warteschlangenstrukturprozess
Inhaltsverzeichnis 1. Warteschlangen verstehen 2....
Vue3 (III) Website Homepage Layout Entwicklung
Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...
jQuery realisiert den Shuttle-Box-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung
Fehler: Connection to blog0@localhost failed. [08...
Auszeichnungssprachen – Nochmal auflisten
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker
Docker: Zookeeper schnell installieren Ich habe Z...
Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)
Heute möchte ein Kunde eine Anzeige schalten und d...