getImageData를 사용하는 JS 캔버스 충돌 감지

Question

매우 익숙하지 않은 프로그래머로서 플레이어가 캔버스에서 특정 색상과 충돌 할 때이를 감지하는 게임을 코딩하려고합니다. 좌표가 "player.x"및 "player.y"인 검은 색 사각형과 화살표 키를 누를 때 주위를 움직이는 크기 50x50이 있습니다. 캔버스에 고정 된 빨간색 (255,0,0) 사각형이 있습니다.

아래 함수는 "플레이어"스퀘어 주위에 약간 큰 사각형을 잡고 빨간색이 있는지 알아 내야합니다. 있다면 경고를 보냅니다. 문제는 이것이 작동하지 않는 것입니다.

function collideTest(){ 
    var canvas = document.getElementById("canvas"); 
    var c = canvas.getContext("2d"); 

    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60); 

    for (var i = 0; i < 3600; i++) { 
     if (whatColor.data[i] == 255) { 
      alert("red"); 
     } 
    } 
} 

나는이 빨간색 픽셀을 감지 할 수있는 가장 효율적인 방법은 아니라고 반 알고 있어요,하지만 난 여기를 게시하기 전에 코드를 단순화하고 싶었다. 함수에 명백하게 잘못된 것이 있습니까?

이 문제는 함수가 호출되는 방식에 달려 있습니다. 사용자 입력을 감지하고 "플레이어"사각형의 좌표를 변경하는 다른 함수의 끝에서 호출됩니다. 이 함수는 모든 것이 캔버스에 그려지기 바로 전에 호출됩니다.

미리 도움을 청하십시오!

Answer 1

캔버스의 각 단일 픽셀에 대해 whatColor.data 배열에는 빨강, 녹색, 파랑, 알파 (불투명도)의 4 가지 색상 정보가 순차적으로 저장됩니다. 따라서 whatColor.data는 각 픽셀에 대해 이렇게 보입니다.

whatColor.data [i]는 색상의 빨간색 구성 요소입니다.

whatColor.data [i + 1]은 색상의 녹색 구성 요소입니다.

whatColor.data [i + 2]는 색상의 파란색 구성 요소입니다.

whatColor.data [i + 3]은 색상의 알파 (불투명도) 구성 요소입니다.

그래서 당신의 반복과 같을 것이다 (픽셀 당 4 색인) :

for(var i = 0, n = whatColor.data.length; i < n; i += 4) { 
     var red = whatColor.data[i]; 
     var green = whatColor.data[i + 1]; 
     var blue = whatColor.data[i + 2]; 
     var alpha = whatColor.data[i + 3]; 
     if(red==255){ ... it's a hit, do your thing! ... } 
} 

imageData.data 배열에 미니 튜토리얼 여기를 참조하십시오 : 그런데 http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

, 당신은 수도 캔버스로 게임 제작을 단순화하는 캔버스 라이브러리 중 하나를 살펴보십시오. 다음은 몇 가지 예입니다 : easelJs, KineticJs, FabricJs 등!

Answer 2

var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60); 

player.x 및 player.y는 소수점 수가 반올림되어 있는지 확인 또는 getImageData 화하고 좋은 재생되지 않습니다 수 없습니다.