Пример – игровые бонусы

Смотри также : Список примеров
Если Ваш сайт работает на WordPress, то может пригодиться плагин Simple Bitcoin Faucets – там много подобных игр.

Существуют тысячи бесплатных игр на Javascript. Если у Вас игровой вебсайт, почему бы не порадовать игроков бонусами?

В этом примере мы используем классический Тетрис – замечательную реализацию Blockrain. Игра работает внутри DIV :

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

и запускается вот так:

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

Безусловно, в любой игре будет нетрудно найти код, выполняемый, когда игра закончена, и пора выдавать бонусы.
У этой игры всё совсем просто – есть удобный callback:

onGameOver: function(score){
//тут мы спрячем игру 
// и покажем один из Кранов (по результату игры)  
}

Итак, давайте создадим Краны – игровые бонусы, используя URL страницы с игрой в конфигурации крана. Чем больше Кранов – тем лучше. Во-первых, чтобы было интереснее играть. Во-вторых – больше ссылок на Вашу страницу из Списка Кранов, и из списка приложений используемой микроплатёжной системы, например отсюда.

Если Вы не знаете, как создать Удалённый Кран – посмотрите этот пример, это совсем просто.

Для простоты давайте сдлаем пять бонусных Кранов, первый (очки – 10000 или меньше, “Сатоши Тетрис – приз 10K” FaucetID 123951, второй (очки – 20000, “Сатоши Тетрис – приз 20K”, FaucetID 123952) … пятый (очки – 50000, “Сатоши Тетрис – приз 50K”, FaucetID 123955).

Теперь подготовим HTML где мы покажем Кран, когда игра закончится:

<!-- 
Блок div id='wmexp-faucet-TO-BE' сейчас невидим, 
мы выставим правильный id и покажем его по окончании игры
-->
<div id='wmexp-faucet-TO-BE' style='display:none; min-height:600px;background-color:blue;'></div>
<!-- 
Блок div class="game" сейчас видимый,
мы его спрячем, когда игра закончится и будет вден бонусный Кран
-->
<div class="game" style="width:250px; height:500px;"></div>

Последний штрих, давайте напишем функцию, которая выбирает Кран в зависимости от набранных очков, прячет игру, и Кран показывает.

<script>
show_reward = function(score)
{
	var rewards = [
    {score:10000, faucet_id:123951},
    {score:20000, faucet_id:123952},
    {score:30000, faucet_id:123953},
    {score:40000, faucet_id:123954},
    {score:50000, faucet_id:123955},	
	];
	
	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'; //прячем игру
	document.querySelector('#wmexp-faucet-TO-BE').style.display = 'block'; //показываем Кран
	document.getElementById('wmexp-faucet-TO-BE').id = 'wmexp-faucet-'+faucet_id; // выставляет правильный id
	var script = document.createElement('script'); //создает скрипт
	script.src = 'https://wmexp.com/faucet/'+faucet_id+'/'; //вычисляет url по Faucet ID
	document.head.appendChild(script); //вставляет скрипт
}
</script>

Теперь вставим вызов функции в код:

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

Всё! Вот результат: