p5.js + matter.js で落ち物ゲーっぽいもの

概要

javascript用の物理演算ライブラリの衝突判定について遊びます。
日本語での情報が少ないと感じたので、何かご参考になればと。

元ネタ

最初に申し上げますが、原型はみんな大好きShiffman先生のものです。
これに色を付けて、同じ色の球を消す衝突判定を付けてみました。

https://www.youtube.com/watch?v=urR596FsU68

目次

1.はじめに
　完成形の紹介。
2.衝突判定
　衝突イベントの記述方法について。
3.GoogleChromeのデベロッパーツール
　何と何が衝突しているかを調べましょう。
4.参考
5.おわりに

1.はじめに

完成形

こんなものを作ることを想定して話を進めます。
ここから発展させれば、ツ○ツ○とかぷ○ぷ○みたいなゲームが作れるはずです！

ソース
https://editor.p5js.org/Yu-lign/sketches/Avm-ykFxp

2.衝突判定

こちらを参考に以下のコードを書きました。

coderblock JavaScript Physics with Matter.js
　（ピンボールのコード　events for when the pinball hits stuff部）
https://codersblock.com/blog/javascript-physics-with-matter-js/

  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.GoogleChromeのデベロッパーツール（web editorでも見れます）

情報の玉手箱や〜！！！
赤枠で囲ったところにbodyAとbodyBの情報があります。
以下は球と四角（外枠の壁）にぶつかったようですね。
右矢印をクリックしてさらに詳しい情報を見ていくことも可能です。
この情報からif文で衝突判定を書けますね（ここではBodyAとBodyBのrender.fillStyleで色が一致したかを見ている）

4.参考

Shiffman先生のmatter.js解説：https://www.youtube.com/watch?v=urR596FsU68
matter.js衝突判定参考：https://codersblock.com/blog/javascript-physics-with-matter-js/
matter.jsのリファレンス(Events.on(engine, "collisionStart", callback))
https://brm.io/matter-js/docs/classes/Engine.html

色付け

takawo先生にワークショップで教えて頂いた考え方に基づいています。
→配列に複数色を格納する。色の組み合わせはcolormind等のサイトを参考にする。

参加したワークショップおよびその資料：https://twitter.com/takawo/status/1173588907662798849
takawo先生HP：http://cenkhor.org/

5.おわりに

私は非プログラマーですし、Advent Calendarも初参戦で恐る恐る書いてみました！笑
ですが、p5.jsは私みたいなライトなユーザーに広まって欲しいとの思いもあり、
初心者ながら書いてみました。
分かりにくいところあったら、何でも質問下さい。
ご覧頂きありがとうございました。