JSFiddle - React, Tailwind, and code Playground

by zbzzn

HTML

<script src="https://rawgithub.com/photonstorm/phaser/master/build/phaser.js"></script>
<div id="two-joint-robot" style="overflow: hidden;"></div>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'two-joint-robot', {
    create: create, update: update
});

var joint1, joint2;
var robot;

var cursors;

function drawJoint1() {
    // set a fill and line style
    joint1.beginFill(0xFF0000);
    joint1.lineStyle(3, 0xFF0000, 1);

    // draw a shape
    joint1.moveTo(0, 0);
    joint1.lineTo(50, 0);
    joint1.endFill();

}

function drawJoint2() {
    // set a fill and line style
    joint2.beginFill(0x0000FF);
    joint2.lineStyle(3, 0x0000FF, 1);

    // draw a shape
    joint2.moveTo(0, 0);
    joint2.lineTo(50, 0);
    joint2.endFill();
}


function create() {

    robot = game.add.group();

    joint1 = game.add.graphics(0, 0);
    joint2 = game.add.graphics(50, 0);

    robot.add(joint1);
    robot.add(joint2);
    robot.x = 100;
    robot.y = 100;

    drawJoint1();
    drawJoint2();

    cursors = game.input.keyboard.createCursorKeys();
}

function update() {
 if (cursors.up.isDown)
    {
        joint2.rotation -= 0.01;
    }
    if (cursors.down.isDown)
    {
        joint2.rotation += 0.01;
    }
     if (cursors.left.isDown)
    {
        robot.rotation -= 0.01;
    }
    if (cursors.right.isDown)
    {
        robot.rotation += 0.01;
    }
}