キャンパスのサイズとかカスタマイズしたい

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>さんぷる</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <!-- canvasはmatter.jsの前に書くこと -->
    <canvas id="world"></canvas>

    <!-- matter.jsはダウンロードしなくてもこのリンクでOK -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
    <script src="main.js"></script>

    <button id="add" class="normal">ボタン</button>
</body>
</html>

main.js


// 使用モジュール
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

// エンジン生成
var engine = Engine.create(),
        world = engine.world;

// canvasのサイズ
var winWidth = 800;
var winHeight = 450;

// レンダリング対象のキャンバス
var canvas = document.getElementById('world');

// レンダリング設定
var render = Render.create({
    canvas: canvas,
    engine: engine,
    options: {
        width: winWidth,
        height: winHeight,
        background: '#FFF',
        wireframes: false,
        showAngleIndicator: false
    }
});


// 地面
var ground = Bodies.rectangle(winWidth/2, winHeight, winWidth, 10, { isStatic: true });
var wallL = Bodies.rectangle(0, winHeight/2, 10, winHeight, { isStatic: true });
var wallR = Bodies.rectangle(winWidth, winHeight/2, 10, winHeight, { isStatic: true });
World.add(engine.world, [ground, wallL, wallR]);

// エンジンの実行
Engine.run(engine);
// 描画実行
Render.run(render);

// ボタンを押したときに箱を増やす
$(document).on('click', '#add',function() {
    var pos = Math.random();
    var hoge = Bodies.rectangle((winWidth*pos) ,0, 30, 30);
    World.add(engine.world, [hoge]);
});

上記の２つのファイルを作って適当なブラウザで開けば、ボタンを押したときにcanvasにカラフルな四角が降ってくるというだけの簡単なサンプル。壁と床はcanvasサイズに合わせて変わるので、winWidthとwinHeightだけ変更すればお好きなサイズで表示できます。

必要なファイルはこの２つだけというシンプルさ。本当はcssもちゃんと書いていて、Githubにあげようと思ったのですがパスワード忘れたので諦めました。時間があったらやります。
箱の色はエンジンの方で設定してるらしい。カスタマイズはできないのかな？後々試します。

注意点

renderの書き方がちょっと曲者で、公式のドキュメントにまともなサンプルが載ってない。さらに、公式で説明しているやり方はbody直下にcanvasを生成する方法だけで、上記のサンプルのようにあらかじめ作成したcanvasに割り当てるという方法を見つけるのに苦労した。
ポイントは、

renderにcanvasの指定をすること
HTML側でmatter.jsの読み込む前にcanvasを設置すること

の２つ。
このやり方を理解するのにずいぶん時間がかかってしまった。

[Matter.js]Renderで生成されるcanvasにidをつけたい

キャンパスのサイズとかカスタマイズしたい

index.html

main.js

注意点

参考