Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Matter.jsを触ってみました。

More than 1 year has passed since last update.

今日は、JavaScriptの2次元グラフィックスの物理演算ライブラリ、Matter.jsを初めて触りました。ブラウザ上で動作します。
覚書として。(2018/7/5)

Matter.js

公式サイト
http://brm.io/matter-js/

ダウンロード(リリースビルド)
https://github.com/liabru/matter-js/releases

動作させた環境

jsdo.it

コードをシェアする必要があったため、オンライン開発環境のjsdo.itを使って動かしました。

その他

ボタンの表示

HTMLのinputタグでボタンを表示させたものと、enchant.jsを使って表示させたものの2パタンをテストしました。
どちらも「クリックしたらボールが落ちる」という動作に関しては問題なく行えました。

参考記事

物理演算エンジン、Matter.jsを使ってみた。
https://qiita.com/yhikishima/items/ed77a4d869bc3bda9bc2

サンプルコード

今回は、Matter.js + enchant.jsのバージョンを載せます。

HTMLプログラム

Matter.jsとenchant.jsをライブラリとして追加しました。enchant.jsはjsdo.itでライブラリとして登録されているのでメニューから選択するだけです。Matter.jsは別プロジェクトとしてライブラリを一旦アップしておき、それを追加しました。

<div id='enchant-stage'></p>

enchant();

window.onload = function() {

    // Matter.jsの変数
    var Engine = Matter.Engine;
    var World = Matter.World;
    var Bodies = Matter.Bodies;

    // Matter.js エンジン作成
    var engine = Engine.create(document.body);

    // 二つの箱と地面を作成しWorldに追加
    var boxA = Bodies.rectangle(200, 200, 20, 20);
    var boxB = Bodies.rectangle(100, 100, 40, 40);
    var ground = Bodies.rectangle(160, 300, 320, 20, { isStatic: true });
    World.add(engine.world, [boxA, boxB, ground]);

    // Matter.js エンジン起動
    Engine.run(engine);

    // ボタンをenchant.jsで作る
    var game = new Game(320, 40);    
    game.onload = function() {    
        // ボタン生成とgame画面への追加
        var button = new Label("ここをクリック!");
        button.x = 10;
        button.y = 5;
        game.rootScene.addChild(button);

        // ボタンがクリックされたとき
        button.addEventListener('touchend', function()
        {
            // 四角を追加
            var box = Bodies.rectangle(200, 0, 20, 20);
            World.add(engine.world, [box]);
        });    
    };
    // enchant.js起動
    game.start();

};

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away