Incremental Game - Creating Loop Function

[QuimB]

Hello all,

I'm trying to build a simple incremental game to learn Phaser and Javascript. I'm using MAMP with Phaser 2.4.8.

The game has a button (aptly named buyWorker) which should add +1 clicks/per second.

Tried using the update function but it didn't work. Since it runs 60 times per second, the numbers skyrocket really quickly.

Spent some time googling but the search results were too complex, poorly written or obsolete.

Can Phaser help with that or do I need to create a custom function? 

Thanks.

Here's the code:

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

var scoreText;
var clicks;
var clicksPerSecond = 0;
var workers = 0;
var workerCost = 15;
var workerPerSec = 1;


function preload() {


    game.load.image('clickBox', 'assets/ClickMe.png');
    game.load.image('generator1', 'assets/Gen1.png');
    game.stage.backgroundColor = '#182d3b';

    // If browser tab is displayed, game runs when out of focus. Needs fixing.
    game.stage.disableVisibilityChange = true; 


}

function create() {

	clicks = 0;
    button = game.add.button(game.width/2, game.height/2, 'clickBox', upScoreText);
    btn_buyWorker = game.add.button(30,400, 'generator1', buyWorker);

    scoreText = game.add.text(30, 30, "CLICKS: " + clicks + "   WORKERS: " + workers, {
        font: "20px Arial",
        fill: "#ffffff",
        align: "left"

    });

    button.scale.x = 0.5;
    button.scale.y = 0.5;
    button.anchor.setTo(0.5);

    button.inputEnabled = true;
    btn_buyWorker.inputEnabled = true;


}

function update () {

            clicks += workers;
            scoreText.setText("CLICKS: " + clicks + 
                              "\nCLICKS PER SEC: " + clicksPerSecond +  
                              "\nWORKERS: " + workers);
}

function upScoreText () {

    	clicks++;
}


//Need to find a way to disable button if player doesn't have enough clicks to buy it
function buyWorker () {

            if (clicks >= 15)
            {
                workers++;
                clicks -= 15;
            }


}

 

[AzraelTycka]

Hello,

I'm not sure if I get it correctly. But in Phaser there are timed events which you can use, just specify time after some function is supposed to be called, the function and it's context and the framework takes care of it for you.

An example of timed event is for example here in phaser examples and here. Also check the docs directly to see all settings and options you have.

Hope this was what you were looking for. Apart from that you can just store time differences between update calls until you get the time value you desire but that's probably how phaser timer works anyway (well similarly) I just wanted to point it out to you for your JS experience.

[QuimB]

Thanks AzraelTycka, seems I got it working.

At the moment, the Phaser documentation is a little too overwhelming with it's technical jargon, but I managed to solve the problem with a bit of copy/pasting from the examples you provided.

I'll need to study this a bit further before advancing my project.

Here's the updated code. Maybe it will be useful to other newbies.

Thanks again.

 

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

var scoreText;
var timer;
var clicks;
var clicksPerSecond = 0;
var workers = 0;
var workerCost = 15;
var workerPerSec = 1;


function preload() {


    game.load.image('clickBox', 'assets/ClickMe.png');
    game.load.image('generator1', 'assets/Gen1.png');
    game.stage.backgroundColor = '#182d3b';

    // If browser tab is displayed, game runs when out of focus. Needs fixing.
    game.stage.disableVisibilityChange = true; 


}

function create() {

	clicks = 0;
    button = game.add.button(game.width/2, game.height/2, 'clickBox', upScoreText);
    btn_buyWorker = game.add.button(30,400, 'generator1', buyWorker);

    scoreText = game.add.text(30, 30, "CLICKS: " + clicks + "   WORKERS: " + workers, {
        font: "20px Arial",
        fill: "#ffffff",
        align: "left"

    });

    button.scale.x = 0.5;
    button.scale.y = 0.5;
    button.anchor.setTo(0.5);

    button.inputEnabled = true;
    btn_buyWorker.inputEnabled = true;



    timer = game.time.create(false);
    timer.loop(1000, updateCounter, this)
    timer.start();

    function updateCounter () {

        clicks += clicksPerSecond;

}



}

function update () {

            //clicks += workers;
            scoreText.setText("CLICKS: " + clicks + 
                              "\nCLICKS PER SEC: " + clicksPerSecond +  
                              "\nWORKERS: " + workers);
}

function upScoreText () {

    	clicks++;
}


//Need to find a way to disable button if player doesn't have enough clicks to buy it
function buyWorker () {

            if (clicks >= 15)
            {
                workers++;
                clicks -= 15;
                clicksPerSecond += 1;
            }

}