QuimB

Incremental Game - Creating Loop Function

Recommended Posts

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;
            }


}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
            }

}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.