당 판정 알고리즘(2D 사각형×사각형)
복잡하고 빠른 것은 더 있다고 생각합니다만, 이것은 가장 간단한 알고리즘인가라고 생각합니다.
이번은 사각형 x 사각형이므로 직사각형 (읽기 "구케")라고도 불린다고 생각합니다.
여기에서는 구형을 「사각형」이라고 부릅니다.
당 판정에 필요한 정보
우선 당첨 판정에 사용하는 정보를 리스트 업 합니다.
■ 중심 위치 (x, y)
■ 가로폭 (width)
■ 높이 (height)
이것이 갖추어져 있으면 당 판정을 할 수 있어, 라고 하는 이야기입니다.
아직 아무것도 이야기가 진행되지 않으므로 우선 가라앉아 갑시다.
「가로의 조건」과 「세로의 조건」이 있다
그림을 보자. "빨강"과 "파랑"이라고합니다.
옆에 대해
1. 우선 거리를 내자
위치를 바탕으로 거리를 내립니다.
거리 = (빨간색 X - 파란색 X)의 절대 값
입니다.
왜 절대치인가 하면, 마이너스로 하고 싶지 않기 때문입니다.
빨강(3,10), 파랑(5,20)의 경우 2
빨강(30,2), 파랑(18,2)의 경우 12
그리고 어떤 경우에도 동일하게 취급할 수 있습니다.
2. 두 개의 폭 ÷ 2를 더한다
그것은 빨강 .width/2 + 파랑 .width/2
에서 낼 수 있습니다.
3 . 1과 2 비교
자, 1과 2를 사용하면 충돌 상태를 감지 할 수 있다고 생각하지 않습니까?
1 < 2일 때입니다.
이것은 말로 늘어놓아도 힘줄에 떨어지지 않는다고 생각하므로, 이미지 해 보세요.
1 < 2일 때 충돌입니다.
세로 정보
옆에 대해 'x'나 'width'를 다루고 있던 것을 'y'나 'height'로 바꿀 뿐입니다.
결정하자.
「세로에 대해」 「가로에 대해」 양쪽 충돌 검출할 수 있으면 충돌입니다.
JavaScript & Canvas로 표현하는 데 필요한 지식
원리의 이야기가 끝났으므로 앞으로는 표현해 나갈 것입니다.
알다시피, 절대 값을 내는 표준 함수 Math.abs()가 필요합니다.
var absNum = Math.abs(-10); // 10
그리고 Canvas에서 사각형을 표현한다면 rect()가 필요합니다.
rect (x, y, width, height)로 렌더링 됩니다.
rect (100,100,10,10); //(100,100)に幅、高さ10の四角を描く
자, 해보자.
index.html
<script>
function setup(){
var canvas = document.getElementById('MyCanvas');
if (canvas.getContext){
ctx = canvas.getContext('2d');
//赤い四角
var red = {
x : 100,
y : 100,
width : 80,
height : 100
};
//青い四角
var blue = {
x : 160,
y : 180,
width : 100,
height : 130
};
// 当たり判定
if(
Math.abs(red.x - blue.x) < red.width/2 + blue.width/2 //横の判定
&&
Math.abs(red.y - blue.y) < red.height/2 + blue.height/2 //縦の判定
){
console.log("hit"); // hit
}
//rectの基準点は左上になっているので、描画時に基準点を真ん中にしてます。
ctx.rect(red.x - red.width/2,red.y - red.height/2,red.width,red.height);
ctx.rect(blue.x - blue.width/2,blue.y - blue.height/2,blue.width,blue.height);
ctx.fill();
}
}
</script><html><head><style type="text/css">canvas { background:#FAFAFA;}</style></head><body onload="setup();"><canvas id="MyCanvas" width="500" height="500"></canvas></body></html>
왜 "차이의 절대치"인가? 아게인
「차이의 절대치」를 내는 것의 혜택은 4개의 패턴에 대응할 수 있는 것이군요.
아래의 4개의 패턴 모두 할 수 있는 것을 이미지 해 봅시다. 할 수 있을 것 같네요.
Reference
이 문제에 관하여(당 판정 알고리즘(2D 사각형×사각형)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hp0me/items/57f901e9b0babe1a320e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
