Manage leaderboards in your HTML5 game with App42 Cloud API

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"&gt;</script&gt;
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&gt;<td align = \"left\"&gt;" + scoreList[i].userName + "</td&gt;<td align = \"right\"&gt;" + scoreList[i].value.toString() + "</td&gt;</tr&gt;";  
                     
                }  
            }
            document.getElementById("leaderboard").innerHTML = "<table width = \"100%\"&gt;<tr&gt;<td colspan = \"2\"&gt;<strong&gt;TOP SCORES</strong&gt;</td&gt;"+scorelist+"</table&gt;"; 
    },    
    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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers