JavaScript의 캔버스에서 충돌 감지

Question

나는 대학 과제로 game에서 일하고 있습니다. 그 아이디어는 당신이 을 방어하는 선 (그림을 그리기 위해 &을 놓아 라)을 그리는 것으로 들어오는 소행성 (선)의 중심 원을 방어하는 것입니다. 소행성이 줄을 때리면 둘 다 소행성을 파괴해야합니다.

현재 문제는 충돌이 감지되지 않는다는 것입니다.

두 행의 객체 배열을 가지고 있습니다. & 소행성입니다. 라인은 간단히 시작 & 끝 x & y로 구성되어 있으며 소행성은 임의의 속도 & 임의의 각도 (수신 각도)로 구성됩니다. 컨텍스트가 회전되고 소행성이 그려지고 & 다음 줄로 재설정됩니다. "나는 천국 -

내가 색상이 빨간색 인 경우 (기본적으로, 자신의 속도) &,이 소행성을 파괴 할 것이다 그러나 많은 픽셀 라인이 그 반복에서 진행됩니다 소행성의 앞에 getImageData & 체크를 사용, 충돌을 감지하려면 그 선을 파괴하는 것에는 t 라운드가있다, 내가 그것에 올 때 그 장애물을 감당할 것이다 (제안은 환영 받는다).

function asteroids_draw() { 
      for (var i = 0; i < asteroids.length; i++) { 
       // Drawing setup 
       context.save(); 
       context.translate(width/2, height/2); 
       context.rotate(asteroids[i].angle);    

       // Detecting close asteroids 
       if ((asteroids[i].distance - asteroids[i].speed) < planet.size) { 
        asteroids.splice(i, 1); 
        game_life_lost(); 
        context.restore();  
        return; 

       } else if ((asteroids[i].distance - asteroids[i].speed) < 150){ 
        asteroids[i].colour = '#FF0000'; 
       } 

       // Scanning ahead for lines      
       for (var j = 0; j < asteroids[i].speed; j++) { 
        if (context.getImageData(asteroids[i].distance - j, 0, 1, 1).data[0] == 255) {       
         asteroids.splice(i, 1); 
         context.restore();  
         return; 
        } 
       }     

       // Drawing asteroid 
       context.beginPath(); 
       context.moveTo(asteroids[i].distance -= asteroids[i].speed, 0); 
       context.lineTo(trig, 0); 
       context.strokeStyle = asteroids[i].colour; 
       context.stroke();    
       context.closePath(); 

       context.restore();  
      } 
     } 

문제는, 소행성은 결코 나는 내 인생이 왜 참조, 또는 그 일을 다른 간단한 방법을 볼 수의 라인 &과 충돌하지 않습니다. 어떤 충고라도 미리 감사드립니다.

Answer 1

나는 더 많은 문제에 대해 생각했다. &이 일을하는 방법이 확실히 최선의 방법이 아니라는 것을 깨달았다. Model View Controller 디자인 패턴은보기없이 수행 할 수 있어야합니다. 그것을 해결하는 가장 좋은 방법은 수학을 사용하는 것입니다!

두 선의 교차점에 대한 간단한 계산이 있지만 범위 내에서 두 선의 교차가 필요합니다. 나는 8 개의 좌표 - 시작 x & y & 끝 x & y 두 줄을 사용하여 이것을 더 단순화하는 an algorithm을 발견했다.

나는 results을 게시했습니다. 도와 주셔서 감사합니다.

Answer 2

당신이 컨텍스트를 회전 할 때 이전에 그려진 항목 (선)이 회전하지 않고 회전 후에 그려지는 객체 만 회전된다는 것이 문제라고 생각합니다. See this page for more info.

캔버스를 변환하고 회전하기 전에 소행성/선 교차 테스트를 수행하고 코사인 및 사인을 사용하여 이미지 데이터를 가져올 픽셀의 x 및 y 좌표를 찾을 수 있습니다.

var pixelLocation = 
    [Math.cos(asteroids[i].angle) * j, Math.sin(asteroids[i].angle) * j]; 
if (context.getImageData(pixelLocation[0], pixelLocation[1], 1, 1).data[0] == 255) { 

cos과 sin을 전달하기 전에 각도가 라디안인지 확인하십시오.