개요

javascript용의 물리 연산 라이브러리의 충돌 판정에 대해 플레이합니다.
일본어로의 정보가 적다고 느꼈으므로, 뭔가 참고가 되면과.

전 자료

먼저 말씀드리겠습니다만, 원형은 모두 좋아하는 Shiffman 선생님의 것입니다.
이것에 색을 붙여, 같은 색의 구를 지우는 충돌 판정을 붙여 보았습니다.

htps //w w. 요츠베. 이 m/와 tch? v = 울 r596F 68

목차

1. 소개
완성형의 소개.
2. 충돌 판정
충돌 이벤트의 기술 방법에 대해.
3. Google 크롬 개발자 도구
무엇과 무엇이 충돌하고 있는지 알아봅시다.
4. 참고
5. 끝에

1. 소개

완성형

이런 것을 만드는 것을 상정하고 이야기를 진행합니다.
여기에서 발전시키면, ○○○○나카푸○푸○같은 게임을 만들 수 있을 것입니다!


출처
htps : // 에아와 r. p5js. 오 rg / 유 ぃ gn / s t t s / 아 vmyk Fxp

2. 충돌 판정

여기를 참고로 아래의 코드를 썼습니다.

coderblock JavaScript Physics with Matter.js
(핀볼 코드 events for when the pinball hits stuff부)
htps : // 여기 rsbぉck. 이 m / b ぉ g / ゔ ぁ sc 리 ptphy 해 cs ぃ th - rjs /

  Matter.Events.on(engine, 'collisionStart', function(event) {
      let pairs = event.pairs;  //衝突物がpairs配列に入る
      pairs.forEach(function(pair) {　//pairs配列をすべて見ていくループ
         console.log(pair); //これで何がぶつかっているかがわかる
         if (pair.bodyA.render.fillStyle == pair.bodyB.render.fillStyle) {　 //もしbodyAとbodyBのオブジェクトの色が一緒であれば
　　　　　   //bodyAとbodyBの消去処理を記述する。
         }  
      });
  });

아무래도 충돌한 것이 모두 pairs 배열에 저장되고,
pairs 배열을 하나하나 pair로 분해해, 무엇과 무엇이 충돌했는지를 조사해 가는 것 같습니다.
그래서 콘솔에서 pair의 내용을 토하는 것을 시도했습니다.

3. Google 크롬 개발자 도구(web editor에서도 볼 수 있음)

정보의 옥수함이나~! ! !
빨간색 테두리로 둘러싸인 곳에 bodyA와 bodyB 정보가 있습니다.
다음은 구와 사각형(외경의 벽)에 부딪친 것 같네요.
오른쪽 화살표를 클릭하여 더 자세한 정보를 볼 수도 있습니다.
이 정보로부터 if문으로 충돌 판정을 쓸 수 있네요(여기에서는 BodyA와 BodyB의 render.fillStyle로 색이 일치했는지를 보고 있다)

4. 참고

Shiffman 교사의 matter.js 해설 : htps //w w. 요츠베. 이 m/와 tch? v = 울 r596F 68
matter.js 충돌 판정 참고: htps : // 여기 rsbぉck. 이 m / b ぉ g / ゔ ぁ sc 리 ptphy 해 cs ぃ th - rjs /
matter.js 참조 (Events.on (engine, "collisionStart", callback))
htps : // brm. 이오 / 잠깐 rjs / 두 cs / c ぁせ s / 엔기네. HTML

착색

takawo 선생님에게 워크숍에서 가르쳐 주신 생각에 근거하고 있습니다.
→ 배열에 여러 색을 저장합니다. 색의 조합은 colormind등의 사이트를 참고로 한다.

참여한 워크숍 및 자료: htps : // 라고 해서 r. 이 m/타카를/s타츠 s/1173588907662798849
Takawo 교사 HP : h tp : // 센 k 호 r. rg/

5. 끝에

나는 비 프로그래머이고 Advent Calendar도 첫 참전에서 두려워하는 두려움을 써 보았습니다! 웃음
하지만, p5.js는 나 같은 라이트한 유저에게 퍼져 주었으면 한다는 생각도 있어,
초보자면서 써 보았습니다.
이해하기 어려운 곳이 있으면 무엇이든 질문하십시오.
봐 주셔서 감사합니다.