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, update : update });

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

var circle
var tw_name
var tap_ready = true
var flag=true
var delay_circle_timer = 1500

//tween on the circle
start_tw = (obj,tw_action,tw_name,f) => {
	tap_ready = true
	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= game.add.tween(obj.scale).to({x:1.5,y:1.5},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name = game.add.tween(obj).to({alpha:0},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1)
	tw_name.onStart.add(()=> {obj.visible=true})
}

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

tap = (th) => {
	game.input.onTap.add(onTap,th);

	function onTap(pointer, doubleTap) {
			if (!doubleTap && tap_ready){
				//protect the function onTap to avoid double tap
				tap_ready=false
				//stop the tween on the circle
				stop_tw(tw_name,flag,circle)
				// initiate another tap_ready randomly
				game.time.events.add(game.rnd.integerInRange(400,2200),() => {start_tw(circle,tw_action,tw_name,flag)})
			}
	}
}

function create() {
	circle=game.add.sprite(400,300,'circle')
	circle.anchor.setTo(.5)
	circle.inputEnabled = true

	//initiate first tween
	start_tw(circle,tw_action,tw_name,flag)
}
function update() {
tap(circle)
}