Мастер-класс для начинающих

Мастер-класс разработан для участников STEAM-фестиваля — 11 июня 2021 г., г.Гомель, Беларусь. Для школьников 11 лет и старше.

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

Желательно: владение клавиатурным набором на английском языке.

Требования к оборудованию: компьютер, интернет, наушники/динамики

Требования к программному обеспечению. Необходимо установить:

Постановка задачи

ЗАДАЧА: делаем игру «Царство драконов» в веб-версии на Python.

Идея игры и базовый алгоритм взяты из книги:

Учим Python, делая крутые игры / Эл Свейгарт ; [пер. с англ. М.А. Райтман], — Москва : Эксмо, 2018. – 416 с.

Учим Python, делая крутые игры / Эл Свейгарт
Учим Python, делая крутые игры / Эл Свейгарт

Описание игры см. со с. 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 и этого мастер-класса.

Размещаем для скачивания исходные файлы проекта игры «Царство драконов»:

Скачивайте и пробуйте играть, если свой код написать пока не получилось 😉

12. Как сделать красиво?

Наша веб-игра полнофункциональна, но пока выглядит не очень красиво. Мы подобрали изображения и оформили игру. Теперь в неё играть стало намного интереснее!

Размещаем для скачивания исходные файлы проекта игры «Царство драконов» с картинками и оформлением:

Скачивайте и пробуйте играть!

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

Желаем творческих успехов и новых идей!

Хотите творить вместе с нами, учиться снимать мультфильмы и видео, делать игры и изучать творческое программирование в непринуждённой форме?

Записывайтесь на индивидуальные уроки в АЭЛИТ.