Jun 27 2016 at 10:51

Пишем простую игру на Jquery для мобильных устройств

Invite pending

Напишем простую браузерную игру на Jquery. Смысл игры в том, чтобы лопнуть наибольшее количество пузырей на экране, пока индикатор количества пузырей не заполнится.

Ползунок считает количество пузырей в данный момент на экране, и когда пузырей на экране будет больше, чем выставлено в настройках сложности, появится окно с баллами игрока.

Для реализации задачи будем использовать библиотеку Jquery mobile и Jquery. Нам понадобятся 3 окна: настройки, игра, конец игры. В первом окне будет находиться настройка сложности, во втором — сама игра, и в третьем окне будет выводиться конечный счет игрока.

HTML часть

С помощью Jquery mobile можно разместить несколько окон на одной странице. Определитель data-role характеризует тип HTML тега.

<div id="menu" data-role="page">

HTML код

<!--Код 1 страницы-->
<div id="menu" data-role="page"> <!-- id – адрес ссылки на страницу -->
        <div data-role="header" data-backbtn="false"> <!—Заголовок страницы -->
            <h1>
                Выберите сложность.
            </h1>
        </div>
        <div data-role="content">
             <div align="center"><img src="demo_bubbles.jpg" /><br/></div>
Лопайте пузыри и ставьте рекорды.
 <div data-role="fieldcontain">
                <label for="difficulty" class="select ">Выберите сложность</label>
                <select name="difficulty" id="difficulty">
                    <option value="30">
                        Простая
                    </option>
                    <option value="20" selected="1">
                        Нормальная
                    </option>
                    <option value="10">
                        Сложная
                    </option>
                    </select>
            </div>
            <a href="#game" id="ee" data-role="button">Играть</a>
        </div>
    </div>

Внутренняя ссылка в Jquery moibile формируется с помощью хеш тега к контейнеру с соответствующим id и определителем data-role=«page». Чтобы добавить внешнюю ссылку, нужно ее обозначить как rel=«external». В div с id=«play» будут добавляться пузыри.

<div class="circle" id=”…”; style=”background: … ; position:absolute;  left: … px; top: … px;" onclick="deleter(…)"></div>

Весь HTML

<div id="menu" data-role="page">
        <div data-role="header" data-backbtn="false">
            <h1>
                Выберите сложность.
            </h1>
        </div>
        <div data-role="content">
             <div align="center"><img src="demo_bubbles.jpg" /><br/></div>
Лопайте пузыри и ставьте рекорды.
 <div data-role="fieldcontain">
                <label for="difficulty" class="select ">Выберите сложность</label>
                <select name="difficulty" id="difficulty">
                    <option value="30">
                        Простая
                    </option>
                    <option value="20" selected="1">
                        Нормальная
                    </option>
                    <option value="10">
                        Сложная
                    </option>
                    </select>
            </div>
            <a href="#game" id="ee" data-role="button">Играть</a>
        </div>
    </div>
<div id="game" data-role="page"  data-backbtn="false">
	<header data-role="header" data-backbtn="false"><h1>Пузыри</h1></header> 
		<section data-role="content">
<div id="counter"></div>
<div id="play"></div>
<div id="loader"><div id="roller"></div></div>
<a href="bubbles.html" rel="external" data-role="button">Выход</a>
</section>
</div>
 <div id="no-well-done" data-role="page">
        <div data-role="header" data-backbtn="false">
            <h1>
                Вы проиграли 
            </h1>
        </div>
        <div data-role="content">
             <div align="center"><img src="demo_bubbles.jpg" /><br/>
             <b>Ваш итоговый счет:</b><div id="fin"></div></div>
            <a href="bubbles.html" rel="external" data-role="button">Меню игры</a>
        </div>
    </div>

CSS

.circle{
width:30px;
height:30px;
border:2px solid black;
border-radius:30px;
}
#play{
width:300px;
height:300px;
}
#loader{
width:300px;
height:50px;
border-radius:10px;
background: rgb(101, 255, 103);
background: -moz-linear-gradient(359deg, rgb(101, 255, 103) 30%, rgb(255, 7, 0) 70%);
background: -webkit-linear-gradient(359deg, rgb(101, 255, 103) 30%, rgb(255, 7, 0) 70%);
background: -o-linear-gradient(359deg, rgb(101, 255, 103) 30%, rgb(255, 7, 0) 70%);
background: -ms-linear-gradient(359deg, rgb(101, 255, 103) 30%, rgb(255, 7, 0) 70%);
background: linear-gradient(89deg, rgb(101, 255, 103) 30%, rgb(255, 7, 0) 70%);
}
#roller{
background:grey;
border-radius:10px;
width:30px;
height:50px;
}

Jquery часть

Задаем глобальные переменные:

x = 0;  //Счетчик количества пузырей на экране. 
s = 0;  // Указывает на необходимость остановки цикла.
z = 10;  // Счет игрока.
le = 20;   // Уровень сложности.

Зададим функции:

var deleter = function(randy) … // Удаляет пузырь, на вход поступает id контейнера.
var circle = function() … //Создает контейнер (пузырь) произвольного цвета.
var counter = function() … // Выводит счет игрока и прекращает игру.
Потом определяется уровень сложности и вызывается функция circle с интервалом. 
$(document).ready(function() {
$("#ee").click(function(){
le = $("#difficulty :selected").val();
setInterval(circle, 500);
});
        });

Разберем функции поподробнее. Удаление происходит с анимацией, div, при нажатии, постепенно уменьшается, пока совсем не исчезнет.
Функция deleter вызывается при нажатии на div с помощью события onclick.

JS код

var deleter = function(randy) {
var co = 30; // Начальный размер контейнера.
x--; // Уменьшаем кол-во пузырей на экране.
// С интервалом уменьшаем размер контейнера, добиваемся эффекта анимации.
setInterval(function(){
$("#"+randy).css("width", co+"px");
$("#"+randy).css("height", co+"px");
co--;
if(co<2){ // Если размер контейнера меньше 2px.
 $("#"+randy).remove(); // Удаляем контейнер.
}
}, 30);
} Рассмотрим основную функцию circle.
var circle = function(){
if(s==0){ // Если программа не остановлена.
var colors = [ '#FF0000', '#0000e6', '#00cc44', '#ffff00', '#cc00cc', '#ff6600', '#00ccff', '#ffff66', '#cc3300', '#33ff77' ]; // Массив с цветами пузырей.
// В следующих переменных определяются наименьшие и наибольшие возможные числа для //random();
var n = 0;
var m = 9;
var n1 = 50;
var m1 =300;
var rand = Math.floor(Math.random( ) * (n - m + 1)) + m; // Случайный цвет
var randx = Math.floor(Math.random( ) * (n1 - m1 + 1)) + m1; // Случайные координаты
var randy = Math.floor(Math.random( ) * (n1 - m1 + 1)) + m1;
var rando = randx+randy;
               var nowcircle='<div class="circle" id="'+rando+'"; style="background:'+colors[rand]+'; position:absolute; left:'+randx+'px; top:'+randy+'px;" onclick="deleter('+rando+')"></div>'; 
$('#play').append(nowcircle); // Выводим пузырь на экран.
x++; // Увеличиваем количество пузырей на экране и счет.
z++;
$("#counter").empty();
$('#counter').append("Счет:"+z); // Выводим счет.
var pp =300/le; //Определяем «цену деления» для индикатора наполненности экрана пузырями.
var scrolla = x*pp; // Определяем текущий размер индикатора.
$("#roller").css("width", scrolla+"px");
counter(); // Следующую функцию.
}
}

Функция counter() определяет конец игры и выводит итоговый счет.

var counter = function(){
if(x>le){ // Если пузырей больше чем нужно.
document.location.href = "http://media.twoclub.ru/bubbles.html#no-well-done";
s = 1; // Останавливаем игру.
$('#fin').append(z); // Выводим итоговый счет.
}
}

Демо игры тут: Ссылка.

Tags:

Hubs: