Candy Crush Saga jQuery & Phonegap Countdown Type

Question

I am developing an application, and I'm interested in ways to achieve a Candy Crush Saga Type countdown system. My application is developed in phonegap (like html, css jquery and jquery mobile), and so far I have not understood how to work with an external file, since I think it is necessary in this algorithm. Therefore, I want to have 5 lives, and each of them disappears when the user fails or leaves the lvl and recovers after, say, 10 minutes. How can I keep the counter active if the application is closed? Or an algorithm for determining the date ...

If someone has knowledge in Phonegap, I would be very grateful if he would help me with jsfiddle, which I will implement further in my application.

I am also not sure what to use: localstorage vs DB

I will give 50 of my reward for someone who can help me with a jsfiddle example for this problem.

Thank!

Answer 1

I use in this code localStorageas they are available on all platforms and on the Internet.
Using local storage, you will get better compatibility between platforms:

• WebStorage (localStorage and sessionStorage)
• Indexeddb
• SQL storage

Localstorage - , ( JSON -, ). 5 . , . SessionStorage , , , .

...

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

var 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);

, , . - ( 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);
}

, reset . -, , ( 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;
}

( ) ( ). -, .

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

, , , , .

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

Now()

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

Onload , , div ...

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

Demo , jsFiddle codepen, . ( 15 , ;) )

Answer 2

: , - -, PHP, -

, , , . , . , , .

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
}

, . . 10 .

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

- LOL, . ( , - , , .

Answer 3

, , Xhynk. , milisecondsUntilYouGainALife, , = 1000 * 60 * 10 = 600000. ( ) . , , milisecondsUntilYouGainALife. < 0, ++. , " " .

:

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
}

, - , !