Render = Matter.Render,

    World = Matter.World,

    Bodies = Matter.Bodies;

var engine;

var world;

var circles = [];

var boundaries = [];

var colors = ["#3F826D", "#DDEDAA", "#F0CF65", "#D7816A", "#BD4F6C"];　//球の色

​

function setup() {

  createCanvas(400, 400);

  engine = Engine.create();

  world = Engine.world;

  Engine.run(engine);

  boundaries.push(new Boundary(400, 400, 800, 20)); //底の壁生成

  boundaries.push(new Boundary(0, 0, 20, 800));　//左端の壁生成

  boundaries.push(new Boundary(400, 0, 20, 800)); //右端の壁生成

}

​

function mouseClicked() {

  circles.push(new Circle(mouseX, mouseY, random(5, 20), random(colors))); //色はランダムで選ぶ

}

function draw() {

  background(51);

  Engine.update(engine);

  for (var i = 0; i < circles.length; i++) {

    circles[i].show();

    if (circles[i].isOffScreen()) { //画面からはみ出たら

      circles[i].removeFromWorld();　//オブジェクト消す

      circles.splice(i, 1);　//配列から消す

      i--;

    }

  }

  for(var i = 0; i < boundaries.length; i++) {

    boundaries[i].show();

  }

​

  //衝突判定

  Matter.Events.on(engine, 'collisionStart', function(event) {

    let pairs = event.pairs;

    pairs.forEach(function(pair) {　//pairs配列をすべて見ていくループ

     console.log(pair); //これで何がぶつかっているかがわかる

      //もし衝突球同士の色が同じであれば

      if (pair.bodyA.render.fillStyle == pair.bodyB.render.fillStyle) {

        //Shiffman先生の動画にて、画面はみ出したら消去するメソッド書いているため、強制的に画面の外へ出すことで球を削除している。

       pair.bodyA.position.x = 1000;

       pair.bodyB.position.x = 1000;

      }       

    });

  });

​

}

​

​