Manage leaderboards in your HTML5 game with App42 Cloud API

Talking about Facebook, Game development, HTML5 and Javascript.

When it comes to engage users to keep playing your game, there’s nothing better than leaderboards and achievements. I’ve always been a die hard fan of leaderboards, and I was the first to feature MochiAds Leaderboard in a game, back in 2008. A lot of time passed, and now I want to show you App42 Cloud API, a service with a lot of features for a wide range of technologies, from Unity to Corona, from Php to JavaScript and even for Samsung TV allowing you to add push notifications, leaderboards, achievements and a lot more stuff to your games. The service is FREE until you reach 1 Million API calls per month, then you should have all the resources to upgrade to a $99 monthly plan which allows you to handle 15 Million calls.

Now, do you want a test drive? Let’s have a look at Risky Steps on Facebook, possibly with a desktop computer as I did not optimize the leaderboard for mobile yet. Just below my CPMSTAR advertising – read How to publish your HTML5 game on Facebook, using Facebook login, Share and CPMStar ads if you need more information – you can see a leaderboard. This was made first including the JavaScript you can download once you setup your app in App42 Cloud API in your index page:

<script src = "App42-all-3.0.min.js"></script>

Then, once you get your application ID, you can easily save your score this way:

function saveScore(n){
     if(n){
          var gameName = "Risky Steps";  
          var userName = facebookName;
          if(userName == ""){
               userName = "Guest";
          }  
          var gameScore = n;  
          var result;
          var scoreBoardService = new App42ScoreBoard()    
          scoreBoardService.saveUserScore(gameName,userName,gameScore,{ success: function(object){} }); 
     }
}

As you can see, I set player name to Facebook name being this a Facebook game, but you are free to use your own way to assign names. Please note if you just copy/paste the info you can see in the official documentation, the script won’t work because it misses this line

var scoreBoardService = new App42ScoreBoard();

Where scoreBoardService is initialized. To show the top 10 leaderboard, I use:

var scoreBoardService  = new App42ScoreBoard();  
scoreBoardService.getTopNRankers("Risky Steps", 10,{    
    success: function(object)   
    {    
     var scorelist = "";
        var game = JSON.parse(object);    
        result = game.app42.response.games.game;  
        var scoreList = result.scores.score;  
        if (scoreList instanceof Array) {  
                for (var i = 0; i < scoreList.length; i++) {  
                    
                    scorelist += "<tr><td align = \"left\">" + scoreList[i].userName + "</td><td align = \"right\">" + scoreList[i].value.toString() + "</td></tr>";  
                     
                }  
            }
            document.getElementById("leaderboard").innerHTML = "<table width = \"100%\"><tr><td colspan = \"2\"><strong>TOP SCORES</strong></td>"+scorelist+"</table>"; 
    },    
    error: function(error) {    
    }    
});

In this case I simply inject some HTML in a div element but it’s obvious you can do what you want with it. I am a bit worried about security though, as the leaderboard is easily hackable, but this is the problem you’ll always have when dealing with 100% JavaScript applications. The good news is you aren’t using your own database so your server will remain safe no matter what happens to leaderboards.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.