Example – game bonuses

See also: Examples List
This functionality is available as WordPress Plugin.

There are thousands of free open-source Javascript games out-there. If you are running a game website, why not to get a leg-up over the competition by rewarding the players? You can always re-capitalize on the ads.

For this example we going to use classic Tetris game – marvelous Blockrain game. It has DIV to run inside:

<div class="game" style="width:250px; height:500px;"></div>

and the game starts like:

$('.game').blockrain({showFieldOnStart: true});

Obviously, it’s not doing to be hard to find code, called when the game ends for any Javascript game.
This one has handy callback:

onGameOver: function(score){
//here we going to hide the game 
//and show one of the faucets (depends on the score)  
}

So, let’s create the game bonus faucets, using URL of your game page as the URL in the faucet configuration for all of them. The more bonus faucets you create – the merrier. Firstly, it keeps the player motivated, secondly – it increases you game page visibility in the Remote Faucet List, and in the Faucet (App) list of the micro-payment system your Remote Faucets going to use (for example, here ).

If you are not familiar with creating the Remote Faucets – see this example first.

For the simplicity of the example we will use 5 Remote faucets as the rewards, first (score 10 000 and bellow,”Tetris bonus 10K”, second (score 20 000,”Tetris bonus 20K”, FaucetID 123682) … fifth (score 50 000,”Tetris bonus 50K”, FaucetID 123685).

Now, let’s modify the HTML so we have the place to show the faucet when the game ends:

<!-- 
The div id='wmexp-faucet-TO-BE' is hidden for now, 
will set the correct id and show it when the game ends
-->
<div id='wmexp-faucet-TO-BE' style='display:none; min-height:600px;background-color:blue;'></div>
<!-- 
The div class="game" is shown,
will be hidden when the faucet appears
-->
<div class="game" style="width:250px; height:500px;"></div>

And the final touch, let’s create a function to select the correct faucet Id depending on the players score, hide the game, and show the faucet.

<script>
show_reward = function(score)
{
	var rewards = [
    {score:10000, faucet_id:123681},
    {score:20000, faucet_id:123682},
    {score:30000, faucet_id:123683},
    {score:40000, faucet_id:123684},
    {score:50000, faucet_id:123685},	
	];
	
	var faucet_id = rewards[0].faucet_id; 
	for(var i = 0; i < rewards.length; i++)
	{
		if(score >= rewards[i].score)
		{
			faucet_id = rewards[i].faucet_id;
		}
	}

	document.querySelector('.game').style.display = 'none'; //hide game div	
	document.querySelector('#wmexp-faucet-TO-BE').style.display = 'block'; //show faucet div
	document.getElementById('wmexp-faucet-TO-BE').id = 'wmexp-faucet-'+faucet_id; //set actual id
	var script = document.createElement('script'); //create script
	script.src = 'https://wmexp.com/faucet/'+faucet_id+'/'; //set actual url based on faucet id
	document.head.appendChild(script); //add the script - it will render the faucet	
}
</script>

than place the function in the code:

<script>
    jQuery(document).ready(function () {
		 jQuery('.game').blockrain(
		 { 
			showFieldOnStart: true,
			onGameOver: function(score){
				show_reward(score);
			},
		 });
    });
</script>

That’s it. Here goes the result: