HOWTO Javascript game with Satoshi bonus

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 gong to use classic Tetris game - marvelous Blockrain game at https://github.com/Aerolab/blockrain.js. It has DIV to run inside:

Code:

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

and the game starts like:

Code:

$('.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:

Code:

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:

Code:

<!-- 
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.

Code:

<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:

Code:

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

That's it !

It is impossible to insert the game here, so if you want to see it in action - look here (scroll to the bottom)