# Countdown Timer

**URL:** <https://phaser.discourse.group/t/countdown-timer/2471>\
**Category:** Phaser 3\
**Created:** [May 16, 2019, 9:29am UTC](https://phaser.discourse.group/t/countdown-timer/2471 "2019-05-16T09:29:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Faizan\_Ali](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/faizan_ali/32/964_2.png) [@Faizan\_Ali](https://phaser.discourse.group/u/Faizan_Ali)\
**Post date:** [May 16, 2019, 9:29am UTC](https://phaser.discourse.group/t/countdown-timer/2471/1 "2019-05-16T09:29:53Z")

</div>

Hi, I am trying to create a countdown timer but struggling to find/implement a successful code. I want it to start from 2 minutes and 30 seconds and countdown every second until it reaches 0. Any help would be appreciated as I am new to Phaser.

---

<div class="post-metadata">

**Author:** ![espace](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/espace/32/1405_2.png) [@espace](https://phaser.discourse.group/u/espace)\
**Post date:** [May 16, 2019, 10:06am UTC](https://phaser.discourse.group/t/countdown-timer/2471/2 "2019-05-16T10:06:37Z")

</div>

hi,

check this : [https://labs.phaser.io/view.html?src=src/time\timer%20event.js](https://labs.phaser.io/view.html?src=src/time%5Ctimer%20event.js)

Have a good day.

---

<div class="post-metadata">

**Author:** ![Faizan\_Ali](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/faizan_ali/32/964_2.png) [@Faizan\_Ali](https://phaser.discourse.group/u/Faizan_Ali)\
**Post date:** [May 16, 2019, 10:10am UTC](https://phaser.discourse.group/t/countdown-timer/2471/3 "2019-05-16T10:10:17Z")

</div>

thank you, I have looked at that specific code already however I cannot seem to get the minutes to work, any ideas on how I would edit that code to make it start from 2:30seconds and count down?

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [May 16, 2019, 10:31am UTC](https://phaser.discourse.group/t/countdown-timer/2471/4 "2019-05-16T10:31:53Z")

</div>

Hi @Faizan_Ali,  
You can try something like this (Phaser example modified):

```javascript
var config = {
    type: Phaser.CANVAS,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var text;
var timedEvent;

var game = new Phaser.Game(config);

function create ()
{
    console.log('create');
    // 2:30 in seconds
    this.initialTime = 150;

    text = this.add.text(32, 32, 'Countdown: ' + formatTime(this.initialTime));

    // Each 1000 ms call onEvent
    timedEvent = this.time.addEvent({ delay: 1000, callback: onEvent, callbackScope: this, loop: true });
}

function formatTime(seconds){
    // Minutes
    var minutes = Math.floor(seconds/60);
    // Seconds
    var partInSeconds = seconds%60;
    // Adds left zeros to seconds
    partInSeconds = partInSeconds.toString().padStart(2,'0');
    // Returns formated time
    return `${minutes}:${partInSeconds}`;
}

function onEvent ()
{
    this.initialTime -= 1; // One second
    text.setText('Countdown: ' + formatTime(this.initialTime));
}

```

Regards.

---

<div class="post-metadata">

**Author:** ![Faizan\_Ali](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/faizan_ali/32/964_2.png) [@Faizan\_Ali](https://phaser.discourse.group/u/Faizan_Ali)\
**Post date:** [May 16, 2019, 10:48am UTC](https://phaser.discourse.group/t/countdown-timer/2471/5 "2019-05-16T10:48:22Z")

</div>

Thank you so much

---

<div class="post-metadata">

**Author:** ![espace](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/espace/32/1405_2.png) [@espace](https://phaser.discourse.group/u/espace)\
**Post date:** [May 16, 2019, 10:52am UTC](https://phaser.discourse.group/t/countdown-timer/2471/6 "2019-05-16T10:52:15Z")

</div>

@jjcapellan could you help me on my post 😊 ?  
[How to enable multitouch ? jsfiddle inside](https://phaser.discourse.group/t/how-to-enable-multitouch-jsfiddle-inside/2422)

---

<div class="post-metadata">

**Author:** ![munibmir](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/munibmir/32/4429_2.png) [@munibmir](https://phaser.discourse.group/u/munibmir)\
**Post date:** [December 4, 2020, 8:57am UTC](https://phaser.discourse.group/t/countdown-timer/2471/7 "2020-12-04T08:57:33Z")

</div>

The timer stops if the tab is changed or if the window is minimized, how can we handle this ?

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/munibmir/mqcs47w9/1/)**

Regards,  
Munib Mir

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [December 4, 2020, 1:16pm UTC](https://phaser.discourse.group/t/countdown-timer/2471/8 "2020-12-04T13:16:54Z")

</div>

Hi,  
In your case you need to use [hidden](https://photonstorm.github.io/phaser3-docs/Phaser.Core.Events.html#event:HIDDEN) and [visible](https://photonstorm.github.io/phaser3-docs/Phaser.Core.Events.html#event:VISIBLE__anchor) events of the game object.  
Something like this:

```javascript
// In your scene.create() function 
this.hiddenTimeStamp = 0;
this.game.events.on('hidden', () => {
    this.hiddenTimeStamp = performance.now();
    });

this.game.events.on('visible', () => {
    let elapsedTime = Math.floor((performance.now() - this.hiddenTimeStamp)/1000); //seconds
    this.initialTime -= elapsedTime;
    })
//...

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 9, 2020, 4:46am UTC](https://phaser.discourse.group/t/countdown-timer/2471/9 "2020-12-09T04:46:46Z")

</div>

A simple way to do this is to create a timer event with a very long delay and no callback, then read its `getRemainingSeconds()`.

https://codepen.io/samme/embed/preview/ExKGJJL?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ExKGJJL

---

<div class="post-metadata">

**Author:** ![ajmadmax](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ajmadmax/32/4448_2.png) [@ajmadmax](https://phaser.discourse.group/u/ajmadmax)\
**Post date:** [December 9, 2020, 9:10am UTC](https://phaser.discourse.group/t/countdown-timer/2471/10 "2020-12-09T09:10:37Z")

</div>

you saved my day…!