직사각형 충돌 검출 (러시아 블록 모방)

예전 에는 현묘 하고 현묘 한 충돌 검출 알고리즘 이 라 고 생각 했 지만 사실은 가감 법 에 불과 했다.아무래도 너무 적 게 쓴 것 같 아서 대부분 은 보기 만 하고 멈 추 는 단계 에 머 물 렀 다.
직사각형의 충돌 검 측 원 리 는 두 직사각형의 x 값 + 너비 와 y 값 + 높이 의 각종 비교 이다.
 

function(c1,c2{
    return !{
                     b1.x + b1.w < b2.x ||
                     b1.y + b1.h < b2.y ||
                     b2.x + b2.w < b1.x ||
                     b2.y + b2.h < b1.y
                }     

직사각형 1 의 x 에 직사각형 1 의 너비 가 직사각형 2 의 x 보다 작 다 는 뜻 이다. 그러면 직사각형 1 이 직사각형 2 의 왼쪽 에 있 을 때 두 사각형 이 수평 방향 에서 중첩 되 었 는 지 확인 할 수 있다.수직 방향 이 같 으 면 x 를 y 로 바 꾸 고 너 비 를 높이 로 바 꾸 면 됩 니 다.
충돌 검 측 원 리 를 알 게 된 후에 다른 것 은 작은 뜻 입 니 다. 애니메이션 프레임 을 이용 하면 사각형 이 떨 어 지 는 애니메이션 을 만 들 수 있 습 니 다.　　
전체 코드 는 다음 과 같 습 니 다:
 

    
        
        
        
    

    
        

        
        <span style="color:#008000;">/*</span><span style="color:#008000;">       y        ，                        ，         </span><span style="color:#008000;">*/</span>
        
            <span style="color:#0000ff;">var</span> cav = document.getElementById("cav"<span style="color:#000000;">),
                ctx </span>= cav.getContext('2d'<span style="color:#000000;">);

            </span><span style="color:#0000ff;">var</span> rects = [],<span style="color:#008000;">//</span><span style="color:#008000;">       </span>
                speed = 2;<span style="color:#008000;">//</span><span style="color:#008000;">    </span>
            
            <span style="color:#008000;">//</span><span style="color:#008000;">      </span>
            <span style="color:#0000ff;">function</span><span style="color:#000000;"> rectInit(x, y, width, height) {
                </span><span style="color:#0000ff;">this</span>.x =<span style="color:#000000;"> x;
                </span><span style="color:#0000ff;">this</span>.y =<span style="color:#000000;"> y;
                </span><span style="color:#0000ff;">this</span>.w =<span style="color:#000000;"> width;
                </span><span style="color:#0000ff;">this</span>.h =<span style="color:#000000;"> height;
            }
            
            </span><span style="color:#008000;">//</span><span style="color:#008000;">    </span>
            <span style="color:#0000ff;">function</span><span style="color:#000000;"> createRect() {
                </span><span style="color:#0000ff;">var</span> x = cav.width *<span style="color:#000000;"> Math.random(),
                    y </span>= 0<span style="color:#000000;">;

                </span><span style="color:#0000ff;">var</span> rect = <span style="color:#0000ff;">new</span> rectInit(x, y, 30, 30<span style="color:#000000;">);
                rects.push(rect);
                </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> rect;
            }
            
            </span><span style="color:#008000;">//</span><span style="color:#008000;">          </span>
            <span style="color:#0000ff;">var</span> oRect = <span style="color:#0000ff;">new</span> rectInit(cav.width / 2, 0, 30, 30<span style="color:#000000;">);
            rects.push(oRect);
            
            </span><span style="color:#008000;">//</span><span style="color:#008000;">      </span>
            <span style="color:#0000ff;">function</span><span style="color:#000000;"> animate() {
                ctx.clearRect(</span>0, 0<span style="color:#000000;">, cav.width, cav.height);
                
                </span><span style="color:#008000;">//</span><span style="color:#008000;">       </span>
                <span style="color:#0000ff;">if</span>(oRect.y < cav.height-<span style="color:#000000;">oRect.h){
                    oRect.y </span>+=<span style="color:#000000;"> speed;
                }
                </span><span style="color:#0000ff;">else</span>{<span style="color:#008000;">//</span><span style="color:#008000;">         </span>
                    oRect.y = cav.height-<span style="color:#000000;">oRect.h;
                    
                    oRect </span>= createRect();<span style="color:#008000;">//</span><span style="color:#008000;">        </span>
<span style="color:#000000;">                }
                ctx.fillStyle </span>= '#f00'<span style="color:#000000;">;
                
                </span><span style="color:#008000;">//</span><span style="color:#008000;">          </span>
                rects.forEach(<span style="color:#0000ff;">function</span><span style="color:#000000;">(r,i){
                    </span><span style="color:#0000ff;">if</span>(oRect !== r &&<span style="color:#000000;"> collision(oRect,r)){
                    </span><span style="color:#008000;">//</span><span style="color:#008000;">    console.log('    ');</span>
                        oRect.y = r.y -<span style="color:#000000;"> oRect.h;
                        oRect </span>=<span style="color:#000000;"> createRect();
                    }
                    
                    ctx.fillRect(r.x,r.y,r.w,r.h);
                });
                
                
                
                requestAnimationFrame(animate);
            }
            
            animate();

            </span><span style="color:#008000;">//</span><span style="color:#008000;">       </span>
            <span style="color:#0000ff;">function</span><span style="color:#000000;"> collision(c1, c2) {
                </span><span style="color:#0000ff;">return</span> !(c1.x + c1.w < c2.x ||<span style="color:#000000;">
                    c1.y </span>+ c1.h < c2.y ||<span style="color:#000000;">
                    c2.x </span>+ c2.w < c1.x ||<span style="color:#000000;">
                    c2.y </span>+ c2.h <<span style="color:#000000;"> c1.y
                );
            }
        </span>
    

 
다음으로 전송:https://www.cnblogs.com/11lang/p/6082811.html