ホームページ >ウェブフロントエンド >jsチュートリアル >collision_javascript スキルを決定するための JS メソッド

collision_javascript スキルを決定するための JS メソッド

WBOY
WBOYオリジナル
2016-05-16 16:14:251187ブラウズ

この記事の例では、JS で衝突を判定する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

JS 衝突メソッド:

コードをコピー コードは次のとおりです:
/**衝突があるかどうかを判断します
* @param obj オリジナルオブジェクト
* @param dobj ターゲット オブジェクト
​*/
関数 Impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, '高さ')
}

var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, '高さ')
}

var px、py

px = o.x // ポイントが両方のオブジェクト内にあるかどうかを判断します
if (px >= o.x && px <= o.x o.w && py >= o.y && py <= o.y o.h && px >= d.x && px <= d.x d.w && py >= d.y && py < = d.y d.h) {
true を返す; } else {
false を返す; }
}

/**オブジェクトのプロパティを取得
* @param obj オブジェクト
* @param 属性属性
​*/
function getDefaultStyle(obj, 属性) {
Return parseInt(obj.currentStyle ?obj.currentStyle[属性] : document.defaultView.getComputedStyle(obj, false)[属性]); }


例は次のとおりです:

コードをコピー

コードは次のとおりです:
 
 
  
  デモ