Используем confirm, чтобы получить
ответ «да» или «нет»
Функция confi rm позволяет задать пользова-
телю вопрос, на который он может ответить
«да» или «нет» (что соответствует булеву зна-
Confirm —
чению). В следующем примере мы исполь-
подтвердить
зуем confi rm, чтобы спросить у пользова-
Likes cats —
теля, нравятся ли ему кошки (см. рис. 7.2).
нравятся
Если получен утвердительный ответ, переменная likesCats принимает
кошки
значение true и мы печатаем: «Ты классная кошка!» Если же кошки
пользователю не нравятся, likesCats принимает значение false, и мы
отвечаем: «Что ж, не проблема. Все равно ты молодец!»
112 Часть I. Основы
var likesCats = confirm("Тебе нравятся кошки?");
if (likesCats) {
console.log("Ты классная кошка!");
} else {
console.log("Что ж, не проблема. Все равно ты молодец!");
}
Рис. 7.2. Диалог confi rm
Ответ на вопрос, заданный с помощью confi rm, возвращается в про-
грамму как булево значение. Если в окне, показанном на рис. 7.2, пользо-
ватель нажмет «ОК», confi rm вернет true. Если же пользователь нажмет
«Отмена», confi rm вернет false.
Используем alert для выдачи информации
Если требуется просто показать что-то пользователю, можно воспользо-
ваться диалогом alert, который отображает сообщение с кнопкой «ОК».
Например, если вы считаете, что JavaScript — это здорово, вы можете
использовать alert так:
alert("JavaScript это здорово!");
Alert —
предупреждение
На рис. 7.3 показано, как выглядит этот диалог.
Рис. 7.3. Диалог alert
Диалог alert просто отображает сообщение до тех пор, пока пользо-
ватель не нажмет «ОК».
7. Пишем игру «Виселица» 113
Чем alert лучше console.log?
Зачем нужен диалог alert, когда есть console. log?
Во-первых, если необходимо просто сообщить о чем-то
игроку, alert позволяет сделать именно это — не тре-
буя, чтобы игрок открыл консоль и прочитал сообщение.
Во-вторых, вызов alert (а также prompt и confi rm)
приостанавливает работу интерпретатора JavaScript
до нажатия кнопки «ОК» (или «Отмена», в случае
prompt) и — значит, у пользователя будет достаточно
времени, чтобы прочитать сообщение. А при исполь-
зовании console.log текст отображается в консоли,
а интерпретатор тут же переходит к следующей строке
программы.
Проектирование игры
Прежде чем перейти к созданию игры «Виселица», давайте подумаем
о ее структуре. Нам нужно, чтобы программа умела выполнять следую-
щие действия:
1. Случайным образом выбирать слово.
2. Запрашивать у игрока вариант ответа (букву).
3. Завершать игру по желанию игрока.
4. Проверять, является ли введенный ответ буквой.
5. Вести учет угаданных букв.
6. Показывать игроку, сколько букв он угадал и сколько еще пред-
стоит угадать.
7. Завершать игру, если слово отгадано.
Все эти действия, кроме первого и последнего (выбор слова и завер-
шение игры), нужно выполнять многократно, причем заранее неиз-
вестно, сколько раз (это зависит от ответов игрока). И, как мы теперь
знаем, если требуется повторять какие-то действия, значит, в программе
нужен цикл.
Однако в нашем списке действий ничего не говорится о том, что
и когда должно происходить. Чтобы выяснить этот вопрос и лучше пред-
ставить себе структуру будущей программы, мы можем воспользоваться
псевдокодом.
114 Часть I. Основы
Используем псевдокод для проектирования игры
Псевдокод — удобный инструмент, который программисты часто
используют при проектировании программ. Слово «псевдокод» означает
«ненастоящий код». Хотя в псевдокоде есть циклы и условия, в целом
программа описывается обычным человеческим языком. Чтобы разо-
браться, что это значит, давайте посмотрим на описание нашей игры
в псевдокоде:
Выбрать случайное слово
Пока слово не угадано {
Показать игроку текущее состояние игры
Запросить у игрока вариант ответа
Если игрок хочет выйти из игры {
Выйти из игры
}
Иначе Если вариант ответа — не одиночная буква {
Сообщить игроку, что он должен ввести букву
}
Иначе {
Если такая буква есть в слове {
Обновить состояние игры, подставив новую букву
}
}
}
Поздравить игрока с победой — слово угадано
Как видите, это не программный код, который может выполнить
компьютер. Однако такая запись дает нам представление о структуре
программы прежде, чем мы перейдем к написанию кода и выяснению
мелких деталей, например, какименно выбирать случайное слово.
Отображение состояния игры
Одна из строк нашего псевдокода гласит: «Показать игроку текущее
состояние игры». Для игры «Виселица» это означает подставить в слово
угаданные игроком буквы, а также показать, какие буквы осталось уга-
дать. Как мы будем это делать? В сущности, можно хранить состояние
игры тем же способом, что и в обычной «Виселице»: в виде последова-
тельности «пустых мест», которые мы будем заполнять по мере того, как
игрок угадывает буквы.
Мы сделаем это с помощью массива «пустых мест» — по одному
элементу для каждой буквы в слове. Назовем этот массив «итоговым
массивом» и будем по ходу игры заполнять его угаданными буквами.
А каждое из «пустых мест» представим в виде строки со знаком подчер-
кивания: "_".
7. Пишем игру «Виселица» 115
Сначала наш итоговый массив будет просто набором «пустых
мест», количество которых равно количеству букв в загаданном слове.
Например, если загадано слово «рыба», массив будет выглядеть так:
[" _ ", " _ ", " _ ", " _ "]
Если игрок угадает букву «ы», мы заменим второй элемент на «ы»:
[" _ ", "ы", " _ ", " _ "]
А когда игрок угадает все буквы, массив примет вид:
["р", "ы", "б", "а"]
Также нам понадобится переменная для
хранения количества букв, которые осталось
угадать. Для каждого вхождения верно угадан-
ной буквы эта переменная будет уменьшаться
на 1, и, когда она примет значение 0, мы пой-
мем, что игрок победил.
Проектируем игровой цикл
Основная часть игры будет располагаться внутри цикла while (в нашем
псевдокоде этот цикл начинается со строки «Пока слово не угадано»).
В цикле мы будем отображать текущее состояние игры (то есть слово,
поначалу представленное одними знаками подчеркивания), запраши-
вать у игрока вариант ответа (и проверять, действительно ли тот ввел
одиночную букву), а также обновлять итоговый массив, подставляя вве-
денную букву, если она действительно есть в слове.
Практически все компьютерные игры организованы в виде того или
иного цикла, нередко структурно похожего на цикл нашей «Виселицы».
В целом игровой цикл выполняет следующие задачи:
1. Принимает ввод от игрока.
2. Обновляет состояние игры.
3. Показывает игроку текущее состояние игры.
Такого рода цикл применяется даже в играх, где непрерывно что-то
меняется, — просто он выполняется очень быстро. В случае нашей
116 Часть I. Основы
«Виселицы» программа запрашивает у игрока вариант ответа, обновляет
итоговый массив (если ответ верный) и отображает новое состояние ито-
гового массива.
Если игрок угадает все буквы в слове, мы должны показать ему закон-
ченное слово, а также вывести сообщение, поздравляющее с победой.
Программируем игру
Теперь, когда у нас есть представление о структуре игры, можно перехо-
дить к написанию кода. Сначала мы рассмотрим его по частям. После этого
вы увидите весь код целиком, чтобы с удобством ввести его и поиграть.
Выбираем случайное слово
Первым делом нам нужно выбрать случайное слово. Вот как это делается:
var words = [
"программа",
"макака",
Words — слова
"прекрасный",
"оладушек"
];
var word = words[Math.floor(Math.random() * words.length)];
Наша игра начинается со строки , где мы создаем массив со сло-
вами (программа, макака, прекрасный и оладушек), из которого затем
будем выбирать слово для отгадывания (все слова должны быть запи-
саны строчными буквами). Cохраним этот массив в переменной words.
В строке мы используем Math.random и Math.fl oor, чтобы выбрать
из массива случайное слово — так же как в третьей главе выбирали слова
для генератора дразнилок.
Создаем итоговый массив
Далее создадим пустой массив под названием answerArray (итоговый
массив) и заполним его символами подчеркивания (_), количество кото-
рых соответствует количеству букв в загаданном слове.
Answer array —
var answerArray = [];
массив
for (var i = 0; i < word.length; i++) {
с ответом
answerArray[i] = "_";
}
Remaining
letters —
var remainingLetters = word.length;
оставшиеся
буквы
7. Пишем игру «Виселица» 117
В строке в начале цикла for создается переменная цикла i, кото-
рая сначала равна 0, а затем возрастает до word.length (не включая,
однако, само значение word.length). При каждом повторе цикла мы
добавляем в массив новый элемент — answerArray[i]. Когда цикл
завершится, длина answerArrayбудет такой же, как длина слова.
Например, если было выбрано слово «макака» (в котором шесть букв),
answerArray примет вид [" _ ", " _ ", " _ ", " _ ", " _ ", " _ "]
(шесть знаков подчеркивания).
Наконец, создадим переменную remainingLetters, приравняв ее