GameQuery 플러그인으로 Jquery에서 웹 게임을 프로그래밍하려고하는데 문제는 GameQuery 플러그인이 경계 상자가있는 픽셀 충돌 감지에서만 충돌 감지를 지원하지 않는다는 것입니다. 자바 스크립트/Jquery에서 픽셀 당 충돌 감지를 구현할 수 있습니까?자바 스크립트/Jquery/Gamequery에서 픽셀 충돌 당 감지
화살표 키를 사용하여 이동하는 국가와 플레이어가있는 세계지도가 있습니다. 플레이어가 언제 어느 국가에 있는지를 알 수 있고 국가가 불규칙한 모양을 갖고 싶어합니다.
이미지는 국가 별 단색 및 나머지 부분의 투명도가있는 단순한 png입니다.
불가능합니다.
그러나 매우 복잡한 대안은 아닙니다. 다각형 기반 충돌을 사용합니다.
이미지를 사용하여 사용자에게 국가를 표시하지만 내부적으로 다각형을 사용하십시오.
this forum entry에서 이것을 구현하는 방법에 대한 아주 완벽한 설명을 찾을 수 있습니다 (이미지가 나타날 때까지 조금 아래로 스크롤해야 할 수도 있음). 거기에 질문을하는 사람은 당신이 원하는 (문자 위치 대신 마우스 위치) 것과 거의 같은 것을하고 싶었습니다.
감사합니다.
또는 다른 각도에서 공격 ... 말하자면 ...
벡터는 키가 될 수있다, 멋진 물건은
어쩌면 콤보 어떤 종류의/통합이 일할 수있는 http://www.raphaeljs.com에서 일어나고?
할당하는 각 국가는 (국경에 특별한 색상을 지정하지 않은, 테두리는 국가의 색상 중 하나를 착색한다) 맵에 다른 색상 : 좋아, 여기
는 솔루션의 일종이다.
부하 캔버스 당신이지도 위의 정상적인지도를 표시 할 수 후
var img = new Image();
img.src = 'worldmap.png';
var map = document.getElementById('canvas').getContext('2d');
map.drawImage(img, 0, 0);
에 그 이미지는 (그것은 단지 참조입니다, 및 기타 물건 아래에 숨겨져 할 수있다 - 사용 된 div 및 z-인덱스 그).
은 국가의 플레이어가 그의 위치에서 픽셀 데이터를 얻을 수 있습니다 결정하는data = map.getImageData(x, y, 1, 1).data;
key = data.join("-"); // something like "255-0-0-255" for red
country = countries[key];
그것이 RGBA 배열해야합니다, 당신은 그 색상에 할당 어느 나라 찾아 볼 수 있습니다. 그래서 내포 된 rgba-values를 키로, 국가 이름을 값으로 배열을 유지해야합니다.
countries = {
"255-0-0-255" : "Russia",
"255-0-255-255" : "China",
...
};
이것은 캔버스 개체가있는 브라우저에서만 작동합니다. 그래서 당신이 아이폰이나 안드로이드에서 이것을하고 있다면 당신은 운이 좋다!
불규칙한 모양의 대상물은 어떻게 구성되어 있습니까? 그들은 각각 하나의 큰 이미지입니까? ... 아니면 색깔있는 DOM 요소로 구성되어 있습니까? – James
우리는 각 국가를 별도의 요소로 계획하고 있지만, 화면에 PNG로 그려지지만 하나의 큰 이미지처럼 쉬울 경우 계획을 수용하도록 변경할 수 있습니다.각 개별 픽셀을 국가에 매핑하고 국가를 얻기 위해 픽셀지도와 플레이어의 위치를 확인하는 아이디어를 생각했는데 효율적입니까? –
효율적인 것은 아니지만 그것을 수행하는 유일한 방법 인 것 같습니다. 사용중인 이미지 유형 (예 : 단색 또는 지형에 따라 다름)의 예를 볼 수 있다면 더 많은 것을 도울 수 있습니다. canvas의 'getImageData'를 사용하여 국가 개체가 이미지의 나머지 부분과 충분히 구별되는 한 특정 픽셀이 국가 내에 있습니다. – James