JS implementiert eine Methode, um die Kollision zu beurteilen

Autor：Eve Cole Aktualisierungszeit：2025-05-08 10:16:01

Dieser Artikel beschreibt die Methode von JS, um Kollisionen zu bestimmen. Teilen Sie es für Ihre Referenz. Die Details sind wie folgt:

JS Beurteilung der Kollisionsmethode:

Kopieren Sie den Code wie folgt:/**, um festzustellen, ob er kollidiert

* @param obj Originalobjekt

* @param dobj Zielobjekt

Funktionswirkung (OBJ, Dobj) {

var o = {

X: GetDefaultStyle (obj, 'links'),

Y: getDefaultStyle (obj, 'top'),

W: GetDefaultStyle (obj, 'Breite'),

H: GetDefaultStyle (OBJ, 'Höhe')

}

var d = {

X: GetDefaultStyle (Dobj, 'links'),

Y: GetDefaultStyle (Dobj, 'Top'),

W: GetDefaultStyle (Dobj, 'Breite'),

H: GetDefaultStyle (Dobj, 'Höhe')

}

var px, py;

px = ox <= dx? DX: OX;

py = oy <= dy? Dy: Oy;

// Bestimmen Sie, ob sich die Punkte in beiden Objekten befinden

if (px> = ox && px <= ox + ow && py> = oy && py <= oy + oh && px> = dx && px <= dx + dw && py> = dy && py <= dy + dh) {

zurückkehren;

} anders {

false zurückgeben;

}

/** Objekteigenschaften abrufen

* @Param OBJ -Objekt

* @param Attributattribut

Funktion getDefaultStyle (OBJ, Attribut) {

return parseInt (obj.currentStyle? obj.currentStyle [Attribut]: document.defaultView.getComputedstyle (obj, false) [Attribut]);

}

Beispiele sind wie folgt:

Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">

<html>

<kopf>

Körper {Margin: 0px;}

.Main {Position: relativ;}

#F1 {Position: absolut; Hintergrund:#ff0000; Oben: 100px; Links: 100px; Breite: 200px; Höhe: 200px; Z-Index: 999}

#f2 {Position: absolut; Hintergrund:#ffff00; Oben: 0px; links: 0px; Breite: 600px; Höhe: 150px;}

</style>

</head>

<body>

<div>

</div>

var o = document.getElementById ("f1");

var d = document.getElementById ("f2");

Alarm (Auswirkungen (O, D));