JSFiddle - React, Tailwind, and code Playground

by shohan4556

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.3/phaser.min.js"></script>
<div id="game"></div>

JavaScript

var BasicGame = {};

BasicGame.Game = function (game) {
    this.circleTimer = null;
    this.counterMax = 10;
    this.counter = null;
    this.counterDisplay = null;
    this.timer = null;
};

// set Game function prototype
BasicGame.Game.prototype = {
    create: function () {
        this.circleTimer = this.game.add.graphics(this.game.world.centerX, this.game.world.centerY);
        
        this.counter = 10;
        this.counterDisplay = this.add.text(this.world.centerX, this.game.world.centerY, '' + this.counter, { font: '50px Arial', fill: '#ffffff' });
        this.counterDisplay.anchor.setTo(0.5, 0.5);

        this.timer = this.game.time.create(false);
        this.timer.loop(1000, this.updateCounter, this);
        this.timer.start();
    },
    updateCounter: function () {
        this.counter--;
        this.counterDisplay.text = '' + this.counter;
        
        this.circleTimer.clear();
        this.circleTimer.lineStyle(8, 0xffd900);

        this.circleTimer.arc(0, 0, 135, this.game.math.degToRad(-90), this.game.math.degToRad(-90+(360/this.counterMax)*(this.counterMax-this.counter)), false);
        this.circleTimer.beginFill(0xFF3300);
        this.circleTimer.endFill();
        
        if(this.counter === 0) {
      		this.timer.destroy();
        }
    }
};

(function () {
    var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game');

    game.state.add('Game', BasicGame.Game);

    game.state.start('Game');
})();