JSFiddle - React, Tailwind, and code Playground

by espace3d

HTML

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

JavaScript

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

function preload() {
	game.load.image('circle', 'https://s3.postimg.org/bb4aql1lf/touch.png');
}

var _tw_name=[]
var flag=true
var circle
var delay_circle_timer = 1500

//tween
tw = (obj,tw_action,tw_name,f) => {
	f=true
	tw_action(obj,tw_name)
}

// declaration of tw_action
tw_action= (obj,tw_name) =>{
	obj.alpha=.5
	obj.scale.setTo(.1,.1)
	tw_name[0]= game.add.tween(obj.scale).to({x:1.5,y:1.5},1000,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name[0] = game.add.tween(obj).to({alpha:0.1},1000,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name[0].onStart.add(()=> {obj.visible=true})
}

//stop tween
stop_tw = (tw_name,f,obj) => {
	if(f){
		obj.visible=false
		game.tweens.remove(tw_name[0])
		f=false
	}
}

function create() {
	circle=game.add.sprite(200,200,'circle')
	circle.anchor.setTo(.5)

	//initiate first tween
	tw(circle,tw_action,_tw_name,flag)

	//simulate a click
	//stop animation and then relaunch animation
	simulate_click=() =>{	
		game.time.events.loop( game.rnd.integerInRange(400,2200),() => {stop_tw(_tw_name,flag,circle);tw(circle,tw_action,_tw_name,flag)})
	}
	game.time.events.add( 2200,simulate_click)
}