PlunkerでPhaser.Physics その10

# 概要
Plunkerで、Phaser.Physicsやってみた。
ropeJoint、使ってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2e6b3172-162c-4c83-ea16-90ac379477e4.png)

# サンプルコード

```

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { 
    preload: preload, 
    create: create, 
    update: update, 
    render: render 
});
function preload() {
    game.load.image('a', 'assets/sprites/a.png');
    game.load.image('b', 'assets/sprites/b.png');
}
var codeCaption;
var bodyAs = [];
function create() {
    game.stage.backgroundColor = '#124184';
    game.physics.startSystem(Phaser.Physics.BOX2D);
    game.physics.box2d.debugDraw.joints = true;
    game.physics.box2d.gravity.y = 500;
    {
        var spriteA = game.add.sprite(200, 300, 'a');
        game.physics.box2d.enable(spriteA);
        spriteA.body.static = true;
        var spriteB = game.add.sprite(300, 100, 'b');
        game.physics.box2d.enable(spriteB);
        game.physics.box2d.ropeJoint(spriteA, spriteB);
        bodyAs.push(spriteA.body);
    }
    {
        var spriteA = game.add.sprite(400, 300, 'a');
        game.physics.box2d.enable(spriteA);
        spriteA.body.static = true;
        var spriteB = game.add.sprite(500, 100, 'b');
        game.physics.box2d.enable(spriteB);
        game.physics.box2d.ropeJoint(spriteA, spriteB, 150);
        bodyAs.push(spriteA.body);
    }
    {
        var spriteA = game.add.sprite(600, 300, 'a');
        game.physics.box2d.enable(spriteA);
        spriteA.body.static = true;
        var spriteB = game.add.sprite(700, 100, 'b');
        game.physics.box2d.enable(spriteB);
        game.physics.box2d.ropeJoint(spriteA, spriteB, 150, -20, -60, 40, 40);
        bodyAs.push(spriteA.body);
    }
    game.input.onDown.add(mouseDragStart, this);
    game.input.addMoveCallback(mouseDragMove, this);
    game.input.onUp.add(mouseDragEnd, this);
    game.add.text(5, 5, 'Rope joint. Click to start.', { 
        fill: '#ffffff', 
        font: '14pt Arial' 
    });
    game.add.text(5, 25, 'Mouse over bodyA to see the code used to create the joint.', { 
        fill: '#ffffff', 
        font: '14pt Arial' 
    });
    codeCaption = game.add.text(5, 50, 'Parameters: bodyA, bodyB, length, ax, ay, bx, by', { 
        fill: '#dddddd', 
        font: '10pt Arial' 
    });
    codeCaption = game.add.text(5, 65, '', { 
        fill: '#ccffcc', 
        font: '14pt Arial' 
    });
    game.paused = true;
    game.input.onDown.add(function() {
        game.paused = false;
    }, this);
}
function mouseDragStart() { 
    game.physics.box2d.mouseDragStart(game.input.mousePointer); 
}
function mouseDragMove() {  
    game.physics.box2d.mouseDragMove(game.input.mousePointer); 
}
function mouseDragEnd() {   
    game.physics.box2d.mouseDragEnd(); 
}
function update() {
    if (bodyAs[0].containsPoint(game.input.mousePointer))
    {
        codeCaption.text = 'game.physics.box2d.ropeJoint(spriteA, spriteB)';
    }
    else if (bodyAs[1].containsPoint(game.input.mousePointer))
    {
        codeCaption.text = 'game.physics.box2d.ropeJoint(spriteA, spriteB, 200)';
    }
    else if (bodyAs[2].containsPoint(game.input.mousePointer))
    {
        codeCaption.text = 'game.physics.box2d.ropeJoint(spriteA, spriteB, 200, -20, -60, 40, 40)';
    }
    else
    {
        codeCaption.text = '';
    }
}
function render() {
    if (game.paused)
    {
        update();
    }
    game.debug.box2dWorld();
}




```

# 成果物

https://embed.plnkr.co/plunk/OEMI2Z5TrIoYmBac


以上。