var canvasW = 720;
var canvasH = 1280;
var canvasZ = canvasW;
var canvasScale = 1;
var demo = document.getElementById('area');


var clientHeight = demo.clientHeight;
var clientWidth  = demo.clientWidth;
console.log(clientHeight);
var h = canvasH * clientHeight/canvasH;
var w = canvasW * clientHeight/canvasH;
// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite,

    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Events = Matter.Events;

// create an engine
var engine = Engine.create();

//var h = canvasH;//demo.offsetHeight;
//var w = canvasW;//demo.offsetWidth;
// create a renderer
var render = Render.create({
    element: demo,
    engine: engine,
     options: {
        height: h,
        width: w,
        wireframes: false,
        render: {
            background: '#999999',
            visible: true
        }
     }
});

var options = {
      isStatic: true,
      render: {
        visible: true,
        fillStyle: '#ffffff',
        strokeStyle: 'transparent',
      }
  };

// create two boxes and a ground
//var boxA = Bodies.rectangle(w/4, h-40, w/32, w/32, options);
//var boxB = Bodies.rectangle(w-w/4, h-40, w/32, w/32, options);
var wall1 = Bodies.rectangle(0, h/2, 20, h, { isStatic: true });
var wall2 = Bodies.rectangle(w, h/2, 20, h, { isStatic: true });
var ground = Bodies.rectangle(w/2, h-20, w-20, 40, { isStatic: true });

// add all of the bodies to the world
Composite.add(engine.world, [wall1,wall2, ground]);

// create runner
var runner = Runner.create();



const ballComposite = Composite.create();
Composite.add(engine.world, ballComposite);

const mouse = Mouse.create(demo);
const mouseConstraint = MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    render: {
      visible: false
    }
  }
})

Composite.add(engine.world, mouseConstraint)
render.mouse = mouse


var ballAry = [
  {
    vertex:9,
    size:w/7,
    color:'#ff0000',
  },
  {
    vertex:10,
    size:w/8,
    color:'#00ff00',
  },
  {
    vertex:5,
    size:w/9,
    color:'#0000ff',
  },
  {
    vertex:6,
    size:w/10,
    color:'#00ffff',
  },
  {
    vertex:7,
    size:w/11,
    color:'#ffff00',
  },
  {
    vertex:8,
    size:w/12,
    color:'#ff00ff',
  },
  {
    vertex:11,
    size:w/13,
    color:'#999999',
  },
];
Events.on(mouseConstraint, 'mousedown', e => {
  // ドラッグ中は生成しない
  //if (mouseConstraint.body) { return }
  console.log(e.mouse);
  const r = Math.floor(Math.random() * ballAry.length);
  const radius = ballAry[r].size;
  const vertex = ballAry[r].vertex;
  const color = ballAry[r].color;

  const ball = Bodies.polygon(
  //const ball = Bodies.circle(
    e.mouse.position.x,
    0,
    //e.mouse.position.y,
    vertex,
    radius,
    { 
      angle: Math.random() * Math.PI*2,
      frictionAir:0.001,//空気摩擦
      restitution: 0.5,
      isStatic: false,
      render: {
        visible: true,
        fillStyle: color,
        strokeStyle: 'transparent',
      }
    });
  Composite.add(ballComposite, ball);
});


Matter.Events.on(engine, 'collisionStart', function(event) {
    let pairs = event.pairs;
    pairs.forEach(function(pair) {
       console.log(pair);
       if (pair.bodyA.render.fillStyle == pair.bodyB.render.fillStyle) {

          var x = Math.abs(pair.bodyA.position.x + pair.bodyB.position.x)/2;
          var y = Math.abs(pair.bodyA.position.y + pair.bodyB.position.y)/2;

          const ball = Bodies.polygon(
            x,
            y,
            3,
            w/48,
            { 
              restitution: 0.5,
              isStatic: false,
              render: {
                visible: true,
                fillStyle: '#ffffff',
                strokeStyle: 'transparent',
              }
            });
          Composite.add(ballComposite, ball);

          Composite.remove(ballComposite, pair.bodyA);
          Composite.remove(ballComposite, pair.bodyB);
       }  
    });
});

// run the renderer
Render.run(render);

// run the engine
Runner.run(runner, engine);


canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
ctx = canvas.getContext('2d');
$canvas = $(canvas);
$canvas.attr({
  width:canvasW,
  height:canvasH,
});

setInterval(function(){
  var e = new jQuery.Event('click');
  e.offsetX = 100;
  e.offsetY = 100;
  console.log(e);
  $('#area').trigger(e);
},1000);

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-matter-js/