JavaScript로 Slither.io를 만드는 법 : Part 4 - 충돌

이것은 JavaScript 및 Phaser로 Slither.io를 만드는 튜토리얼 시리즈의 네 번째 파트입니다! 

예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.

충돌 개념

이 부분에서는 snake.js를 수정합니다. 본질적으로, 우리가 하고 싶은 것은 다른 뱀의 섹션과 충돌 할 수 있는 뱀의 전면에 포인트를 추가하는 것입니다. 다음과 같이 보입니다.

각 뱀의 앞쪽에서 원형 물리 바디 "포인트"를 볼 수 있습니다. 게임에서 이 피직스 바디를 보려면 뱀의 디버그 속성을 true로 설정하십시오.

Part 2의 뱀 섹션에 이미 물리 바디를 추가 했으므로 뱀 앞에 서클 본문을 만드는 것이 필요합니다. 이 원을 뱀의 "가장자리"라고 할 것 이므로 뱀의 가장자리가 섹션 바디와 충돌 할 때 관심이 있습니다. 가장자리를 머리 앞쪽에 유지하려면 잠금 제한을 사용하여 뱀이 회전하거나 움직일 수 있도록하고 이 가장자리는 앞으로 유지됩니다.

가장자리 만들기
먼저 snake.js 소스의 Snake 함수에 다음 줄을 추가했습니다.

// 가장자리는 다른 뱀과 충돌 할 수있는 앞쪽 몸체입니다.
// 이 뱀의 머리에 고정되어있다.
this.edgeOffset = 4;
this.edge = this.game.add.sprite (x, y - this.edgeOffset, this.spriteKey);
this.edge.name = "edge";
this.edge.alpha = 0;
this.game.physics.p2.enable (this.edge, this.debug);
this.edge.body.setCircle (this.edgeOffset);

// 가장자리를 머리 앞쪽으로 제한합니다.
this.edgeLock = this.game.physics.p2.createLockConstraint (
     this.edge.body, this.head.body, [0, -this.head.width * 0.5-this.edgeOffset]
);

this.edge.body.onBeginContact.add (this.edgeContact, this);

우리는 스프라이트를 보이지 않게 만들고, 그런 다음 가장자리에 원형 물리바디를 줍니다. 이 바디를 특정 오프셋에서 머리 앞에 고정시키는 잠금 구속 조건을 만듭니다. 이 가장자리가 다른 본문과 접촉하기 시작할 때 콜백을 추가합니다.

에지 연결
가장자리가 무언가와 충돌 할 때 우리가 하는 일을 살펴 봅시다.

edgeContact : function (phaserBody) {
     // 가장자리가 다른 뱀의 섹션을 치는 경우이 뱀을 파괴합니다.
     if (phaserBody && this.sections.indexOf (phaserBody.sprite) == -1) {
         this.destroy ();
     }
     // 가장자리가이 뱀 자신의 섹션에 닿는 경우 글리치를 피하는 간단한 해결책은
     // 가장자리를 중심으로 이동하는 것입니다.
     // 그러면 잠금 제한으로 인해 맨 앞으로 이동합니다
     else if (phaserBody) {
         this.edge.body.x = this.head.body.x;
         this.edge.body.y = this.head.body.y;
     }
}

우리는 가장자리가 다른 뱀의 단면 또는이 뱀의 단면을 공격했는지 알아 낼수 있습니다. 그것이 다른 뱀을 치면 우리는 파괴 방법을 사용하여 이 뱀을 파괴합니다. 이 뱀을 때렸다면, 우리는 머리를 단순히 재설정하기 위해 머리의 중심으로 이동시킵니다. 이 솔루션은 충돌 그룹을 사용하여 이 뱀의 가장자리가 자신의 섹션을 치는 것을 방지하기 위한 대안입니다. 우리가 사용하는 솔루션은 간단하지만 구현하기가 훨씬 쉽습니다.

파괴
뱀이 파괴되면, 우리는 또한 가장자리를 파괴해야합니다. destroy 메소드에 이 코드를 추가했습니다.

this.game.physics.p2.removeConstraint (this.edgeLock);
this.edge.destroy ();

그들이 제한하는 스프라이트 바디와 함께 제약 조건을 파괴하는 것이 항상 중요합니다.

스케일링
뱀의 머리가 커지면 그 엣지는 더욱 더 제약을 받아야 합니다. 이 코드를 setScale 메서드에 추가합니다.

// p2 physics로 엣지 잠금 위치 업데이트
this.edgeLock.localOffsetB = [
     0, this.game.physics.p2.pxmi (this.head.width * 0.5 + this.edgeOffset)
];

순수한 P2 물리를 사용하여 잠금 구속 조건을 업데이트하고 새로운 헤드 스케일을 기반으로 헤드에서 추가 오프셋에 에지를 배치합니다. P2 잠금 제한 등록 정보는 여기에서 읽을 수 있습니다.

그리고 그것은 게임에서 뱀 충돌을 구현하는 데 필요한 모든 것입니다. 우리의 작업은 대부분 물리학 자들로 철저한 스네이크 수업을 만들고 방법을 파괴함으로써 이미 완료되었습니다. 제 5 부에서는 우리가 뱀에게 눈을 보충하기 위해 노력할 것입니다.