fキー：力をかける
iキー：衝撃を与える
vキー：一定速度を与える
tキー：瞬間移動させる
view source

JavaScript

    // Box2Dオブジェクトを取得
    var b2Vec2 = Box2D.Common.Math.b2Vec2 // 2Dベクトル
     ,  b2BodyDef = Box2D.Dynamics.b2BodyDef // Body定義
     ,  b2Body = Box2D.Dynamics.b2Body // Body
     ,  b2FixtureDef = Box2D.Dynamics.b2FixtureDef // Fixture定義
     ,  b2Fixture = Box2D.Dynamics.b2Fixture // Fixture
     ,  b2World = Box2D.Dynamics.b2World // 物理世界
     ,  b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape // 衝突オブジェクトの形状（ポリゴン）
     ,  b2CircleShape = Box2D.Collision.Shapes.b2CircleShape  // 衝突オブジェクトの形状（円）
     ,  b2DebugDraw = Box2D.Dynamics.b2DebugDraw // デバッグ描画


    // 世界を作る
    var world = new b2World(new b2Vec2(0,10), true);

    ////////////////////////////////////

    //box
    var bodyDef = new b2BodyDef;
    bodyDef.type = b2Body.b2_dynamicBody;
    bodyDef.position.Set(2,1);
    bodyDef.fixedRotation = true;

    var fixDef = new b2FixtureDef;
    fixDef.density = 1.4;
    fixDef.friction = 0.2;
    fixDef.restitution = .3;

    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(.5,1);

    var box = world.CreateBody(bodyDef);
    box.CreateFixture(fixDef);

    var box2 = world.CreateBody(bodyDef);
    box2.CreateFixture(fixDef);
    box2.SetPositionAndAngle(new b2Vec2(3,1),Math.PI);

    var box3 = world.CreateBody(bodyDef);
    box3.CreateFixture(fixDef);
    box3.SetPositionAndAngle(new b2Vec2(5,1),Math.PI);

    //地面
    var holderDef = new b2BodyDef;
    holderDef.type = b2Body.b2_staticBody;
    holderDef.position.Set(8, 14);

    var fd = new b2FixtureDef;
    fd.shape = new b2PolygonShape;
    fd.shape.SetAsBox(8,1);

    var ground = world.CreateBody(holderDef);
    ground.CreateFixture(fd);


    var keydown = 0;
    // 力
    function push(c) {
        if(c==1)    
            box.ApplyForce(new b2Vec2(0,-300),  box.GetWorldCenter());
    }
    // 衝撃
    function hit(c) {
        if(c==1)    
            box.ApplyImpulse(new b2Vec2(5,0), box.GetWorldCenter());
    }
    // 速度
    function speed(c) {
        if(c==1){
            box.SetAwake(true);
            box.SetLinearVelocity(new b2Vec2(4,0));
        }
    }
    // テレポート
    function teleport(c) {
        if(c==1){
            box.SetAwake(true);
            box.SetPositionAndAngle(new b2Vec2(10,0),Math.PI/3);
        }
    }
    $(window).keydown(function(key) {
        keydown++;
        var code = key.keyCode;
        if(code == 102 || code == 70)   push(keydown); // fキー
        if(code == 105 || code == 73)   hit(keydown); // iキー
        if(code == 118 || code == 86)   speed(keydown); // vキー
        if(code == 116 || code == 84)   teleport(keydown); // tキー
    });
    $(window).keyup(function(e) {
        keydown=0;
    });


    ////////////////////////////////////


    // デバッグ描画の設定      
    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
    debugDraw.SetDrawScale(30);     //描画スケール
    debugDraw.SetFillAlpha(0.3);    //半透明値
    debugDraw.SetLineThickness(1.0);//線の太さ
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);// 何をデバッグ描画するか
    world.SetDebugDraw(debugDraw);

    window.setInterval(update,1000/60);

    function update() {
        world.Step(1 / 60, 10, 10); // 物理世界を更新する
        world.DrawDebugData(); // デバック描画
        world.ClearForces(); // 物理世界上の力をリセットする
    }

CSS


  
HTML

  

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

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

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。