JavaScript. Игра «Угадай слово». Проект II

Вам предстоит создать свой второй проект на языке JavaScript. На этот раз вам предстоит создать игру на угадывание слов. Все просто, один игрок слово загадывает, второй пытается его отгадать называя поочередно буквы в слове. Если он угадывает, то буквы появляются на экране вместо знаков _ _ _ _ _ _ _ _. Разработку игры мы будем делать постепенно, в итоге у нас получится код, который можно будет использовать для HTML файла. Начнем…

Создаем диалоговое окно.

В игре нам необходимо диалоговое окно (prompt — запрос).

Создаем новый HTML-документ (мы уже делали это несколько раз), если вы немного забыли, то нужно еще раз прочитать статью. Укажем между тегами <script> и </script> следующие команды.

Если вы продолжаете работать в консоли, то теги <script> использовать не нужно. В данном элементе кода нам встречаются сразу два новых оператора, которые создают диалоговые окна.

Prompt — работает для создания диалогового окна с пользователем.

Alert — выводит диалоговое окно, в котором есть только одна кнопка OК.

«Предотвратить создание дополнительных диалоговых окон на этой странице» — так работает служба предупреждения Chrome и в большинстве случае защищает нас от нежелательных запросов, можно поставить галочку в checkbox.

Если вы ничего не введете никакого имени и просто нажмете OK, тогда

confirm — функция позволяет создать диалоговое окно, в котором предоставляется возможность ответить «да» или «нет».

Замети, что если вы создадите условие if, то при нажатии кнопки OK оно автоматически примет значение TRUE и в конструкции условия будет выполняться «первый» оператор.

при выборе OK

Если вы выберите отмена, то получите диалоговое окно

Как вы видите из примеров вы можете создавать различные действия исходя из выбора пользователя.

Чем alert отличается от console.log??? попробуйте ответить на этот вопрос самостоятельно.

Проектирование игры.

Прежде чем перейти к созданию игры, давайте подумаем о её структуре. Нам нужно, чтобы программа могла выполнять следующие действия:

  1. Случайным образом выбирать слово.
  2. Запрашивать у игрока вариант ответа (букву).
  3. Завершать игру по желанию игрока.
  4. Проверять, является ли введенный ответ буквой.
  5. Вести учет угаданных букв.
  6. Показать игроку сколько букв он угадал и сколько еще предстоит угадать.
  7. Завершать игру, если слово отгадано.

Все эти действия, кроме первого и последнего нужно выполнять многократно, значит в программе нужен цикл. Нам нужен массив с стоящими в нем значениями «_», так загаданное слово будет выглядеть «_»,»_»,»_»,»_». Когда игрок начинает угадывать буквы, тогда постепенно значения этого массива заменяются на буквы «_»,»ы»,»_»,»_» ; «_»,»ы»,»б»,»_» ; «р»,»ы»,»б»,»а».

Программируем игру.

Первым делом нам нужно выбрать случайное слово, вот так:

Мы создаем массив со словами. Слова выбраны произвольные, ваши слова могут отличаться от того примера, который я вам привел. Из этих слов будет выбираться одно, которое будет отгадываться. В переменной word используется выбор случайного слова.

Создаем итоговый массив answer и заполним его символами подчеркивания, которые соответствуют количеству букв в загаданном слове.

В начале цикла for создается переменная цикла i, которая сначала равна 0, а затем возрастает до word.length. При каждом повторе цикла мы добавляем новый элемент — answer[i], когда цикл завершится, длина answer будет такой же, как и длина слова. Переменная remain равна длине загаданного слова. Эта переменная понадобиться, чтобы отслеживать количество букв, которые осталось угадать. Каждый раз, когда пользователь угадает буквы, мы будем вычитать 1,

Программируем игровой цикл.

Основа игрового цикла выглядит так:

Отображение состояния игры.

Первым делом в теле игрового цикла нужно показать игроку текущее состояние игры:

Мы делаем это, объединяя элементы answer в строку м пробелом в качестве разделителя, а затем при помощи alert показываем эту строку.

Обработка введенного ответа.

Теперь нужно запросить у игрока ответ и убедиться, что он ввел одиночную букву.

В строке prompt — запрашивает у игрока ответ и сохраняет его в переменной guess. Далее возможен один из четырех вариантов развития событий:

Если игрок нажмет кнопку — отмена, то guess примет значение null. Если это так, то сработает команда break.

Игрок либо не ввел ничего, либо ввел несколько букв. Если он просто нажал ОК, ничего не вводя, в guess окажется пустая строка и guess.length вернет 0. Если же игрок ввел больше 1 буквы, то guess.length вернет число больше 1. В строке guess.length !==1 обрабатывает эти варианты и в случае, если это не совпадает выводим сообщение о том, что нужно ввести только одну букву.

Игрок, как и положено, ввел только одну букву. Тогда мы должны обновить состояние игры, об этом речь пойдет дальше.

Обновление состояния игры.

Если игрок ввел корректный ответ, мы должны обновить answer.

Мы задали цикл for с новой переменной j, которая будет менять значение от 0 до word.length, не включая само значение word.length. В этом цикле мы проверяем каждую букву переменной word. Например, пусть в word находится строка «оладушек». Тогда при первом повторе цикла, когда j=0, word[j] вернет «о». При последующем повторе word[j] вернет «л», затем «а», «д», «у», «ш», «е», «к».

В строке if (word[j] === guess) проверяем, совпадает ли текущая буква (word[j]) с ответом игрока. Если это так, то мы обновляем итоговый массив, добавляя туда букву командой answer[j] = guess. Для каждой буквы совпадающей с ответом, мы обновляем соответствующую позицию итогового массива. Переменную j можно использовать в качестве индекса в строке word и индекса в массиве answer.

Окончание игры.

Как мы знаем, игровой цикл while выполняется при условии remain > 0, поэтому его тело будет выполняться до тех пор, пока остаются не отгаданные буквы. Когда же remain уменьшится до 0, цикл завершится. После цикла нам останется лишь закончить игру — это можно сделать при помощи:

Подведем итог, итоговый код выглядит следующим образом.

Задания:

  1. Напишите код программы и запустите её.
  2. Увеличьте количество слов в массиве загаданных слов. Необходимо добавить еще 5 слов.
  3. Дополните код, чтобы у пользователя было ограничение по количеству ходов и останавливало игру, если пользователь ввел неверно 20 букв, так и не отгадав слово.

Успехов вам.

2 комментария к записи «JavaScript. Игра «Угадай слово». Проект II»

  1. Здравствуйте. Подскажите как сделать чтобы после не верно угаданной буквы появлялось сообщение » Не правильно «, а если буква уже отгадана «Такая буква ужу отгадана». Не сам код , а логику действий.

    • Думаю, что самый простой способ в данном случае добавить новое условие при котором прежде чем добавить букву, нужно проверить есть такая буква в слове.
      Но на мой взгляд, лучше оставить как есть, потому что это еще и один из способ следить за выбором букв, тренируем память.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Анти-спам: выполните заданиеWordPress CAPTCHA