В процессе обучения написал на JavaScript простенькую игру, в которую многие играли на уроках в школе. Игра называется - "Виселица". Суть в угадывании слова по буквам при ограниченном количестве попыток.
"Общение" программы с пользователем сделал через встроенные в JS функции prompt() , alert() и confirm().
- prompt() - выводит в окне браузера окно с полем для ввода текста и кнопкой подтверждения ввода
- alert() - показывает окно с текстовой информацией и кнопку подтверждения прочтения
- confirm() - выводит окно с вопросом, просит пользователя нажать "ок" или "cancel"
Как выяснилось, все эти функции имеют особенность блокировать окно браузера. Это приводит к невозможности вывести текст или графику. Относительно моей игры получилось так, что обнаружил я это свойство модальных окон (alert, prompt, confirm - модальные окна), когда решил добавить в игру графику при помощи canvas. Canvas (см. 1) - это такой абстрактный "холст", который при помощи HTML тегов <canvas id='some_Id'></canvas> можно добавить на страницу . На этом "холсте" происходит магия рисования всяких линий, кружков, прямоугольников и т.п. Написал код, изображающий человечка на виселице, разбив его на элементы - каждой линии свой объект, заодно потренировался в создании конструкторов. Чтобы добавить графику, заменил в исходном коде игры все выводы alert() на соответствующие объекты, рисующие человечка. И...
...и вместо графики получил ничего. Попробовал просто выводить текст не в alert(), а в <div id='some_Id'>...</div>. И опять неудача. Как только в программе срабатывает prompt(), который просит ввести букву - так любой вывод текста или графики в окно браузера блокируется. Попробовал выводить информацию в консоль браузера(см. 2) через функцию console.log() - информация в консоли появляется как положено. Поиск в интернете на тему блокировки вывода в окно браузера при использовании троицы prompt, alert и confirm - ничего вразумительного не дал, поэтому пришлось обращаться к гуру. Знакомый программист посоветовал самому рисовать окна с полем ввода и кнопкой подтверждения. Для облегчения процесса предложил попробовать подключить к программе JQuery UI. Да, но и это для меня сейчас пока очень сложно.
В результате, я потратил целый день на то, чтобы "прикрутить" графику к игре. Сам написать аналог prompt() пока не решился, поскольку знаний ещё маловато. С моим уровнем это отнимет очень много времени, хотя в перспективе конечно может быть полезным. Поэтому пошёл по более простому пути - нашёл замену стандартным модальным окнам в виде плагина к jQuery. Автор плагина LaViska написал его ещё 29 декабря 2008 года, что символично - так сказать годовщина на носу, ведь сегодня 27 декабря 2019 года. Плагин подгружается аналогично jQuery через <script src='...'>, добавляет три функции: jAlert, jConfirm и jPrompt. Синтаксис использования можно посмотреть в комментариях автора в тексте кода плагина. Я использовал jPrompt вот так:
К сожалению, плагин устарел, редко используется и работает только с древним jQuery. Подгрузить его со страницы автора для работы невозможно, можно лишь скачать его и таблицу стилей в виде файла. Я их скачал и выложил на бесплатный хостинг, чтобы не искать в сети и не пользоваться только локально. Вот ссылки на них.
https://paltus-pangasius-zubatka.000webhostapp.com/jquery.alerts.js
https://paltus-pangasius-zubatka.000webhostapp.com/jquery.alerts.css
В 2016 году автор выпустил обновленную версию плагина под свежую jQuery, ознакомиться и скачать можно с его личного сайта:
https://www.abeautifulsite.net/minimal-jquery-alert-and-confirm-replacements
Игру "Виселица"("Hangman") в играбельном виде я решил выложить так же на хостинг, чтобы можно было сразу запустить и поиграть. Сам код можно посмотреть и скопировать с GitHub:
https://github.com/paltus-pangasius-zubatka/aquarium/blob/master/hangman_v1.0
Upd: Прикрутил более свежий плагин заменяющий prompt. Теперь используется самая поздняя версия jQuery 3.4.1. Сам код игры немного исправил. Получилось вот так:
https://paltus-pangasius-zubatka.000webhostapp.com/hangman/hangman_v1.03.html
- Слово "canvas" с английского на русский переводится как "холст".
- Консоль браузера - это встроенный отладчик, в Google Chrome его можно вызвать нажатием F12 на клавиатуре.