JSFiddle - React, Tailwind, and code Playground

by chongdashu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>

JavaScript

var game = new Phaser.Game(640, 480, Phaser.AUTO, '', {
    preload: preload,
    create: create,
    update: update,
    render: render,
    collectCoin: function () {
        console.warn("HEY!");
        coin.kill();
    },
});

function preload() {

    game.load.crossOrigin = 'anonymous';
    game.load.image('booty', 'http://i.imgur.com/CD5TrXo.png');
    game.load.image('villan', 'http://i.imgur.com/9e9tX9W.png');
}

var player;
var coin;

function create() {

    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.setImpactEvents(true);

    player = game.add.sprite(350, this.world.height - 150, 'villan');
    this.physics.p2.enable(player, true);
    player.body.setCircle(22);
    player.body.fixedRotation = true;
    player.body.mass = 4;

    coin = this.add.sprite(450, this.world.height - 450, 'booty');
    this.physics.p2.enable(coin, true);
    coin.body.setCircle(22);
    coin.body.fixedRotation = true;
    coin.body.mass = 4;
    

    var playerCollisionGroup = game.physics.p2.createCollisionGroup();
    var coinCollisionGroup = game.physics.p2.createCollisionGroup();

    player.body.setCollisionGroup(playerCollisionGroup);
    coin.body.setCollisionGroup(coinCollisionGroup);

    player.body.collides(coinCollisionGroup, this.collectCoin, this);
    coin.body.collides(playerCollisionGroup);
}

function update() {
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;
    if (this.input.keyboard.isDown(Phaser.Keyboard.W)) {
        player.body.velocity.y = -100;
    }
    if (this.input.keyboard.isDown(Phaser.Keyboard.D)) {
        player.body.velocity.x = +100;
    }
    if (this.input.keyboard.isDown(Phaser.Keyboard.S)) {
        player.body.velocity.y = 100;
    }
    if (this.input.keyboard.isDown(Phaser.Keyboard.A)) {
        player.body.velocity.x = -100;
    }
}


function render() {

}