Question

Note that this is a follow-up question from my previous one: “How to memorize user’s progress through the application?“.

After the answers, I understood that the mistake was to use Javascript to determine whether the user won the game. So I moved the logic into my controller: I save the UNIX timestamp into the session when the user starts the level, and calculate the difference when the user ends it. If it took no more than X seconds for the user to complete the level, I allow him/her to access the next one, and so on and so forth.

Everything worked fine, until I decided to introduce a client-side timer made in Javascript. The timer isn’t obviously accurate as the PHP one, since it relies on the user’s CPU and not on the server’s one. So, the two timers are not synchronized. The game still works when the time frame is large (e.g. the user has to complete the level between 4 and 10 seconds), but it doesn’t work as expected when the time frame is smaller (1 or 2 seconds). Even if the user clicks during the winning time frame, PHP will tell him he didn’t win.

I’ve made some tries and here are my results:

|===========================|
| # |  PHP  |   JS  | Ratio |
|===========================|
| 1 |  6.20 |  5.29 |  1.17 |
| 2 |  7.32 |  6.27 |  1.16 |
| 3 |  2.89 |  2.24 |  1.29 |
| 4 | 22.56 | 20.13 |  1.12 |
| 5 | 50.15 | 45.24 |  1.10 |
|===========================|

(Yes, I know, this is the worst ASCII table ever made.)

And this is the timer I’ve made using jQuery (I’m not really trained with this language, so it’s probably also the worse Javascript timer ever made):

$(document).ready(function() {
    window['time'] = {
        'cseconds': 0,
        'dseconds': 0,
        'seconds': 0,
        'minutes': 0,
        'hours': 0
    };

    $("#timer").everyTime(10, function() {
        window['time']['cseconds'] += 1;

        if (window['time']['cseconds'] > 9) {
            window['time']['cseconds'] = 0;
            window['time']['dseconds'] += 1;
        }

        if (window['time']['dseconds'] > 9) {
            window['time']['dseconds'] =  0;
            window['time']['seconds']  += 1;
        }

        if (window['time']['seconds'] > 60) {
            window['time']['seconds'] =  0;
            window['time']['minutes'] += 1;
        }

        if (window['time']['minutes'] > 60) {
            window['time']['minutes'] =  0;
            window['time']['hours']   += 1;
        }

        cseconds = window['time']['cseconds'].toString();
        dseconds = window['time']['dseconds'].toString();
        seconds  = window['time']['seconds'].toString();
        minutes  = window['time']['minutes'].toString();
        hours    = window['time']['hours'].toString();

        if (seconds.length < 2) {
            seconds = "0" + seconds;
        }
        if (minutes.length < 2) {
            minutes = "0" + minutes;
        }
        if (hours.length < 2) {
            hours = "0" + hours;
        }

        $("#timer").text(hours + ":" + minutes + ":" + seconds + "." + dseconds + cseconds);
    });
});

I’ve tried different solutions, like AJAX: first the timer relied only on AJAX requests (which led to thousand of HTTP request), and it was still imprecise. Then I modified it to synchronize with PHP every X seconds, but it didn’t work either.

Does anyone have any hints?

Answer 1

Why AJAX solution didn’t work? It was the second solution in my mind. It has to work, because the time comes from server…

The first solution is quite simple and I think the most accurate. Instead of relying on a Javascript periodical execution of function, try to rely on system date time. Use a Javascript periodical function to update the time on screen, but get that time using system date/time instead of a simple seconds += 1! Some pseudo code:

var startTime = new Date();

// Every 1/2 second or less...
var elapsedTimeInMs = new Date().getTime() - startTime.getTime();

However I suggest you to read the documentation for Date objects.