Cet article décrit la méthode de JS pour déterminer les collisions. Partagez-le pour votre référence. Les détails sont les suivants:
JS Judging Collision Méthode:
Copiez le code comme suit: / ** pour déterminer s'il est en collision
* @param obj objet original
* @param dobj objet cible
* /
Impact de la fonction (obj, dobj) {
var o = {
X: GetDefaultStyle (obj, «gauche»),
Y: GetDefaultStyle (obj, «top»),
W: getDefaultStyle (obj, «largeur»),
H: GetDefaultStyle (obj, «hauteur»)
}
var d = {
X: GetDefaultStyle (Dobj, «gauche»),
Y: GetDefaultStyle (Dobj, «Top»),
W: getDefaultStyle (dobj, «largeur»),
H: GetDefaultStyle (dobj, «hauteur»)
}
var px, py;
px = ox <= dx? dx: bœuf;
py = oy <= dy? dy: oy;
// déterminer si les points sont dans les deux objets
if (px> = ox && px <= ox + ow && py> = oy && py <= oy + oh && px> = dx && px <= dx + dw && py> = dy && py <= dy + dh) {
Retour Vrai;
} autre {
retourne false;
}
}
/ ** Obtenez les propriétés des objets
* objet OBJ @param
* attribut d'attribut @param
* /
fonction getDefaultStyle (obj, attribut) {
return parseInt (obj.currentStyle? obj.currentStyle [attribut]: document.defaultView.getComputedStyle (obj, false) [attribut]);
}
Les exemples sont les suivants:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<adal>
<Title> Demo </Title>
<style type = "text / css">
corps {marge: 0px;}
.main {position: relative;}
# f1 {position: absolue; Contexte: # FF0000; En haut: 100px; Gauche: 100px; Largeur: 200px; hauteur: 200px; Z-Index: 999}
# f2 {position: absolu; Contexte: # FFFF00; En haut: 0px; gauche: 0px; Largeur: 600px; hauteur: 150px;}
</ style>
</ head>
<body>
<div>
<div id = "f1"> </div>
<div id = "f2"> </ div>
</div>
<script type = "text / javascript">
var o = document.getElementById ("f1");
var d = document.getElementById ("f2");
alerte (impact (o, d));
Impact de la fonction (obj, dobj) {
var o = {
X: GetDefaultStyle (obj, «gauche»),
Y: GetDefaultStyle (obj, «top»),
W: getDefaultStyle (obj, «largeur»),
H: GetDefaultStyle (obj, «hauteur»)
}
var d = {
X: GetDefaultStyle (Dobj, «gauche»),
Y: GetDefaultStyle (Dobj, «Top»),
W: getDefaultStyle (dobj, «largeur»),
H: GetDefaultStyle (dobj, «hauteur»)
}
var px, py;
px = ox <= dx? dx: bœuf;
py = oy <= dy? dy: oy;
// déterminer si les points sont dans les deux objets
if (px> = ox && px <= ox + ow && py> = oy && py <= oy + oh && px> = dx && px <= dx + dw && py> = dy && py <= dy + dh) {
Retour Vrai;
} autre {
retourne false;
}
}
fonction getDefaultStyle (obj, attribut) {
return parseInt (obj.currentStyle? obj.currentStyle [attribut]: document.defaultView.getComputedStyle (obj, false) [attribut]);
}
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.