Мастер-класс для начинающих
Мастер-класс разработан для участников STEAM-фестиваля — 11 июня 2021 г., г.Гомель, Беларусь. Для школьников 11 лет и старше.
Требования к участникам: базовое владение компьютером, усидчивость и внимательность.
Желательно: владение клавиатурным набором на английском языке.
Требования к оборудованию: компьютер, интернет, наушники/динамики
Требования к программному обеспечению. Необходимо установить:
Постановка задачи
ЗАДАЧА: делаем игру «Царство драконов» в веб-версии на Python.
Идея игры и базовый алгоритм взяты из книги:
Учим Python, делая крутые игры / Эл Свейгарт ; [пер. с англ. М.А. Райтман], — Москва : Эксмо, 2018. – 416 с.
Описание игры см. со с. 72 книги.
Примечание: абсолютным новичкам, у которых нет опыта написания программ, будет трудно. Но при должном внимании и терпении всё получится! Тем, кто уже писал код на любом языке программирования, будет немного легче. Ну а те, кто знаком с Python, а также хотя бы немного знает HTML, CSS, смогут создать свою уникальную игру.
Исходный код базового алгоритма игры
Для начала работы необходимо загрузить на свой компьютер исходный код базового алгоритма игры — файл dragons.py
Начнём работу над проектом по созданию веб-версии игры «Царство драконов».
1. Создание нового проекта
Открываем PyCharm, создаём новый проект, размещаем в него только что скачанный файл с исходным кодом dragons.py и открываем его:
2. Запуск игры и знакомство с геймплеем
Запускаем файл на выполнение и играем через консоль PyCharm:
3. Алгоритм игры и код программы
Изучаем алгоритм игры «Царство драконов» и код программы:
4. Постановка задачи для реализации веб-версии игры
Окно консоли доступно только разработчикам. Чтобы в игру могли играть простые игроки, необходимо создать её визуальную часть, интерфейс.
Мы создадим веб-версию игры, в которую можно будет играть в любом браузере. Одновременно на практике познакомимся с основами разработки веб-приложений с помощью модуля Bottle для Python. В отличие от популярных профессиональных модулей Flask и Django модуль Bottle более прост для начинающих и позволяет создавать полноценные простые веб-приложения, как наша игра.
Базовый код нашей игры придётся преобразовать, подключив модуль Bottle и используя необходимые для работы функции. Этот процесс профессионалы называют рефакторингом.
Чтобы сохранить исходный вариант консольной версии игры, для начала пересохраним его с именем dragons-web.py
5. Установка модуля Bottle
В редакторе PyCharm установка модулей очень проста. Эта среда разработки избавляет разработчика от необходимости создавать виртуальное окружение и делать дополнительные настройки проекта.
6. Структура веб-приложения и импорт необходимых функций
В отличие от консоли, куда поэтапно в процессе выполнения программы выводится текст и где пользователь может вводить свои данные, веб-приложение – это почти всегда несколько веб-страниц (экранов) и их состояний, которые выводятся в окне браузера. У каждой веб-страницы уникальный адрес, который называется URL (Uniform Resource Locator) — Унифицированный указатель ресурса. Это стандарт для идентификации всех веб-страниц в интернете.
И мы в реализации нашей игры создадим несколько веб-страниц, которые в соответствии с действиями пользователя будут перезагружаться в окне браузера.
Для импорта необходимых функций модуля Bottle пишем следующий код в начале программы:
from bottle import route, run, template
Итак, согласно изученной структуре, нам необходимо написать несколько функций, которые будут отвечать за вывод необходимых веб-страниц в окно браузера
Напомним, что работаем с файлом dragons-web.py, который на данный момент является почти полной копией файла dragons.py
7. Стартовая страница игры
Пишем новую функцию в файле dragons-web.py
dragons()
которая фактически заменит функцию
displayInfo()
Эту функцию пока закомментируем. В дальнейшем ее можно будет удалить.
Код новой функции dragons() следующий:
@route('/dragons')
@route('/dragons/')
def dragons():
return template("dragons")
Контент, который будет выводиться на веб-страницу, разместим в новом файле шаблона dragons.tpl. Здесь напишем приветствие для игрока и краткое описание правил игры. Код файла шаблона пишется на языке гипертекстовой HTML, но может также содержать и код на языке Python. Мы используем самые простые теги: заголовка и абзаца, а Python-код не включаем в шаблон.
Оптимально делать так, чтобы вся логика и вычисления происходили именно на Python, в коде программы (на сервере, back-end), а весь вывод (внешняя часть, front-end) выполнялся через шаблон.
Код файла шаблона dragons.tpl следующий:
<h1>Игра "Царство драконов"</h1>
<p>Вы находитесь в землях, заселенных драконами.
Перед вами две пещеры.</p>
<p>В одной - дружелюбный дракон,
который готов поделиться с вами своими сокровищами</p>
<p>Во второй - злющий, жадный и голодный дракон, который мигом вас съест... </p>
<p>Попытаем удачу?</p>
Основной код игры с игровым циклом также заменится на цикл, который запускает веб-сервер и выполнение функций вывода веб-страниц. Это всего одна (последняя!) строка кода в файле dragons-web.py:
run(host='localhost', port=8080, debug=True)
Игровой цикл старого кода также необходимо закомментировать. Вместо:
playAgain = "да"
while playAgain == "да" or playAgain == "д":
displayInfo()
caveNumber = chooseCave()
checkCave(caveNumber)
print("Попробуем ещё? (да/д или нет)")
playAgain = input()
получим:
# playAgain = "да"
# while playAgain == "да" or playAgain == "д":
# displayInfo()
# caveNumber = chooseCave()
# checkCave(caveNumber)
# print("Попробуем ещё? (да/д или нет)")
# playAgain = input()
В итоговом проекте почти все закомментированные строки (за исключением полезных для понимания комментариев) можно будет удалить.
Запустим код на выполнение и научимся запускать веб-приложение на локальном хосте.
В браузере (в адресной строке) необходимо ввести следующий URL (адрес) веб-страницы:
localhost:8080/dragons
В данном мастер-классе мы опускаем объяснение многих деталей, для того чтобы успеть сделать игру за 1 час. Более детально и подробно мы изучим каждый шаг в отдельном специальном курсе по программированию в Python с нуля.
8. Страница выбора пещеры
Чтобы начать играть, на стартовой странице игрок должен дать своё согласие. Сделаем это самым простым способом, с помощью гиперссылок.
В дальнейшем внешний вид их можно оформить так, что они будут выглядеть как кнопки. Для этого используется язык CSS.
Гиперссылки добавляем в код шаблона dragons.tpl.
<a href="/dragons/choose"> ДА </a> || <a href="#"> НЕТ </a>
Первая гиперссылка – это ссылка на вторую страницу веб-приложения (см. структуру)
Вторая гиперссылка – пустая – фактически станица ссылается сама на себя. Для этого используется знак #
В код dragons-web.py добавляем ещё одну функцию (перед последней строкой с запуском сервера!):
choose()
Эта функция (с некоторыми изменениями) заменит старую функцию
chooseCave()
Закомментируем её в коде, а в конечном итоге удалим.
Код генерации страницы выбора пещеры следующий:
@route('/dragons/choose')
def choose():
return template("choose")
Создаём файл шаблона choose.tpl
Его код:
<p>Вы приближаетесь к пещере...</p>
<p>Вокруг кромешная тьма.. вы начинаете дрожать от страха..</p>
<p>В какую пещеру идём?</p>
<p>Выбирайте:</p>
<a href="/dragons/cave/1"> 1 </a> или <a href="/dragons/cave/2"> 2 </a>
Обратим внимание на то, что в шаблоне фактически частично использован вывод сообщений из старой функции
checkCave(cave)
и добавлен код из функции
chooseCave()
Проверяем работу программы. Запускаем её заново и открываем в браузере стартовую страницу. Тестируем сначала гиперссылку НЕТ, а затем отвечаем ДА.
Содержимое окна браузера должно измениться. Обратим внимание на URL страницы.
Гиперссылки пока будут выдавать страницу с сообщением об ошибке. Это нормально, так как мы ещё не написали все необходимые функции.
9. Определение пещеры с дружелюбным или злобным драконом и сравнение с выбором игрока
Сейчас самое интересное!
Создадим новую функцию с параметром
cave(cave)
которая будет отвечать за вывод веб-страницы с результатом выбора игрока. В этой функции будем вызывать функцию
checkCave(cave)
которую тоже немного видоизменим.
Но всё по порядку.
Добавляем новую функцию
cave(cave)
Её код:
@route('/dragons/cave/<cave>')
def cave(cave):
whichCave = checkCave(cave)
return template("cave", whichCave = whichCave)
Она отличается от всех ранее созданных функций тем, что здесь необходимо получать, обрабатывать и передавать параметры (атрибуты). Они указываются в круглых скобках в строке объявления/вызова функции:
cave(cave) – здесь мы получаем значение параметра с веб-страницы
checkCave(cave) – здесь полученное значение передаётся в вызываемую функцию.
Кроме того, в файл шаблона мы тоже передаём параметр – значение переменной whichCave, которое должна возвращать функция checkCave(cave)
Преобразуем эту функцию следующим образом.
В ветвлении-проверке выбранной пещеры:
if cave == str(friendlyCave):
наряду с выводом на консоль (который можно будет закомментировать и затем удалить, но не торопимся!) добавляем формирование значения возвращаемой переменной с тем же содержимым, которое выводят использованные в коде функции print(). Можно написать свой текст, чтобы игра была более увлекательной.
Весь код ветвления будет выглядеть примерно так:
if cave == str(friendlyCave):
whichCave = "Из пещеры выходит огромный дракон, который ... рад поделиться с вами своими сокровищами"
print("...дракон рад поделиться сокровищами")
else:
whichCave = "Большой дракон выпрыгивает, дышит пламенем ... вы оказались вкусным обедом((..."
print("...вы оказались вкусным обедом((...")
В данном примере мы сделали более содержательный вывод, по сравнению с тем, который был в консоль.
Осталось добавить одну строку в конце данной функции:
return whichCave
Создадим файл шаблона cave.tpl
<h2>{{whichCave}}</h2>
<p>Сыграем ещё раз?</p>
<a href="/dragons/choose"> ДА </a> || <a href="/dragons/end"> НЕТ </a>
Здесь в первой строке в двойных фигурных скобках мы выводим значение передаваемого из кода Python параметра whichCave
Первая гиперссылка ведёт на страницу, которую мы уже запрограммировали. А вторая – на страницу финала игры, которую мы сейчас быстро и легко допишем.
Но сначала проверим работу программы, поиграем в нашу игру. Обращаем внимание на то, как меняются URL веб-страниц. Можно указанные в шаблоне гиперссылки и не делать. Но тогда чтобы сыграть ещё раз, придется заново вручную запускать стартовую страницу игры по адресу
localhost:8080/dragons
10. Финал игры
Если игрок выберет НЕТ на странице результатов игры, ему необходимо вывести страницу /dragons/end
Напишем необходимую для этого функцию endGame()
Можно попробовать сделать это самостоятельно.
Не забываем писать код ДО последней строки run… !
Код для функции endGame() следующий:
@route('/dragons/end')
def endGame():
return template("end")
Создадим файл шаблона end.tpl. Код – самый короткий и простой:
<h2>Спасибо за игру!</h2>
Но можно написать что-нибудь ещё вдохновляющее для игрока, добавить любые ссылки на внешние ресурсы, на стартовую страницу этой игры или на другие игры и т.д.
11. Подведём итоги
Мы сделали веб-версию игры «Царство драконов»!
В коротком видео подводим итоги, узнаём понятия front-end и back-end и понимаем их значение.
Благодарим нашего эксперта Олега Чубина за помощь в разработке курса по программированию игр на Python и этого мастер-класса.
Размещаем для скачивания исходные файлы проекта игры «Царство драконов»:
- Код на Python
- Шаблон страницы старта игры
- Шаблон страницы выбора пещеры
- Шаблон страницы результатов игры
- Шаблон страницы завершения игры
Скачивайте и пробуйте играть, если свой код написать пока не получилось 😉
12. Как сделать красиво?
Наша веб-игра полнофункциональна, но пока выглядит не очень красиво. Мы подобрали изображения и оформили игру. Теперь в неё играть стало намного интереснее!
Размещаем для скачивания исходные файлы проекта игры «Царство драконов» с картинками и оформлением:
- Новый Код на Python — здесь изменились ссылки на шаблоны, а также немного изменён код вывода данных с учётом подбора изображений в зависимости от того, в какую пещеру попал игрок
- Новый Шаблон страницы старта игры — сюда мы добавили изображение и стили
- Новый Шаблон страницы выбора пещеры — здесь тоже картинка и стили
- Новый Шаблон страницы результатов игры — и тут картинка и стили
- Новый Шаблон страницы завершения игры — и здесь картинка, стили, а также дополнительная информация об игре и использованных изображениях
Скачивайте и пробуйте играть!
Придумайте сюжет другой игры на основе этой же логики и попробуйте её реализовать. Подсказка: для этого достаточно будет изменить содержимое в файлах шаблонов, вписав туда другой текст и разместив другие картинки. И ещё потребуется изменить всего две строчки кода, тоже заменив тексты выводимых сообщений.
Желаем творческих успехов и новых идей!
Хотите творить вместе с нами, учиться снимать мультфильмы и видео, делать игры и изучать творческое программирование в непринуждённой форме?
Записывайтесь на индивидуальные уроки в АЭЛИТ.