ЛАБОРАТОРНЫЕ РАБОТЫ
Игра "Пятнашки". Реализация в виде Java-скрипта
 |
 |
|  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Задание:
Заданием лабораторной работы являлось разроботка приложения на языке Java-script. В моем случае приложение - это игра "Пятнашки". Весь отчет разбит на слеующие части:(Поиграть в игру вы можете в начале странице!!!)->Руководство пользователя
->Руководство программиста
->Листинг программы
Руководство пользователя
При просмотре страницы автоматически стартует приложение написанное на языке Java-Script.
Поясним назначения элементов интерфейса:1 - Игровое поле размером 4 х 4. На нем пользователь при помощи мыши проводит перестановки.
2 - Кнопка "Новая игра". Ее назначение соотвествует ее названию. Расстановка цифр в новом порядке.
3 - Метка "Количество ходов" с полем textbox. В нем выводится количество ходов сделанным игроком.
Следует отметить, что перед началом игры пользователь должен обязательно нажать кнопку "Новая игра"!!! Для расстановки всех элементов в исходное положение. Далее следует описать цель и правила игры.
Цель игры состоит в том, чтобы за минимальное число перестановок расставить числовую последовательность от 1 до 15 в порядке возрастания, так чтобы в пустое место на поле оказалось на самой последней позиции.Правило игры одно. Игрок имеет право поменять местами число и пустое поле местами, только в том случае если их разница в позиции не превышает 1. перестановки по диагонали не допускаются.
Для создания интерфейса были использованны следующие компоненты:
TABLE
BUTTON
TEXTBOX
Рассмотрим реализацию каждой компоненты:
1) TABLE
Для создания таблице использовался тэг TABLE с параметром BORDER="2", где число указывает на тип границ в таблице. Далее при помощи тэгов TR и TD была сформированиа таблица размером 4 столбца на 4 строки. В каждую ячейку поля вставлялась картинка с соотвествующей цифрой. Реализация вставки картинки следующая: "IMG onclick=zamen(0) height=50 src="resourse/fift1.gif" width=50 name=1", где IMG означает рисунок,onclick=zamen(0) означает, что при нажатии мышкой на этот рисунок будет вызвана процедура zamen(0) с параметром "0". Эта процедура будет рассмотрена далее более подробно.
2) BUTTON
Создание кнопки выглядит следующим образом образом: INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 40px" onclick=zan() type=button value="Новая игра". Поясним параметры: style - стиль шрифта, onclick=zan() - означает, что при нажатии на кнопку вызывается zan() процедура, type=button - тип кнопка, value="Новая игра" - это надпись на кнопки.
3)TEXTBOX
Аналогичен пункту 2 за исключением того, что type="text". Теперь, рассмотрим работу приложения. При запуске приложения, на экран выводятся элементы интерфейса игры. Далее ждем пока будет нажата кнопка "Новая игра", и вызовиться процедура zan(). Ее назначение в расстановке элементов поля.Рассотрим ее листинг:
function zan(){
document.images[0].src="resourse/fift16.gif" //заносим в массив картинок путь и название файла с картинкой. Заметим, что картинка является объектом
document.images[0].name = "16"; //присваиваем ему свой идентификатор, нпример 16
.//далее для остальных картинок делаем тоже самое
.
.
document.images[15].src ="resourse/fift6.gif";
document.images[15].name = "6";
}
Теперь, когда игра началась, ждем от пользователя, когда он нажмет указателем на соотвествующий объект и тогда вызовится процедура zamen(n), где n-это идентификатор объекта. Рассмотрим листинг
function zamen(n){
var n2 ;
for ( var i=0; 16>i; ++i ){if (document.images[i].name=="16"){n2=i;}} //организовываем цикл и ищем позицию картинки с идентификатором 16.Заносим позицию в переменную n2
if ((n-n2==4) || (n2-n==4) || (n-n2==1) || (n2-n==1) ){ //Далее, если позиция пустой картинки имеет разницу с позицией картинки на которую нажал игрок в 1 или 4
document.images[n2].src = "resourse/fift"+document.images[n].name+".gif"; //то меняем картинки местами
document.images[n].src = "resourse/fift16.gif";
document.images[n2].name = document.images[n].name;
document.images[n].name = "16";
moves=moves+1 //Счетчик ходов увеличивается
window.wd.value=moves;//Выводится на экран
}
n2=0 //Далее идет проверка на выйгрышную комбинацию. Если да, то выводи окно с сообщением str_vict
for ( var i=0; 15>i; ++i ){if (document.images[i].name==i+1){n2=++n2;}}
if ((n2==14) && (document.images[15].name==16)) {alert(str_vict);zan();}
}
var moves=0;//переменная для хранения количества ходов
str_vict="Вы собрали пятнашки";//сообщение которое выводится при выйгрыше
function zamen(n){//функция обмена местами 2х картинок.Описание см. в руководстве программиста
var n2 ;
for ( var i=0; 16>i; ++i ){if (document.images[i].name=="16"){n2=i;}}
if ((n-n2==4) || (n2-n==4) || (n-n2==1) || (n2-n==1) ){
document.images[n2].src = "resourse/fift"+document.images[n].name+".gif";
document.images[n].src = "resourse/fift16.gif";
document.images[n2].name = document.images[n].name;
document.images[n].name = "16";
moves=moves+1
window.wd.value=moves;
}
n2=0
for ( var i=0; 15>i; ++i ){if (document.images[i].name==i+1){n2=++n2;}}
if ((n2==14) && (document.images[15].name==16)) {alert(str_vict);zan();}
}
function zan(){//Фуцкция инициализации игрового поля.Описание см. в руководстве программиста.
document.images[0].src="resourse/fift16.gif"
document.images[0].name = "16";
document.images[1].src = "resourse/fift7.gif";
document.images[1].name = "7";
document.images[2].src = "resourse/fift10.gif";
document.images[2].name = "10";
document.images[3].src = "resourse/fift15.gif";
document.images[3].name = "15";
document.images[4].src = "resourse/fift1.gif";
document.images[4].name = "1";
document.images[5].src = "resourse/fift8.gif";
document.images[5].name = "8";
document.images[6].src = "resourse/fift13.gif";
document.images[6].name = "13";
document.images[7].src = "resourse/fift2.gif";
document.images[7].name = "2";
document.images[8].src = "resourse/fift4.gif";
document.images[8].name = "4";
document.images[9].src = "resourse/fift11.gif";
document.images[9].name = "11";
document.images[10].src = "resourse/fift3.gif";
document.images[10].name = "3";
document.images[11].src = "resourse/fift14.gif";
document.images[11].name = "14";
document.images[12].src = "resourse/fift5.gif";
document.images[12].name = "5";
document.images[13].src = "resourse/fift9.gif";
document.images[13].name = "9";
document.images[14].src = "resourse/fift12.gif";
document.images[14].name = "12";
document.images[15].src ="resourse/fift6.gif";
document.images[15].name = "6";
}
INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 40px" onclick=zan() type=button value="Новая игра"
//Организация кнопки P ALIGN=CENTER Количество ходов
input type="text" name="wd" size="10"//Организация вывода кол-ва ходов на экран
Пишите письма на Mixali4@ua.fm
Обновлено 07.01.2005