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;


var Arrow = function() {
	PIXI.Container.call(this);
	this.position_s = new PIXI.Point(0, 0);
	this.position_e = new PIXI.Point(Math.random()*200 + 100, Math.random()*200 + 100);
	this.duration = 2000;
	
	this._start;
	this._end
	console.log(this.position_s, this.position_e)
	
	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;
};

Arrow.prototype.update = function() {  
	if(this._start > Date.now()) return;	
	if(this._end <= Date.now()) return;
	
	var elapsed = Date.now();
	
	var t = Math.min(1.0,(elapsed - this._start)/this.duration);
	
	console.log(t, elapsed, this._start, this.duration);
	
	var sx = this.position_s.x;
	var sy = this.position_s.y
	var ex = this.position_e.x;
	var ey = this.position_e.y;
	var x = sx+(ex-sx)*t;
	var y = sy+(ey-sy)*t;
	
	
		
	var from = this.position;
	this.rotation = Math.atan2(y - from.y, x - from.x)
	
	this.position.x = x;
	this.position.y = y;
	
	console.log(x, y);
	
}

function runMain() {
    var renderer = PIXI.autoDetectRenderer(1920, 1080);
    document.body.appendChild(renderer.view);		

// create the root of the scene graph
    var stage = new PIXI.Container();
	
	var background = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/SeminYun/test/master/asset/29.jpg');
	stage.addChild(background);
	
  	var elased = Date.now();
    var delta = 0;
	
	var arrow = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/SeminYun/test/master/asset/arrow01.png');
	
	var button = PIXI.Sprite.fromImage('https://raw.githubusercontent.com/SeminYun/test/master/asset/button_plus1.png');
	
		
	button.interactive = true;
	button.mousedown = button.touchstart = function(data) {        
       ...