Submit your HTML5 games to Wanted 5 Games and earn money – full guide to integrate their API in your Phaser game

Do you already submit your HTML5 games to Wanted 5 Games? You definitively should, because your game will be shown to – and hopefully played by – million of visitors, with an easy to integrate JavaScript API or a Construct 2 plugin.

I am going to show you how to integrate their API in your Phaser game in a matter of minutes.

I am writing this guide after the integration of the API in my actual commercial game Irresponsible Ninja, so you are about to read a detailed step by step guide to the actual integration in an actual game.

Although this guide refers to Phaser, it’s easily adaptable to any other JavaScript framework.

1 – INCLUDE WANTED 5 GAMES SCRIPT

You have to call Wanted 5 Games script before the scripts wich manage your game. Your <head> section in the index page should look like this:

<!DOCTYPE html>
<html>
	<head>
        <title>Irresponsible Ninja</title>
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0, minimal-ui" />
        <link rel = "shortcut icon" type = "image/png" href = "favicon.png"/>
        <style type = "text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body{
                background: #000000;
            }
            canvas {
                touch-action-delay: none;
                touch-action: none;
                -ms-touch-action: none;
            }
        </style>
        <script type = "text/javascript" src = "//wanted5games.com/js/game.js"></script>
        <script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
    </head>
	<body>
        <div id = "thegame"></div>
	</body>
</html>

Line 21 calls the API and it has been included before Phaser (line 22) or the game itself (line 23).

2 – INITIALIZE THE API

Once your game is approved, you will receive a unique ID by email. In your window.onload callback function or in any other part of the script which is executed before the game itself, you should initialize and configure your game.

This is what I made:

window.onload = function() {
    CloudAPI.init({
        "id": 866,
        "splash": false
    });
    // ...
    // REST OF THE CODE
    // ...
    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: width,
            height: height
        },
        scene: [preloadGame, playGame],
        backgroundColor: 0x132c43
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}

As you can see, lines 2-5 initialize the API, while the Phaser game itself is created at line 21. Remember to change the ID at line 3 with your game ID.

3 – DEFINE WHEN YOUR ACTUAL GAME STARTS

By default, Wanted 5 Games will display the first advertisement when the actual game starts, so it’s important for you to tell the API when the game starts.

When the game starts, or even better when the player presses “play” button, add a line this way:

playButton.on("pointerup", function() {
    CloudAPI.play();
    // ...
    // REST OF THE GAME
    // ...
}, this);

In the callback function of my “play” button, I tell Wanted 5 Games my game started, at line 2.

4 – DEFINE WHEN YOUR ACTUAL GAME ENDS

Following the same concept seen at step 3, you have to tell Wanted 5 Games when the actual game ends, and I did it by adding this line to the method which handles the “game over” state:

2shakeAndRestart() {
    CloudAPI.gameOver();
    // ...
    // REST OF THE CODE
    // ... 
}

At line 2 I tell Wanted 5 Games it’s game over.

5 – PRELOAD WANTED 5 GAMES LOGO

You are required to display Wanted 5 Games logo and remove your own logo. Wanted 5 Games Logo isn’t provided as an image but as an object with paths to various images, and it’s up to you to choose the one which best fits in your game GUI.

In preload method, when it’s time to preload all assets, I added:

preload() {
    // ...
    // CODE TO PRELOAD ALL GAME ASSETS
    // ...
    let wanted5logos = CloudAPI.logos.list();
    this.load.image("wanted5logo", wanted5logos.horizontal);
}

At line 5 we retrieve all available logos in an object with logo URLs, this way:

{
   vertical: 'path to vertical logo',
   horizontal: 'path to horizontal logo'
}

and at line 6 the horizontal logo has been preloaded.

6 – DISPLAY THE LOGO WHEN REQUESTED

You don’t have to just display the logo. Optionally the logo can be disabled by Wanted 5 Games. Moreover, the logo can have a link attached to it, or can be just a plain image.

Somewhere in the code which handles your game main menu, add this code:

if(CloudAPI.logos.active()) {
    let wanted5logo = this.add.sprite(game.config.width / 2, game.config.height - 60, "wanted5logo");
    wanted5logo.setInteractive();
    wanted5logo.on("pointerup", function() {
        if(CloudAPI.links.active()) {
            window.open(CloudAPI.links.list()['logo']);
        }
    }, this);
}

Let’s see this code line by line:

Line 1: check if the logo is active, that is if you have to display a logo

Line 2: add the sprite with the logo

Line 3: set the logo interactive, trasforming it into a button

Line 4: add an input listener to logo button

Line 5: check if the logo has been set as active, that is if there’s a link attached to it

Line 6: open a new window pointing at the retrieved URL

7 – ADD GLOBAL SOUND CONTROLS

No matter if you already added “Sound on” and “Mute” buttons, Wanted 5 Games can enable or disable sounds through their API.

You will have to define two functions which will act exactly in the same way as the functions you call when you press “Sound on” or “Mute” buttons, and return true.

In my case, when I enable of disable sounds I act on a variable called gameOptions.soundOn which can be true or false.

So in my case the code to add is:

CloudAPI.mute = function() {
    gameOptions.soundOn = false;
    return true
}
CloudAPI.unmute = function() {
    gameOptions.soundOn = true;
    return true
}

It’s quite straightforward: according to the function called, I turn gameOptions.soundOn to true or false then always return true.

And that’s all, I hope this guide helps you in the integration of Wanted 5 Games API, I already submitted a game and will let you know how it’s performing.

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