Question

我正在开发一款应用程序，我对如何实现Candy Crush Saga Type倒计时生活系统感兴趣。我的应用程序是在phonegap（所以html，css jquery和jquery mobile）中开发的，直到现在我还没有弄清楚如何使用外部文件，因为我认为这个算法需要它。因此，我希望有5个生命，当用户失败或退出lvl时，每个生命都会消失，然后在10分钟之后重新生成。如果应用程序关闭，如何使计数器保持活动状态？或日期减法算法......

如果有人对Phonegap有所了解，我会非常感激，如果他能帮我解决一个问题，我会在我的应用程序中进一步实施。

我也不确定要使用什么：localstorage vs DB

我会给那些可以帮助我解决这个问题的一个例子的人给予我50分的赏金。

谢谢！

Answer 1

编辑：对不起，这是一些基于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; }

这是一些可怕的代码大声笑，但你把这个想法放在了一边。你不需要在后台运行一个计时器（你不能真正关闭应用程序，而不在线进行某种服务器检查，这基本上是相同的，但托管所有的个人生活记录在云中而不是在手机上。

Answer 2

我会使用类似于Xhynk建议的逻辑。我会使用像milisecondsUntilYouGainALife这样的变量，当你失去第一次生命时，设置这个变量= 1000ms * 60sec * 10min = 600000.然后在主循环中第一行（或左右）记录当前时间。下次它击中循环时也会记录时间并从milisecondsUntilYouGainALife中减去差异。如果＆lt; 0，生活++。另外请确保在您关闭应用程序＆＃34;功能你记录时间并检查主循环中的时间。

伪代码：

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
}

可能会遗漏一些东西，但这会让你走上正轨！

Answer 3

在此代码中，我使用localStorage，因为它们可在所有平台和网络上使用使用本地存储，您将获得更好的跨平台兼容性：

WebStorage（localStorage＆amp; sessionStorage）
IndexedDB
SQL-Storage

Localstorage是数组，但是每个元素只能包含字符串（使用JSON我们可以存储任何东西，这不是递归的）。网络大概是5MB。我想这对移动应用来说是无限的。用户关闭浏览器时会删除SessionStorage，我不确定它将如何在移动设备上执行。

只是一个小日期验证员......

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

从localStorage

中检索变量的主要var声明

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

添加生命，设置日期新日期或完全重置日期。如果需要，设置超时，并添加生命（并将其写入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;
}

焦点只需调用untilNow（）

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

Onload与焦点相同，但最初用div填充div ...

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

Demo抱歉不能使用codepen的jsFiddle，因为他们不喜欢本地存储。（演示使用15秒作为计时器以获得新的生命;）我不耐烦）

Candy Crush Saga类型倒计时生活系统jQuery＆amp; PhoneGap的

3 个答案: