Для создания игры использовался JavaScript-прототипно-ориентированный сценарный язык программирования. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
При построении приложения использовались такие технологии как: HTML, CSS, JQuery, и непосредственно программный код на языке JS, отвечающий за логику игры.
Этапы построения:
) Верстка начальной страницы с помощью HTML.
) Применение к объектам каскадной таблицы стилей. Сюда включены: начальное позиционирование, оформление.
) Подключение кода JS к основной HTML странице, для обработки игровых событий.
) Подключение библиотеки JQuery, для улучшения визуальных изменений на странице и упрощения работы в целом.
Механика и цели игры:
) Необходимо сдвинуть все зеленые фишки в центр поля (пустоту), что бы фишка провалилась.
) Если в пустое поле попадает синяя фишка - игра заканчивается
) Фишки движутся в зависимости от нажатой кнопки указания движения.
) В случае выигрыша или проигрыша, выводиться модальное окно с сообщением результата.
Рис.5. Страница HTML
Основная разметка страница строится по HTML технологии (рисунок №5).
. Здесь происходит подключение библиотек JQuery, файла CSS и внешнего файла JavaScript с алгоритмом работы игры.
. Веб страница. По факту - то, что отображается в начале.
В начале игры формируется игровое поле. Считываются позиции голубых и зеленых фишек, а так же ограничивающих блоков. На основании их координат формируется матрица игрового поля:
var matrix = [[], [], [], [], []];
var elem = document.getElementsByClassName("fishkas");elemB = document.getElementsByClassName("blocks");count=0;(var i=0; i<elem.length; i++) {[div (elem.item(i).offsetTop,100)][div (elem.item(i).offsetLeft,100)] = elem.item(i).id;(elem.item(i).getAttribute("tag") == "green"){++;
}
}(var i=0; i<elemB.length; i++){[div (elemB.item(i).offsetTop,100)][div (elemB.item(i).offsetLeft,100)] = elemB.item(i).id;
}
Далее описывается функция обработчика, нажатия кнопки направления движения. В функцию передается значение, определяющую нажатую клавишу, условно: 1 - ВВЕРХ, 2 - ВНИЗ, 3 - ВЛЕВО, 4 - ВПРАВО.
Алгоритм движения: изначально все изменения производятся на матрице (визуального отображения нет). Позиции фишек в матрице изменяются до тех пор, пока не достигнут конца игрового поля, фишки, или ограничительного блока.
do {priznak = false;(var i=1; i<5; i++){(var j=0; j<5; j++){(matrix[i][j] == null || matrix[i][j] == undefined){
}{(i == 2 && j == 2){= matrix[i][j];;
}((matrix[i][j].indexOf("fishka")!= -1) && (matrix[i-1][j] == null || matrix[i-1][j] == undefined)){(i == 2 && j == 2){= matrix[i][j];;
}[i-1][j] = matrix[i][j];[i][j] = null;= true;
}
}
}
}
}(priznak);(who);
После изменений над матрицей, вызывается функция анимации движения фишек (remake) в соответствии с позициями в матрице. Здесь происходит изменение отступов фишек от заданного направления.
(var i=0; i<5; i++){
for (var j=0; j<5; j++){(matrix[i][j] == null || matrix[i][j] == undefined){
}{(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);(document.getElementById(finish).getAttribute("tag") == "green"){-;(count == 0){
$("#ck").html("ОО, поздравляю!!!");
$("#ck").dialog('open');
}
}(document.getElementById(finish).getAttribute("tag") == "blue"){
$("#ck").html("Печаль, но ты проиграл<br>Попробуем снова?");
$("#ck").dialog('open');
}=null;
}
$("#ck").dialog({: function() {location.reload();}
});
Заключение
В процессе выполнения работы были рассмотрены виды обучающих игр, их классификация и особенности восприятия игр учениками. Ключевым моментом работы стала разработка игровых программ для их использования на мобильных устройствах. Для чего было разработано и реализовано приложение, выполняемое в среде операционной системы Android, позволяющее в тестовой форме закрепить знания таблицы умножения, а также с помощью языка JavaScript реализована игровая развивающая программа. При разработке указанных приложений сочетались лаконичность интерфейса с достаточно сложной игровой логикой задач. Таким образом, все поставленные в работе задачи решены, и цель работы достигнута.
Литература
1. Герасимов, С.В. Когда учение становится привлекательным/ С.В. Герасимов. - М., 2003.
. Кикоин, Е.И. Младший школьник: возможности изучения и развития внимания/ Е.И. Кикоин. - М., 2003.
. Компьютерные развивающие игры в помощь логопеду, дефектологу
. Советы специалистов
. Ребенок и компьютер
. Общая информация по JS
. Огромная база знаний по языку
. База знаний по JS библиотеке
. Уроки программирования Java для Android
. Англоязычная база знаний Android// developer.android.com/guide
. Голощапов, А.Л. Google Android. Программирование для мобильных устройств/А.Л. Голощапов - Санкт-петербург: БХВ-Петербург, 2012. - 448 с.
. Гудман, Д.Д. JavaScript. Библия пользователя./Д.Д. Гудман - Москва: Вильямс, 2003. - 960 с.
. Майер, Р. Программирование приложений для планшетных компьютеров и смартфонов./Р. Майер - Москва: Эксмо, 2011. - 672 с.
. Прохоренок, Н.А. jQuery. Новый стиль программирования на JavaScript/Н.А. Прохоренок - Москва: Вильямс, 2010. - 672 с.