Разработка приложения для браузерной версии. Реализация на языке JavaScript
Для создания игры использовался JavaScript-прототипно-ориентированный сценарный язык программирования. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
При построении приложения использовались такие технологии как: HTML, CSS, JQuery, и непосредственно программный код на языке JS, отвечающий за логику игры.
Этапы построения:
Верстка начальной страницы с помощью HTML.
Применение к объектам каскадной таблицы стилей. Сюда включены: начальное позиционирование, оформление.
Подключение кода JS к основной HTML странице, для обработки игровых событий.
Подключение библиотеки JQuery, для улучшения визуальных изменений на странице и упрощения работы в целом.
Механика и цели игры:
Необходимо сдвинуть все зеленые фишки в центр поля (пустоту), что бы фишка провалилась.
Если в пустое поле попадает синяя фишка – игра заканчивается
Фишки движутся в зависимости от нажатой кнопки указания движения.
В случае выигрыша или проигрыша, выводиться модальное окно с сообщением результата.
Рис.5. Страница HTML
Основная разметка страница строится по HTML технологии (рисунок №5).
Здесь происходит подключение библиотек JQuery, файла CSS и внешнего файла JavaScript с алгоритмом работы игры.
Веб страница. По факту – то, что отображается в начале.
В начале игры формируется игровое поле. Считываются позиции голубых и зеленых фишек, а так же ограничивающих блоков. На основании их координат формируется матрица игрового поля:
var matrix = [[], [], [], [], []];
var elem = document.getElementsByClassName("fishkas");
var elemB = document.getElementsByClassName("blocks");
var count=0;
for (var i=0; i<elem.length; i++) {
matrix[div (elem.item(i).offsetTop,100)][div (elem.item(i).offsetLeft,100)] = elem.item(i).id;
if (elem.item(i).getAttribute("tag") == "green"){
count++;
}
}
for (var i=0; i<elemB.length; i++){
matrix[div (elemB.item(i).offsetTop,100)][div (elemB.item(i).offsetLeft,100)] = elemB.item(i).id;
}
Далее описывается функция обработчика, нажатия кнопки направления движения. В функцию передается значение, определяющую нажатую клавишу, условно: 1 – ВВЕРХ, 2 – ВНИЗ, 3 – ВЛЕВО, 4 – ВПРАВО.
Алгоритм движения: изначально все изменения производятся на матрице (визуального отображения нет). Позиции фишек в матрице изменяются до тех пор, пока не достигнут конца игрового поля, фишки, или ограничительного блока.
do {
var priznak = false;
for (var i=1; i<5; i++){
for (var j=0; j<5; j++){
if (matrix[i][j] == null || matrix[i][j] == undefined){
}
else {
if (i == 2 && j == 2){
finish = matrix[i][j];
break;
}
if ((matrix[i][j].indexOf("fishka")!= -1) && (matrix[i-1][j] == null || matrix[i-1][j] == undefined)){
if (i == 2 && j == 2){
finish = matrix[i][j];
break;
}
matrix[i-1][j] = matrix[i][j];
matrix[i][j] = null;
priznak = true;
}
}
}
}
}
while (priznak);
remake(who);
После изменений над матрицей, вызывается функция анимации движения фишек (remake) в соответствии с позициями в матрице. Здесь происходит изменение отступов фишек от заданного направления.
for (var i=0; i<5; i++){
for (var j=0; j<5; j++){
if (matrix[i][j] == null || matrix[i][j] == undefined){
}
else {
if (matrix[i][j].indexOf("fishka")!= -1){
$(document.getElementById(matrix[i][j])).animate({top: i*100},1000);
}
}
}
}
После анимации необходимо выполнить проверку попадания фишек в центр (пустоту). Вызывается функция stopgame, которая фиксирует цвет фишки и их количество. Если например упала 1 зеленая фишка, то игра продолжается пока не упадут все зеленые, если упала синяя – игра завершается.
function stopgame() {
$(document.getElementById(finish)).animate({height:"hide", top:250, left:250},300);
if (document.getElementById(finish).getAttribute("tag") == "green"){
count--;
if (count == 0){
$("#ck").html("ОО, поздравляю!!!");
$("#ck").dialog('open');
}
}
if (document.getElementById(finish).getAttribute("tag") == "blue"){
$("#ck").html("Печаль, но ты проиграл<br>Попробуем снова?");
$("#ck").dialog('open');
}
finish=null;
}
$("#ck").dialog({
close: function() {location.reload();}
});