JSFiddle - React, Tailwind, and code Playground

by gbear

HTML

<script src="https://cdn.rawgit.com/SeminYun/test/master/asset/pixi.js"></script>

JavaScript

var spineContainer = null;


    function twoDToIso(x, y, z) {
        var tempPt = new PIXI.Point(0,0);
        tempPt.x = x;
        tempPt.y = (y / 2) - z;
        return(tempPt);
    }

var Arrow = function() {
	PIXI.Container.call(this);
	
	//set default pos like top of view isometric
	this.position_s = new PIXI.Point(100, 100);
	//this.position_e = new PIXI.Point(Math.random()*200 + 100, Math.random()*200 + 100);
	this.position_e = new PIXI.Point(200 + Math.random()*300, Math.random()*500);
		
	//calcaulate new pos looks like 
    this.position_e.x = this.position_e.x;
    this.position_e.y = this.position_e.y*2;
	
	this.duration = 2.0;
	this.gravity = 10.0*20;
	
	this.velocity = new PIXI.Point();
	this.velocity.x = this.position_e.x/this.duration;
	this.velocity.y = this.position_e.y/this.duration;
	this.velocity.z = ((this.gravity*Math.pow(this.duration,2))/2)/this.duration
		
	this._start;
	this._end;
	
	console.log(this.position_e, this.velocity);
	
	this.sprite = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/SeminYun/test/master/asset/arrow01.png');
	this.addChild(this.sprite);
}

Arrow.prototype = Object.create( PIXI.Container.prototype );
Arrow.prototype.constructor = Arrow;

Arrow.prototype.start = function() {
	this._start = Date.now();
	this._end   = Date.now() + this.duration*1000;
};

Arrow.prototype.update = function() {  
	if(this._start > Date.now()) return;	
	if(this._end <= Date.now()) return;
	
	var elapsed = Date.now();
	
	var t = (elapsed - this._start)/1000;	
	console.log(t);

    var x = 0;
    var y = 0;
    var z = 0;

    var vx = this.velocity.x*t;
    var vy = this.velocity.y*t;
    var vz = this.velocity.z*t - this.gravity*Math.pow(t,2)/2;
	
	    
    var new_pos = twoDToIso(vx, vy, vz);
    vx = new_pos.x;
    vy = new_pos.y;		
	
	x = this.position_s.x + vx;
    y = this.position_s.y + vy;
	
		
	var from = this.position;
	this.rotation = Math.atan2(y - from.y, x - from.x)
	
	this.position.x = x;
	this.position.y =...