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');
	game.load.image('rect','https://s26.postimg.org/ci44mlog9/dalle.png')
	game.load.image('player','https://s26.postimg.org/ikbrd3cw9/bullet_color.png')
}

var player=[]
var enemy
var circle
var tw_name
var tap_ready = true
var flag=true
var delay_circle_timer = 2500
var counter = -1

//tween on the circle
start_tw = (obj,tw_action,tw_name,f) => {
	console.log("start")
	tap_ready = true
	console.log(tap_ready,"start")
	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
	}
}

//launch player and start counter
launch_player = (obj)=> {
	counter++
	obj[counter].body.velocity.y=-100
}

hide_player_and_start_tw = (obj) => {
	obj.body.enable=false
	obj.visible=false
	start_tw(circle,tw_action,tw_name,flag)
}

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

	function onTap(pointer, doubleTap) {
		if (!doubleTap && tap_ready){
			tap_ready=false
			//stop the tween on the circle
			stop_tw(tw_name,flag,circle)
			//launch the player
			launch_player(player)
			//delay for reset tap_ready
			game.time.events.add(500,() => {tap_ready = true})

		}
	}
}

function create() {
	game.physics.startSystem(Phaser.Physics.ARCADE);

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

	enemy = game.add.sprite(400,100,'rect')
 ...