Rendering text from a timer

[shablizzam]

Hello Everyone,

 

I've been finding the discussion on here super helpful but I'm having a little trouble with a timer on a simple drag and drop game I have created to help me learn Phaser.

 

You can see how it functions here: http://www.shablizzam.com/wote/index-html

 

How to play:

There is a box and 4 possible answers.

Drag an answer to the box.

If it's incorrect, the sprite will go back to it's original position and change colour to red. The text above prompts you to try again.

If it's correct, it will snap to a position on the box and change colour to green.

It will also start a timer that restarts the game after 3 seconds.

The text above will read: "Good job! Try another one in 3 seconds"

Then it restarts.

 

What I would like to do is update the number in the string above the boxes when the correct answer is chosen. Here is my code. I only added the javascript. Any help or suggestions would be appreciated

Thanks!

 

<script type="text/javascript">

 

var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'gamestage', { preload: preload, create: create, update: update, render: render });

 

function preload() {

    // Load background and other graphics

game.load.image('background', 'assets/old-wood-table-top.jpg');

    // Load box

game.load.image('foodbox', 'assets/carboard-box.png');

    // Load 4 possible answers

    game.load.image('Wrong', 'assets/wrong.png');

    game.load.image('Wrong2', 'assets/wrong2.png');

    game.load.image('Wrong3', 'assets/wrong3.png');

    game.load.image('Correct', 'assets/correct.png');

 

}

 

    // Declare variables for use below

var box, yes, no, no2, no3, text;

 

    // For timer

var timer, timerEvent, timeText;

 

function create() {

 

    //  The table background

    game.add.sprite(0, 0, 'background');

    

    //  The Box

    box = game.add.sprite(325, 50, 'foodbox');

    // Add input handler to box for later use.

    box.inputEnabled = true;

    // Set box alpha to 0

    box.alpha = 0;

    //  Box bounces in

    game.add.tween(box).to( { y: 150 }, 1000, Phaser.Easing.Bounce.Out, true);

    // Fade box in as it bounces in

    game.add.tween(box).to( { alpha: 1 }, 1000, Phaser.Easing.Linear.None, true);

 

    // Create timer

    timer = game.time.create(false);

    timerEvent = timer.add(Phaser.Timer.SECOND * 3, nextQuestion, this);

    timeText = 3;

 

    //  The Answers

 

    //  Yes

    yes = game.add.sprite(550, 650, 'Correct');

    yes.inputEnabled = true;

    yes.input.enableDrag();

    yes.events.onDragStart.add(onDragStart, this);

    yes.events.onDragStop.add(onDragStop, this);

    yes.alpha = 0;

    game.add.tween(yes).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);

 

    // No

    no = game.add.sprite(150, 650, 'Wrong');

    no.inputEnabled = true;

    no.input.enableDrag();

    no.events.onDragStart.add(onDragStart, this);

    no.events.onDragStop.add(onDragStop, this);

    no.alpha = 0;

    game.add.tween(no).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);

 

    // No2

    no2 = game.add.sprite(350, 650, 'Wrong2');

    no2.inputEnabled = true;

    no2.input.enableDrag();

    no2.events.onDragStart.add(onDragStart, this);

    no2.events.onDragStop.add(onDragStop, this);

    no2.alpha = 0;

    game.add.tween(no2).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);

 

    // No2

    no3 = game.add.sprite(750, 650, 'Wrong3');

    no3.inputEnabled = true;

    no3.input.enableDrag();

    no3.events.onDragStart.add(onDragStart, this);

    no3.events.onDragStop.add(onDragStop, this);

    no3.alpha = 0;

    game.add.tween(no3).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);

 

    // Initial instructions in header

    text = game.add.text(50, 30, "Put the correct label on the box.", { font: "35px Arial", fill: "#ffffff" })

 

}

 

 

function update() {

 

}

 

function onDragStart(sprite, pointer) {

    

        text.text = "You have selected: " + sprite.key;

        text.fill = "#FFFFFF"

 

}

 

function onDragStop(sprite, pointer) {

    

    if (checkOverlap(box, yes))

    {

        // Move sprite onto box

        yes.position.y = 400;

        yes.position.x = 525;

        yes.angle = -22;

        yes.tint = 0x009933;

        // Create and start the timer to move on to next question

        timer.start();

        text.text = 'Good job! Try another one in ' + timeText + ' seconds';

 

    }

    else if (checkOverlap(box, no))

    {

        text.text = 'Please try again';

        text.fill = "#FF0000"

        // move sprite back to its starting position

        no.position.y = 600;

        no.position.x = 150;

        // change sprite colour to show it has been selected already

        no.tint = 0xFF0000;

 

    }

    else if (checkOverlap(box, no2))

    {

        text.text = 'Keep trying';

        text.fill = "#FF0000"

        no2.position.y = 600;

        no2.position.x = 350;

        no2.tint = 0xFF0000;

    }

    else if (checkOverlap(box, no3))

    {

        text.text = 'Try again. You can do it!';

        text.fill = "#FF0000"

        no3.position.y = 600;

        no3.position.x = 750;

        no3.tint = 0xFF0000;

    }

    else

    {

        text.text = 'Put the correct label on the box.';

    }

 

}

 

function checkOverlap(spriteA, spriteB) {

 

    var boundsA = spriteA.getBounds();

    var boundsB = spriteB.getBounds();

 

    return Phaser.Rectangle.intersects(boundsA, boundsB);

}

 

function nextQuestion() {

 

  game.state.restart();

 

}

 

function render() {

 

}

 

</script>

 

</body>

 

</html>

 

 

[shablizzam]

After some trial and error and reading... I think I've sorted this out. P.S. I am not a very experience coder so if there are ways to improve this code, by all means let me know.

 

I declared these variables:

 

var timer, currentTimer;

var counter = 5; // I want it to start at 5 and count down.

 

I put the following code in create();

 

currentTimer = game.time.create(false);

currentTimer.loop(Phaser.Timer.SECOND, updateTimer, this);

 

Then in the onDragStop(), I put this:

 

if (checkOverlap(box, yes))

    {

        timer = game.add.text(510, 30, '5 ' + 'seconds.', messageStyle);

        // Move sprite onto box

        yes.position.y = 400;

        yes.position.x = 525;

        yes.angle = -22;

        yes.tint = 0x009933;

        message.text = 'Good job! Try another one in ';

        // Create and start the timer to move on to next question

        currentTimer.start();

    }

 

And finally need to modify updateTimer() and nextQuestion() to:

 

function updateTimer() {

 

    counter -= 1;

    timer.setText(counter + ' seconds.');

 

    if (counter == 0) {

        currentTimer.stop();

        nextQuestion();

    }

 

}

 

function nextQuestion() {

 

    if (counter == 0) {

        counter = 5;

        game.state.restart();

}

 

So in this scenario, I think the timer never gets destroyed or reset but is simply stopped and changed to a value of 5. This might cause problems if I started adding states??? That is my next goal.

Then I also want to be able to use questions and answers from an array and have them put the designated places on the screen but in a random order. 

 

Cheers!