Взгляд на Исходные Файлы

В следующей таблице перечислены исходные файлы приложения Hangman.

hangman.html	Главная страница приложения. Она устанавливается как страница по умолчанию приложения Hangman в Application Manager'е. Она выводится, если пользователь введёт просто hangman в URL без специфицирования страницы.
hangman.js	Файл, содержащий только функции серверного JavaScript, используемые в hangman.html.
youwon.html youlost.html thanks.html	Страницы, выводимые, если пользователь победил, проиграл или закончил игру, соответственно.
директория images	Изображения программы , hang0.gif, hang1.gif, и т.д.
rules.html	Содержит текст с пояснениями об игре. Этот файл не компилируется вместе с приложением; он включён как пример неоткомпилированной страницы приложения, являющейся частью того сайта.

Основная логика приложения содержится в файле hangman.html. Базовая логика проста, как три рубля:

Для новой игры: инициализируется угадываемое слово и другие переменные.
Если игрок угадал букву, она замещается в вопросе.
Если игрок не угадал, увеличивается число неудачных попыток.
Проверяется, победил пользователь или проиграл.
Прорисовывается текущий вариант изображения с использованием GIF-изображения с учётом неугаданных букв.

Тело/body HTML-файла hangman.html начинается кодом JavaScript в тэге SERVER. Сначала идёт код для инициализации новой игры:

if (client.gameno == null) {
client.gameno = 1;

client.newgame = "true";
}if (client.newgame == "true") {
if (client.gameno % 3 == 1)

client.word = "LIVEWIRE";

if (client.gameno % 3 == 2)

client.word = "NETSCAPE";

if (client.gameno % 3 == 0)

client.word = "JAVASCRIPT";

client.answer = InitAnswer(client.word);
client.used = "";

   client.num_misses = 0;
}

client.newgame = "false";

Этот код использует объект client для сохранения информации об игроке. Поскольку нет необходимости сохранять статус игры между вызовами разных клиентов, этот код не использует объекты project или server.

Первый оператор определяет, играл игрок до этого, или нет, проверяя существование client.gameno; если нет, код инициализируется в 1 и client.newgame устанавливается в true. Затем некоторая простая логика присваивает "секретное слово" свойству client.word; имеются только три секретных слов, по которым игра проходит по циклу. Свойство client.gameno хранит количество игр, сыгранных конкретным пользователем. Финальная часть инициализации использует InitAnswer, функцию, определённую в файле hangman.js, для инициализации свойства client.answer строкой звёздочек.

Затем идёт блок операторов обработки действий игрока по угадыванию:

if (request.guess != null) {

   request.guess = request.guess.toUpperCase().substring(0,1);

   client.used = client.used + request.guess + " ";

   request.old_answer = client.answer;
   client.answer = Substitute (request.guess, client.word,
      client.answer);

   if (request.old_answer == client.answer)

      client.num_misses = parseInt(client.num_misses) + 1;
}

Оператор if определяет, угадал ли игрок (введя букву в форму). Если да, код вызывает Substitute (другую функцию, определённую в файле hangman.js) для замены угаданной буквы в client.answer. Это постепенно прорисовывает слово в client.answer (например, "N*T**AP*").

Второй оператор if проверяет, было ли изменено свойство client.answer после последнего угадывания; если нет, код увеличивает client.num_misses для отслеживания количества некорректных ответов. Вы обязаны всегда использовать parseInt при работе с целочисленными значениями свойств предопределённого объекта client.

Как видно из следующего кода, последний оператор if в коде JavaScript проверяет, победил игрок или проиграл, и перенаправляет клиента соответственно. Функция redirect открывает специфицированный HTML-файл и передаёт управление в него.

if (client.answer == client.word)
   redirect(addClient("youwon.html"));

else if (client.num_misses > 6)
   redirect(addClient("youlost.html"));

Это конец начального тэга SERVER. Начинается HTML, дополненный выражениями JavaScript. Человек прорисовывается с использованием закавыченных выражений JavaScript внутри HTML-тэга IMG:

<IMG SRC=`"images\hang" + client.num_misses + ".gif"`>

Всё выражение между двумя обратными кавычками (`) это строка JavaScript. Она состоит из строкового литерала "images\hang", соединяемого со значением client.num_misses (которое является целым числом, но хранится как строка), соединяемого со строковым литералом ".gif". Имеются шесть GIF-файлов с изображениями повешенного человечка в различных стадиях: image0.gif, image1.gif и так далее. Выражение JavaScript в кавычках генерирует HTML вида:

<IMG SRC="images\hang0.gif">

Затем идут строки:

<PRE><SERVER>write(client.answer)</SERVER></PRE>

You have used the following letters so far:
<SERVER>write(client.used)</SERVER>

Они выводят значение client.answer (слово, содержащее все правильно угаданные буквы) и все угаданные буквы.

Оставшаяся часть файла это стандартный HTML. Важно отметить, что атрибут ACTION тэга FORM специфицирует файл hangman.html как URL, по которому отправляется форма. Это значит, что при отправке формы страница перезагружается с новыми (специфицированными) значениями формы.

Посмотрим на hangman.js, пример исходного файла, написанного с использование только серверного JavaScript. В нём определены две функции, InitAnswer и Substitute, используемые приложением. Заметьте, что в файлах с серверным JavaScript тэги SERVER не используются.

Содержание раздела