I'm developing an app and I'm interested in ways to achive a Candy Crush Saga Type countdown life system. My app is developed in phonegap (so html, css jquery and jquery mobile) and untill now I havn't figured out how to work with an external file as I'm thinking it's needed in this algorithm. I want therefore to have 5 lives and each of them dissapears when the user fail or quit the lvl and regenerates after, lets say, 10 minutes. How can I keep the counter active if the app is closed? Or a date substraction algorithm...

If somebody have knowledge in Phonegap I would be very grateful if he could help me with a jsfiddle wich I'll implement further in my app.

I'm also not sure what to use: localstorage vs DB

I'll give 50 of my bounty for the one who can help me with a jsfiddle example for this issue.

Thank you!

I'm developing an app and I'm interested in ways to achive a Candy Crush Saga Type countdown life system. My app is developed in phonegap (so html, css jquery and jquery mobile) and untill now I havn't figured out how to work with an external file as I'm thinking it's needed in this algorithm. I want therefore to have 5 lives and each of them dissapears when the user fail or quit the lvl and regenerates after, lets say, 10 minutes. How can I keep the counter active if the app is closed? Or a date substraction algorithm...

If somebody have knowledge in Phonegap I would be very grateful if he could help me with a jsfiddle wich I'll implement further in my app.

I'm also not sure what to use: localstorage vs DB

I'll give 50 of my bounty for the one who can help me with a jsfiddle example for this issue.

Thank you!

• javascript
• jquery
• cordova
• phonegap-plugins
• cordova-3

• 3 Doubt its a good idea to store "lifes" on a loca, manipulateable storage. Especially when you think about having an online leaderbord/petition among people - which most games happen to be about.. I'd remend you to do a small server backend (NodeJS would be fine), that will save and return the lifes of a player. Whenever somebody starts a level, load the level data from server so people loose a life everytime they start a level. For regeneration, save a timestamp and if on any request last life was given > 10 minutes ago, add 1-5 accordingly to how much time have passed since. – user1610743 Commented Apr 10, 2014 at 22:38
• @user1610743 Well the game isn't online.. As in candy crush when I start a lvl a life is put in the game and if I loose the life is lost if I pass the lvl and I reach the next one the life stays the same. I'm also not sure what to use: localstorage vs DB? The part with the timestamp is good but what if I lost 3 of the total 5 lifes and while I'm playing the second one the 3'rd must regenerate and than the 4'th and than the 5'th if I dont loose. If I loose also the second one is lost... I'm new to jquerry, phonegap and I'm lost. If you have more knowledge can you please post a jsfiddle example? – Alex Stanese Commented Apr 10, 2014 at 22:47

3 Answers 3

Edit: Sorry this is some pseudo code based off PHP - but you don't need crazy algorithms or anything

I don't write phone apps, but I know what you're trying to do and you're thinking about it too hard. You don't need to run the counter while the app is closed. You can save a timestamp from when the game is over, and reference it the next time the app is opened.

start_game();

if($lives > 0){ //run game
    if($death === true){
        $lives = $lives - 1;
        $timer_value = date(Y-m-d h:i:s);
        end_game($timer_value); //save starting time locally in "end_game" function
    }

} else {
    //buy more lives
}

Now let's say the user closes it and opens up. You can reference the current time versus the saved time. For every 10 minutes past then, add a life.

$old_time = strtotime($timer_value); //635393400
$cur_time = strtotime(date(Y-m-d h:i:s)); //635394600

if( $cur_time - $old time > 600 ) { $lives = $lives + 1; }
if( $cur_time - $old time > 1200 ) { $lives = $lives + 2; }
if( $cur_time - $old time > 1800 ) { $lives = $lives + 3; }
if( $cur_time - $old time > 2400 ) { $lives = $lives + 4; }
if( $cur_time - $old time > 3000 ) { $lives = $lives + 5; }
if( $lives > 5 ) { $lives = 5; }

That's some awful code lol, but you gut the idea. You don't need to run a timer in the background (you can't really with the app being closed, without doing some sort of server checks online, which is basically the same thing, but hosting all that personal life records in the cloud instead of on the phone.

In this code I use the localStorage since they are available on all platforms and web.
Using local storage you will get better cross platform patibility:

• WebStorage (localStorage & sessionStorage)
• IndexedDB
• SQL-Storage

Localstorage is array, but every element can only have string in it (using JSON we can store anything, that is not recursive). It is about 5MB for web. I guess it is limitless for mobile app. SessionStorage is deleted when user close browser and I am not sure how it will do on mobile.

Just a small date validator...

Date.prototype.isValid = function(first_argument) {
    if ( Object.prototype.toString.call(this) !== "[object Date]" )
        return false;
    return !isNaN(this.getTime());
}

The main var declaration among retrieving variables from localStorage

var timeout = null;
var maxlife = 5;
if (undefined === localStorage.life) {
    localStorage.life = maxlife;
}
if (undefined === localStorage.date||localStorage.date=="") {
    localStorage.date = "";
    var date = null;
}else{
    var date = new Date(Number(localStorage.date));
    if(!date.isValid()){
        date = null;
    }
}
var timeoutTime = 5 * 60000;
var life = Number(localStorage.life);

Lose life, set date if none exist yet. Set a timeout too and subtract life (& write it into localstorage).

function loseLife() {
    if (null === date) {
        date = new Date();
        localStorage.date = date.getTime();
        timeout = setTimeout(function(){addLife()}, timeoutTime);
    }
    life--;
    localStorage.life = life;
    lives.innerHTML = life;
    console.log(life);
}

Add life, set date new date or reset the date pletely. Set a timeout, if needed, and add a life (& write it into localstorage).

function addLife() {
    life++;
    localStorage.life = life;
    if (life < maxlife) {
        date = new Date();
    localStorage.date = date.getTime();
        timeout = setTimeout(function(){addLife()}, timeoutTime);
    } else {
        date = null;
    localStorage.date = "";
    }
    lives.innerHTML = life;
}

Here you may need to change the hooks for blur (window not visible) and focus (window visible once again). Blur just clear timeout so it don't mess with us.

window.addEventListener('blur', function () {
    clearTimeout(timeout);
});

This function check how many time it can subtract our time needed to get life from difference of now and the date we lost a life.

function tillNow(){
    if (life < maxlife&&date!=null) {
        var d = new Date();
        var diff = d - date;
        while (diff - timeoutTime > 0) {
            diff = diff - timeoutTime;
            if (life < maxlife) {
                life++;
                console.log("add");
            }else{
                date = null;
                localStorage.date = "";
                break;
            }
        }
        localStorage.life = life;
        if (life < maxlife) {
            date = new Date((new Date()).getTime()-diff);
            localStorage.date = date.getTime();
            timeout = setTimeout(function(){addLife()}, timeoutTime-diff);
        }
    }
    lives.innerHTML = life;
}

Focus just call tillNow()

window.addEventListener('focus', function () {
    tillNow();
});

Onload do the same as focus, but fills the div with a value initially...

window.onload=function(){
    var lives = document.getElementById("lives");
    lives.innerHTML = life;
    tillNow();
}

Demo sorry couldn't do jsFiddle of codepen since they don't like local storage. (the demo use 15sec as timer to get new life ;) I am impatient )

I would use logic similar to what Xhynk suggested. I would use a variable like milisecondsUntilYouGainALife and when you lose the first life, set this variable = 1000ms*60sec*10min = 600000. Then first line (or so) in main loop, record the current time. next time it hits the loop also record the time and subtract the difference from milisecondsUntilYouGainALife. If < 0, lives++. Also make sure in your "close the app" function you record the time and check that time in the main loop.

pseudocode:

function game(){
    ...
    while(mainLoop){
         oldTime = curTime
         curTime = GetTime() //I Forget the exact code to get the miliseconds
         deltaTime = curTime - oldTime
         if(deltaTime > milisectionsUntilYouGainALife){
            if(lives < MAX_LIVES){
                lives++
                milisecondsUntilYouGainALife - deltaTime
             }
          }

    }
}
function AppClosing(){
    curTime = GetTime()
 }
function LoseALife(){ 
    milisecondsUntilYouGainALife += 600000
}

There may be something im missing, but this should get you on the right track!