Countdown and timer : completly lost

[RavN 0]

Hi everyone,

// If I make grammar mistakes, please excuse me. I'm still not fluent in English ahah

I'm a beginner on Phaser, had to have a look into that for my courses. I'm now upgrading a basic tutorial and I want to use a timer (a countdown) in that game but it really doesn't work, it only create a black screen.

To do this, I followed this tutorial : https://www.joshmorony.com/how-to-create-an-accurate-timer-for-phaser-games/

I tried other, without success. Some were a bit to hard to understand, others were pretty ugly ! So here is the code I used , can you help me ? : 

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    // on ajoute un diamant
    game.load.image('dmd','assets/diamond.png')
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var player;
var platforms;
var cursors;

var stars;
var diamonds;
var score = 0;
var scoreText;
var countdown;

function create() {

    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');

    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;

    // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);

    //  This stops it from falling away when you jump on it
    ground.body.immovable = true;

    //  Now let's create two ledges
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
    

    ledge = platforms.create(-150, 250, 'ground');
    ledge.body.immovable = true;
    
    ledge = platforms.create(-100, 510, 'ground');
    ledge.body.immovable = true;

    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  We need to enable physics on the player
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 350;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);

    //  Finally some stars to collect
    stars = game.add.group();
    //  We will enable physics for any star that is created in this group
    stars.enableBody = true;
    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 10; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');
        //  Let gravity do its thing
        star.body.gravity.y = 15;
        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.2 + Math.random() * 0.2;
    }
    
    
    // On ajoute les diamants
    diamonds=game.add.group();
    diamonds.enableBody=true;
    
    // création des diamants dans l'espace de jeu
    for (var i = 0; i < 3; i++) {
        var dmd = diamonds.create(i * 70, 0, 'dmd');
        dmd.body.gravity.y = 30;
        dmd.body.bounce.y = 0.1 + Math.random() * 0.2;
    }
    
    countdown.startTime = new Date();
    countdown.totalTime = 120;
    countdown.timeElapsed = 0;
    countdown.createTimer();
    countdown.gameTimer = game.time.events.loop(100, function(){
        countdown.updateTimer();
    });
    
    //  The score
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

    //  Our controls.
    cursors = game.input.keyboard.createCursorKeys();
    
}

function update() {

    //  Collide the player and the stars (et les diamants du coup) with the platforms
    game.physics.arcade.collide(stars, platforms);
    game.physics.arcade.collide(diamonds, platforms);
    game.physics.arcade.collide(player, platforms);
    
    //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
    game.physics.arcade.overlap(player, stars, collectStar, null, this);
    // idem pour les diamants
    game.physics.arcade.overlap(player, diamonds, collectDiamonds, null, this);

    //  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 4;
    }
    
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }

}

function collectStar (player, star) {
    
    // Removes the star from the screen
    star.kill();

    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;

}

function collectDiamonds (player, dmd) {
    
    dmd.kill();
    score += 50;
    scoreText.text = 'Score: ' + score;

}

function createTimer(){
 
    var countdown = this;
 
    countdown.timeLabel = countdown.game.add.text(countdown.game.world.centerX, 100, "00:00", {font: "100px Arial", fill: "#fff"});
    countdown.timeLabel.anchor.setTo(0.5, 0);
    countdown.timeLabel.align = 'center';
 
}

function updateTimer (){
 
    var countdown = this;
 
    var currentTime = new Date();
    var timeDifference = countdown.startTime.getTime() - currentTime.getTime();
 
    //Time elapsed in seconds
    countdown.timeElapsed = Math.abs(timeDifference / 1000);
 
    //Time remaining in seconds
    var timeRemaining = countdown.timeElapsed;
 
    //Convert seconds into minutes and seconds
    var minutes = Math.floor(countdown.timeElapsed / 60);
    var seconds = Math.floor(countdown.timeElapsed) - (60 * minutes);
 
    //Display minutes, add a 0 to the start if less than 10
    var result = (minutes < 10) ? "0" + minutes : minutes;
 
    //Display seconds, add a 0 to the start if less than 10
    result += (seconds < 10) ? ":0" + seconds : ":" + seconds;
 
    countdown.timeLabel.text = result;
    
    if(countdown.timeElapsed >= countdown.totalTime){
    // On cherche la fin du timer
    result = "Rate !";
        
    }
}