JSFiddle - React, Tailwind, and code Playground

by min shu

HTML

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

JavaScript

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'phaser-example', { 
	create: create
});

var radius = 200, 
		segments = 6, 
		pinRadius = 8,
		radian = 360 / segments * Math.PI / 180;
var wheel, arrow, wheelAxis, arrowAxis;

function create() {

	this.game.physics.startSystem(Phaser.Physics.P2JS);
	
	// wheel
	wheel = game.add.sprite(game.world.centerX, game.world.centerY, createCircle('wheel', radius, 'gray'));
	wheel.anchor.setTo(0.5);
	game.physics.p2.enable(wheel, true);
	wheel.body.mass = 15;
	wheel.body.clearShapes();
	wheel.body.static = true;
	
	wheelAxis = game.add.sprite(wheel.position.x, wheel.position.y, createAxis('axis'));
	wheelAxis.anchor.setTo(0.5);
	game.physics.p2.enable(wheelAxis, true);
	
	const a = game.physics.p2.createLockConstraint(wheel, wheelAxis, [0, 0], 0);
  game.physics.p2.addConstraint(a);
	
	// arrow
	arrow = game.add.sprite(wheel.world.x, wheel.world.y - radius - 18, createArrow('arrow'));
	game.physics.p2.enable(arrow, true);
	arrow.body.mass = 0.2;
	arrow.pivot.setTo(0, -34 / 4);
	arrow.body.addPolygon({}, 0, 0, 12, 0, 6, 34, 0, 0);
	
	arrowAxis = game.add.sprite(arrow.position.x, arrow.position.y, createCircle('arrowAxis', 1, 'white'));
  game.physics.p2.enable(arrowAxis, true);
	arrowAxis.body.static = true;
	arrowAxis.body.clearCollision();
	game.physics.p2.createRevoluteConstraint(arrow, [0, -34 / 4], arrowAxis, [0, 0]);
	
	// Arrow bounce
	var springSpriteLeft = game.add.sprite(arrow.x - 15, arrow.y + 25, createCircle('springSpriteLeft', 5, 'rgba(0, 0, 0, 0)'));
	var springSpriteRight = game.add.sprite(arrow.x + 15, arrow.y + 25, createCircle('springSpriteRight', 5, 'rgba(0, 0, 0, 0)'));
	springSpriteLeft.anchor.setTo(0.5);
	springSpriteRight.anchor.setTo(0.5);
	game.physics.p2.enable([springSpriteLeft, springSpriteRight]);
	springSpriteLeft.body.static = true;
	springSpriteRight.body.static =...