УДК 004.42-053.2
ББК 32.973.26-018
Г20
Ian Garland
CODING FOR MINECRAFTERS: Adventures for Kids Learning Computer Code
Copyright © 2019 by Hollan Publishing, Inc.
Minecraft® is a registered trademark of Notch Development AB. The Minecraft game is copyright
© Mojang AB. This book is not authorized or sponsored by Microsoft Corp., Mojang AB,
Notch Development AB or Scholastic Inc., or any other person or entity owning or controlling rights
in the Minecraft name, trademark, or copyrights.

Г20

Гарланд, Ян.
Изучаем программирование на примере Minecraft / Ян Гарланд ; [перевод с
английского М. А. Райтмана]. — Москва : Эксмо, 2020. — 160 с. : ил. — (Программирование для детей).
Эта забавная и познавательная книга познакомит детей с захватывающим миром программирования с помощью их любимой игры Minecraft. Знакомые персонажи и сюжеты сделают обучение
интересным, а яркие иллюстрации помогут с легкостью разобраться даже в самых сложных заданиях.
Вы узнаете о циклах, переменных и функциях и, конечно же, научитесь их применять. Каждый ребенок
найдет что-то интересное для себя — будь то создание сайта Стива или анимация крипера. Вас ждет
по-настоящему удивительное путешествие в мир программирования. И начинается оно прямо сейчас!
УДК 004.42-053.2
ББК 32.973.26-018

Все права защищены. Книга или любая ее часть не может быть скопирована, воспроизведена в электронной или механической форме, в виде
фотокопии, записи в память ЭВМ, репродукции или каким-либо иным способом, а также использована в любой информационной системе без
получения разрешения от издателя. Копирование, воспроизведение и иное использование книги или ее части без согласия издателя является
незаконным и влечет уголовную, административную и гражданскую ответственность.

Научно-популярное издание
ПРОГРАММИРОВАНИЕ ДЛЯ ДЕТЕЙ

Гарланд Ян
ИЗУЧАЕМ ПРОГРАММИРОВАНИЕ НА ПРИМЕРЕ MINECRAFT
Главный редактор Р. Фасхутдинов. Руководитель направления В. Обручев
Ответственный редактор Е. Горанская. Литературный редактор В. Иванова
Младший редактор Ю. Клюшина. Художественный редактор Е. Анисина
Компьютерная верстка Е. Матусовская
В оформлении обложки использованы элементы дизайна:
kmls / Shutterstock.com
Используется по лицензии от Shutterstock.com
ООО «Издательство «Эксмо»
123308, Москва, ул. Зорге, д. 1. Тел.: 8 (495) 411-68-86.
Home page: www.eksmo.ru E-mail: info@eksmo.ru
Iндіруші: «ЭКСМО» АMБ Баспасы, 123308, МOскеу, Ресей, Зорге кPшесі, 1 Qй.
Тел.: 8 (495) 411-68-86.
Home page: www.eksmo.ru E-mail: info@eksmo.ru.
Тауар белгісі: «Эксмо»
Интернет-магазин : www.book24.ru
Интернет-магазин : www.book24.kz
Интернет-дкен : www.book24.kz
Импортёр в Республику Казахстан ТОО «РДЦ-Алматы».
MазаVстан РеспубликасындаWы импорттаушы «РДЦ-Алматы» ЖШС.
Дистрибьютор и представитель по приему претензий на продукцию,
в Республике Казахстан: ТОО «РДЦ-Алматы»
MазаVстан Республикасында дистрибьютор жOне Pнім бойынша арыз-талаптарды
VабылдаушыныZ Pкілі «РДЦ-Алматы» ЖШС,
Алматы V., Домбровский кPш., 3«а», литер Б, офис 1.
Тел.: 8 (727) 251-59-90/91/92; E-mail: RDC-Almaty@eksmo.kz
IнімніZ жарамдылыV мерзімі шектелмеген.
Сертификация туралы аVпарат сайтта: www.eksmo.ru/certification

12+

Сведения о подтверждении соответствия издания согласно законодательству РФ
о техническом регулировании можно получить на сайте Издательства «Эксмо»
www.eksmo.ru/certification
Iндірген мемлекет: Ресей. Сертификация VарастырылмаWан

Подписано в печать 18.06.2020. Формат 70x1001/16.
Печать офсетная. Усл. печ. л. 12,96. Тираж
экз. Заказ

ПРИСОЕДИНЯЙТЕСЬ К НАМ!

БОМБОРА – лидер на рынке полезных
и вдохновляющих книг. Мы любим книги
и создаем их, чтобы вы могли творить,
открывать мир, пробовать новое, расти.
Быть счастливыми. Быть на волне.
МЫ В СОЦСЕТЯХ:

bomborabooks
bombora.ru

ISBN 978-5-04-103382-8

bombora
© Райтман М.А., перевод на русский язык, 2019
© Оформление. ООО «Издательство «Эксмо», 2020

ОГЛАВЛЕНИЕ
Родители, спокойствие! ............................................................... 7
Веб-дизайн ..........................................................................................9
Миссия 1. Создаем сайт —
сенсационный блог для Стива .......................................... 10
Миссия 2. Улучшаем сайт:
для чего Стиву стили CSS .....................................................18
Миссия 3. Налаживаем общение:
знакомство с JavaScript ...................................................... 29
Миссия 4. В путь: улучшаем работу
сайта с помощью циклов .....................................................35
Миссия 5. Играем со Стивом: сочиняем игру ........... 43
Анимационные приключения .................................................47
Миссия 1. Работаем с персонажами:
ресурсы и анимация ............................................................. 48
Миссия 2. Курица против крипера:
программируем движение ..................................................53
Миссия 3. План спасения курицы:
да здравствует вращение! .................................................. 60
Миссия 4. Удивительные яйца:
играем с плагинами ................................................................67
Сочиняем музыку ..........................................................................75
Миссия 1. Творчество Стива:
создаем онлайн-пианино .....................................................76
Миссия 2. Импровизация:
добавляем аудиоэффекты ................................................. 84

Миссия 3. В очереди на прослушивание:
музыка на сайте Scratch ...................................................... 88
Миссия 4. Номинация на золото:
сочиняем музыку Minecraft ................................................ 95
Миссия 5. Война миров:
Новые звуки в мире Minecraft .......................................... 99
Большая игра ................................................................................107
Миссия 1. Лабиринт в духе Minecraft:
простая игра с помощью Scratch...................................108
Миссия 2. На просторах Интернета:
создаем онлайн-игру ............................................................ 117
Миссия 3. Очки против криперов:
программируем игру на результат ................................ 124
Миссия 4. Новый уровень:
cовершенствуем игру ......................................................... 135
Миссия 5. Внутри Minecraft:
замена объектов ....................................................................143
Глоссарий ........................................................................................ 155
Исправляем ошибки .................................................................. 157

РОДИТЕЛИ,
СПОКОЙСТВИЕ!
Время, когда компьютерная игра считалась пустой
тратой времени, осталось позади. В наши дни такие
игры как Minecraft способствую развитию творческих способностей, формируют навыки программирования. Однако большая часть учебников
и книг об основах программирования скучны —
в них много теории. Да и зачем она, если, изучив
ее, не получается воплотить в жизнь свои идеи?
В них мало практики.
Книга «Изучаем программирование на примере
Minecraft» в противоположность остальным пособиям прививает любовь к программированию,
превращая его из рутины в хобби. Мы, конечно,
рассмотрим основы — переменные, циклы, функции, но только через призму их возможностей. Мы
создадим удивительные вещи!
В этой книге мы будем делать все задания в мире
Minecraft с участием любимых персонажей. Каждый найдет что-то интересное для себя — будь то
создание сайта Стива, анимация крипера или изменение непосредственно игрового мира.
Сегодня ваши дети просто играют в Minecraft
и изучают основы написания кода, а в будущем
станут крутыми профессионалами. Давайте поможем им сделать первые шаги к мечте! Их ждет удивительное путешествие в мир программирования.

Для выполнения миссии

НЕОБХОДИМО
•

Игра Minecraft, установленная в операционной
системе Windows или macOS

•

Текстовый редактор

•

Пользователям Windows для работы подойдет
текстовый редактор Блокнот. Тем, у кого macOS,
можно работать в приложении TextEdit. Однако же мы рекомендуем использовать программы
с цветным оформлением кода.
Для Windows: приложение Notepad++
Можно скачать по ссылке: notepad-plus-plus.org
Для macOS: Atom
Можно скачать по ссылке: atom.io

•

Браузер и подключение к Интернету. Некоторые
элементы кода на языке HTML5 неправильно работают в браузерах Internet Explorer и Mozilla
Firefox. Поэтому мы рекомендуем использовать
Google Chrome, если есть такая возможность.
Важно на время изучения этой книги разрешить
всплывающие окна на страницах, которые мы
будем создавать вместе. Скачать Google Chrome
можно по ссылке: www.google.com/chrome/

ВЕБ-ДИЗАЙН

МИССИЯ 1
СОЗДАЕМ САЙТ —
СЕНСАЦИОННЫЙ
БЛОГ Д ЛЯ СТИВА

С

тив хочет создать собственный сайт, но не знает
как. Обычный текстовый редактор и язык программирования HTML помогут нам создать основу
для сайта. В результате сегодняшней миссии мы
построим фундамент, на котором позже разместим
много интересных элементов. Повеселимся!

Язык HTML составляет основу веб-страницы.
Важно заложить фундамент будущего сайта
правильно. В конце концов, прежде чем строить дом, удостоверься, что фундамент его выдержит!

Веб-дизайн

НА СТАРТ!
1. Открой текстовый редактор (при необходимости см. врезку «Для выполнения миссии необходимо»). Запомни, что программирование на
языке HTML ВСЕГДА НАЧИНАЕТСЯ СО СЛЕДУЮЩИХ СТРОК:

Элемент DOCTYPE сообщает браузеру, какую
версию языка HTML ты используешь при создании сайта. До выхода пятой версии HTML —
HTML5 — эта строчка могла быть очень длинной.
Теперь намного проще запомнить, что именно
нужно указывать в элементе DOCTYPE. И это
отлично, ведь такая строка должна быть в начале каждой страницы сайта! Давай пропишем
элемент DOCTYPE прямо сейчас.
2. Видишь текст, заключенный между угловыми скобками? Это HTML-ЭЛЕМЕНТ. Чтобы ЗАКРЫТЬ ПОЧТИ ЛЮБОЙ HTML-ЭЛЕМЕНТ, ЕГО
ПЕЧАТАЮТ СНОВА, но с косой чертой перед
первой буквой. HTML-ЭЛЕМЕНТЫ СОСТОЯТ ИЗ
ОТКРЫВАЮЩЕГО И ЗАКРЫВАЮЩЕГО ТЕГОВ.
Итак, мы открыли раздел HTML-документа с помощью открывающего тега <html> элемента
html. Теперь мы должны закрыть раздел с помощью закрывающего тега </html> элемента html
внизу страницы так, как показано на рисунке:

3. Теперь, как и у Стива, у НАШЕЙ СТРАНИЦЫ ДОЛЖНЫ ПОЯВИТЬСЯ ГОЛОВА И ТЕЛО
(но без ножек!). Напечатай под тегом <html>:

1

1

1

2

Изучаем программирование на примере Minecraft

«Голову» (все, что будет содержаться между тегами <head> и </head>)
мы наполним важной информацией
о веб-странице. А в тело (все, что
будет содержаться между тегами
<body> и </body>) поместим то, чем
мы хотим делиться на нашем сайте.
Пора заполнить нашу страницу!
4. Добавим несколько элементов
div в тело нашего документа. ЭЛЕМЕНТ DIV СЛУЖИТ КОНТЕЙНЕРОМ,
в который можно поместить другие объекты. Нам
понадобится несколько таких контейнеров, так что
продолжим и ДОБАВИМ ДВА ЭЛЕМЕНТА DIV после открывающего тега <body>. Обязательно добавь закрывающие теги </div>!

Волшебный контейнер
Контейнер
div
можно сравнить с сундуком
в Minecraft. Он нужен,
чтобы хранить содержимое в идеальном порядке,
куда лучшем, чем в твоей
комнате! Так же, как сундук помогает улучшить
внешний вид комнаты,
элемент <div> поможет
нам украсить сайт Стива.
Этот маленький элемент
кода может изменить все.

X

Веб-дизайн

Теперь щелкни мышкой перед тегом <div> и НАЖМИ КЛАВИШУ TAB (эта клавиша находится рядом
с клавишей буквы Й на клавиатуре). Заметил, как
текст сдвинулся вправо? Программисты делают это
для того, чтобы можно было легко увидеть структуру и содержимое других элементов. Элементы
div, помещенные в «тело» нашего сайта (элемент
body), должны быть немного сдвинуты вправо.
Также мы ДОБАВИЛИ АТРИБУТ ID (он называется
идентификатором) В КАЖДЫЙ ТЕГ <DIV>. Не волнуйся, пока это не имеет значения! Позже ты поймешь, для чего мы это сделали. Ты сможешь изменить значение атрибута id в любой момент, однако
обрати внимание: важно случайно не добавить
пробел!

1

3

1

4

Изучаем программирование на примере Minecraft

ВНИМАНИЕ! МАРШ!!
5. Наши контейнеры готовы. Пора заполнить их!

Ты видишь, что в контейнер div мы поместили
элементы p? Они ЗАПОЛНЯЮТ САЙТ ТЕКСТОМ
и разделяют его на абзацы. Текст в каждом p автоматически начинается с новой строки. Текст
легче читать, если он разделен на абзацы.
ПРОЧИТАЙ ВОПРОСЫ, ЗАКЛЮЧЕННЫЕ МЕЖДУ ЭЛЕМЕНТАМИ P, и введи свои ответы перед
закрывающим тегом </p>.
6. ОТКРОЙ МЕНЮ ФАЙЛ в левом верхнем углу
окна , выбери в меню команду СОХРАНИТЬ КАК.
Самое время присвоить имя твоей странице.
Поскольку мы работаем над главной страницей
будущего сайта, назовем ее INDEX. Создай папку, в которую сохранишь последующие файлы.
Тогда ты легко найдешь их в нужный момент.
Если в открытом окне СОХРАНИТЬ КАК тебе
предлагают выбрать тип файла, выбирай вариант HTML или Hyper Text Markup Language.

Веб-дизайн

Если же такую команду ты найти не можешь,
выбери вариант ВСЕ ФАЙЛЫ, а в конце имени
файла укажи расширение .HTML. Теперь все готово — нажми кнопку СОХРАНИТЬ.

7. Готов посмотреть, что мы создали? Найди только что сохраненный тобой HTML-ФАЙЛ И ЩЕЛКНИ ПО НЕМУ. Перед тобой откроется созданная твоими руками страница сайта Стива!

Выглядит неплохо, но пустовато, не так ли? Давай добавим картинку!
8. Открой свою любимую программу для рисования, чтобы НАРИСОВАТЬ И РАСКРАСИТЬ ПОРТРЕТ СТИВА. Избавься от белых полей вокруг
рисунка. В противном случае картинка будет
окружена белым на веб-странице. Сделать это
тебе поможет команда ОБРЕЗАТЬ. Выдели область рисунка, постарайся включить в область
выделения весь рисунок без лишних белых
участков.

1

5

1

6

Изучаем программирование на примере Minecraft

Как только ты закончишь, выбери команду СОХРАНИТЬ. Присвой файлу с рисунком имя
STEVE.JPG. Убедись, что в раскрывающемся
списке Тип файла выбран вариант JPEG. Файл
следует сохранить в ту же папку, куда ранее ты
сохранил документ HTML.
9. Самое время вернуться в текстовый редактор,
чтобы после первого тега <div> ввести следующее:

ВИДИШЬ, МЫ ПРИСВОИЛИ РИСУНКУ ИДЕНТИФИКАТОР ID? Он пригодится нам позже, когда
мы решим изменить расположение или размер
рисунка. Атрибут src позволит веб-странице
безошибочно определить, где находится нужный рисунок. Особенность элементов img в том,
что закрыть их можно более простым способом — с помощью символов />. Но если тебе
так удобнее, воспользуйся привычным закрывающим тегом </img>.

Веб-дизайн

Перезагрузи сайт, чтобы появился рисунок!
Мы проделали большую работу и создали твой
первый сайт! Но до финиша еще далеко. В следующей главе мы расскажем, как улучшить
внешний вид сайта Стива, используя разные
цвета.

1

7

МИССИЯ 2
УЛУЧШАЕМ САЙТ:
Д ЛЯ ЧЕГО СТИВУ
СТИЛИ CSS

Д

о сих пор мы знакомили тебя с основами HTML.
Теперь узнаем, что такое каскадные таблицы
стилей, или CSS. Разобраться со стилями CSS довольно легко. Они позволят оформить сайт по твоему желанию. Готов узнать задание второй миссии?

Стив способен на многое! Так
же как и его сайт — с твоей
помощью и с помощью стилей CSS!

Веб-дизайн

НА СТАРТ!
1. Открой HTML-файл с именем index, который мы
создали во время первой миссии. ДОБАВЬ СЛЕДУЮЩИЙ ТЕКСТ вверху страницы после тега
<head>:

Благодаря этой строке HTML-файл теперь знает, где находится твой файл со стилями CSS.
Раздел href содержит имя CSS-файла. Так что
перейдем к созданию файла с именем style.css.
2. Открой новый документ в текстовом редакторе.
Присвой ему имя STYLE.CSS и сохрани в папку
вместе с созданной ранее веб-страницей. Убедись, что в раскрывающемся списке Тип файла
ВЫБРАН ВАРИАНТ CSS. Если эта строка отсутствует, добавь расширение .css в конце имени
файла при его сохранении.

ВНИМАНИЕ! МАРШ!!
3. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ ОПРЕДЕЛЯЮТ
СТИЛИ ДЛЯ РАЗЛИЧНЫХ HTML-ЭЛЕМЕНТОВ
веб-страницы. Начнем с простого. Напечатай
в CSS-файле следующее:

Затем сохрани изменения (это следует делать
после каждого внесенного изменения) и перезагрузи веб-страницу. Текст стал красным!

1

9

2

0

Изучаем программирование на примере Minecraft

Как это работает? СТИЛИ CSS ПРИМЕНЯЮТСЯ К ТЕМ ЭЛЕМЕНТАМ, КОТОРЫЕ УКАЗАНЫ
В ФАЙЛЕ ПЕРЕД ФИГУРНЫМИ СКОБКАМИ. Мы
написали p, и внешний вид текста, находящегося
между тегами <p> и </p> в файле веб-страницы,
изменился. Внутри фигурных скобок мы указали, что именно хотим изменить. Раскрась текст
другими цветами, не только красным.
4. Почему бы не ИЗМЕНИТЬ ФОНОВЫЙ ЦВЕТ НАШЕЙ СТРАНИЦЫ? Для этого напечатай:

Веб-дизайн

Больше возможностей —
больше цвета

2

X

Если ты хочешь использовать больше цветов,
введи в поисковую строку Google запрос «CSS
инструмент выбора цвета». Этот инструмент
поможет тебе выбрать шестнадцатеричное
цифровое обозначение цвета, который можно
использовать для оформления веб-страницы
вместо его словесного обозначения. Шестнадцатеричное обозначение цвета — это набор
цифр и букв с символом «#» перед ними.

Мы заменили в CSS-файле синий фон на цвет, выбранный с помощью инструмента выбора цвета
так, как показано на рисунке ниже.

1

2

2

Изучаем программирование на примере Minecraft

5. Чтобы сделать сайт Стива более современным,
мы применим иное оформление к ЭЛЕМЕНТУ DIV
С ИДЕНТИФИКАТОРОМ TOPBAR. Если мы просто
напечатаем div, стили CSS изменят внешний
вид содержимого всех элементов div на вебстранице. А мы этого не хотим. Помнишь, как мы
ранее присвоили идентификатор? Благодаря
ему теперь мы можем ВЫБРАТЬ ОПРЕДЕЛЕННЫЙ ЭЛЕМЕНТ DIV, ЕСЛИ УКАЖЕМ ЕГО ИДЕНТИФИКАТОР С СИМВОЛОМ # ПЕРЕД НИМ.
Введи указанный на рисунке текст в CSS-файл,
после чего сохрани файл и обнови страницу:

Веб-дизайн

Видишь, как изменился внешний вид раздела? Теперь он полностью белый! Однако здесь
слишком много пустого пространства. Сделаем
текст крупнее и расположим его иначе.
6. Введем недостающий элемент в CSS-файл. У нас
должно получиться #TOPBAR P. Это значит, что
выбранные стили CSS мы применим к содержимому всех абзацев, обозначенных элементами p
внутри элемента div с присвоенным ему идентификатором topbar.

ПОПРОБУЙ УМЕНЬШИТЬ ИЛИ УВЕЛИЧИТЬ
РАЗМЕР ОКНА БРАУЗЕРА. Видишь, как изменился текст и раздел приветствия? Твой сайт
будет отлично отображаться на любом устройстве, будь то смартфон, монитор компьютера

2

3

2

4

Изучаем программирование на примере Minecraft

или планшет. Однако если экран будет очень
маленьким, портрет Стива окажется за его пределами. Исправим это!
7. РИСУНОК ДОЛЖЕН ВСЕГДА РАСПОЛАГАТЬСЯ в окне браузера слева. Также нам придется слегка уменьшить размеры портрета, чтобы
страница выглядела симпатичнее.

Отлично, рисунок остается на месте даже на маленьком экране! Чтобы понять, как это работает,
впиши другие числа и посмотри, что изменится.

Веб-дизайн

8. Время ДОБАВИТЬ ФИНАЛЬНЫЕ ШТРИХИ.
Стиль основного раздела div должен соответствовать оформлению раздела приветствия,
а текст всех абзацев, заключенных в элементы
p, следует увеличить. Для этого добавь в свой
CSS-файл следующие строки:

Мы добавили пару новых параметров. СВОЙСТВО BORDER-RADIUS закругляет углы вокруг
блока. Благодаря этому раздел веб-страницы,
заключенный в контейнер div, выглядит более
современно. СВОЙСТВО WORD-BREAK не дает
браузеру разбивать слово на несколько строк
при просмотре страницы на устройстве с маленьким экраном.

2

5

2

6

Изучаем программирование на примере Minecraft

Как программировать размер

X

В некоторых случаях для изменения размера
блока мы использовали процентное обозначение, в других указывали конкретное значение
в пикселях. Почему? Пиксели идеально подходят, когда нужно установить определенный постоянный размер раздела. Например, мы дали
очень подробный ответ на вопрос. Попробуй
ввести дли-и-и-и-инный ответ в HTML-документ,
сохрани изменения и перезагрузи страницу. Видишь, что произошло?

Раздел с ответами увеличился, правда? Если бы
мы указали в пикселях свойство изменения размера в CSS-файле, текст ответа просто вышел
бы за границы блока и попал на синий фон! Делаем вывод, что размер в пикселях стоит указывать только в том случае, если размеры объекта
остаются постоянными.

9. Давай познакомимся с ПОСЛЕДНИМ ЗАДАНИЕМ нашей миссии. Введи в своем CSS-файле
в разделе #steve следующее свойство:

Веб-дизайн

Видишь разницу? Портрет Стива перевернулся!
Потренируйся, указывая новые значения, и смотри, что получается.

Миссия выполнена. После завершения работы
напечатай две косые черты в начале строки. ТАК
ТЫ ДОБАВИШЬ В ФАЙЛ CSS КОММЕНТАРИЙ,
КОТОРЫЙ НИКОГДА НЕ БУДЕТ ОТОБРАЖАТЬСЯ НА СТРАНИЦЕ. Комментарий пояснит, что
изменяют стили. Если что-то на веб-странице
отображается необычно, не удаляй раздел,
а попробуй разобраться с проблемой с помощью комментирования.
Комментарий может быть многострочным.
В этом случае следует указать косую черту
и символ * в начале и конце строки. Например,
вот так:

Запомни, что комментирование в HTMLдокументе отличается от описанного выше. Но

2

7

2

8

Изучаем программирование на примере Minecraft

есть и хорошие новости! Независимо от того,
создаешь ли ты однострочный или многострочный комментарий, написать его можно одинаковым способом:

Поздравляем тебя с победой над стилями CSS!
Мы зашли очень далеко! Продолжай тренироваться и менять свойства стилей, и вскоре ты
станешь мастером.

МИССИЯ 3
НАЛАЖИВАЕМ
ОБЩЕНИЕ:
ЗНАКОМСТВО
С JAVASCRIPT

С

помощью языка программирования HTML создают структуру веб-страницы. Стили CSS определяют ее внешний вид. Для чего же нужен язык
программирования JavaScript, или, как его иногда называют, JS? Все просто. Он позволяет сделать страницу интерактивной: добавляет крутые
элементы, с которыми можно взаимодействовать.
Работать с таким сайтом увлекательнее и проще, чем с обычным! Придадим немного интерактивности блогу Стива, обратившись за помощью
к JavaScript.

JavaScript можно сравнить с редстоуном в Minecraft.
С его помощью твои возможности становятся почти безграничными!

3

0

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Самое время добавить пару новых элементов
в HTML-файл — под строкой с тегом </body>
и над строкой с тегом </html>. Введи в указанное место открывающий и закрывающий теги
<SCRIPT></SCRIPT>. Любой код JavaScript, который мы решим включить в HTML-файл, нужно
добавлять между этими тегами.
2. Теперь мы должны определить переменные.
ПЕРЕМЕННЫЕ ХРАНЯТ ЗНАЧЕНИЯ, КОТОРЫЕ
ПОЗДНЕЕ МОГУТ БЫТЬ ИСПОЛЬЗОВАНЫ во
время работы с сайтом. Переменные могут содержать числа, текст или даже список других
переменных. Чтобы создать переменную, введи
код в таком виде:
var имя_переменной = значение_переменной
Например, так:
var x = 5

Имя переменной должно состоять из одной или
нескольких букв без пробелов, например одного слова. При желании ты, конечно, можешь
использовать и несколько слов (но без пробелов), но лучше придумывать простые имена.
Переменные могут описывать самые разные

Веб-дизайн

параметры. Например, код на рисунке создает
диалоговое окно с числом 9.

ВНИМАНИЕ! МАРШ!!
3. Теперь, после знакомства с основами, приступим
к экспериментам. ОТКРОЙ СВОЙ HTML-ФАЙЛ
под именем index, созданный в ходе выполнения
первой миссии. В его нижней части, между закрывающими тегами </body> и </html>, введи
следующий код:

МЫ НАПИСАЛИ МИНИ-ПРОГРАММУ SAYHELLO,
КОТОРАЯ СПРАШИВАЕТ У ПОЛЬЗОВАТЕЛЯ
ЕГО ИМЯ. Имя — это переменная, которая, как
ты помнишь, может быть числом, текстом или
списком. В нашем случае мы используем переменную, чтобы отобразить имя пользователя
в диалоговом окне.
4. Первое, на что стоит обратить внимание, это код
IF(NAME !== NULL). Здесь используется оператор if (если). Если условие в круглых скобках
верно, выполняется связанный с ним код. В противном случае код «молчит». Так какое же условие должно быть выполнено в нашем случае?

3

1

3

2

Изучаем программирование на примере Minecraft

В JavaScript восклицательный знак (!) обозначает «нет». Введенный нами код !== можно перевести как «не равно». Значение null говорит
о том, что имя не было указано пользователем.
Таким образом, если пользователь ввел свое
имя (введенное пользователем имя не равно
нулю), код заработает. Пока программа знает
имя пользователя, она будет исполнять условие, написанное в коде.
Текст условия кода JavaScript нужно заключать
в кавычки. Если ты используешь переменную,
ее нужно ограничить кавычками и знаками плюс
(+) с двух сторон. В противном случае условие
работать не будет.
5. Теперь пора СООБЩИТЬ САЙТУ, КОГДА НАШЕ
УСЛОВИЕ ДОЛЖНО БЫТЬ ВЫПОЛНЕНО. Для
этого введи под элементами p следующее:

ТЕКСТ МЕЖДУ ТЕГАМИ BUTTON И ЕСТЬ СООБЩЕНИЕ, КОТОРОЕ ПОЯВИТСЯ ПРИ НАЖАТИИ КНОПКИ. Попробуй изменить его, прояви
фантазию! Когда закончишь, обнови страницу
и нажми кнопку.

Должно появиться окно наподобие этого. Если
ты разобрался с JavaScript-кодом, то знаешь,
что произойдет после того, как ты введешь имя.
Попробуй прямо сейчас!

Веб-дизайн

Отлично, похоже, наша функция работает безупречно! Но кнопка выглядит не так безупречно,
не правда ли? Давай исправим ее с помощью
каскадной таблицы стилей.
6. ОТКРОЙ СВОЙ CSS-ФАЙЛ и добавь в него стили и свойства, чтобы улучшить внешний вид
кнопки:

Сохрани изменения, перезагрузи сайт и посмотри, что получилось. Стало лучше, правда?

3

3

3

4

Изучаем программирование на примере Minecraft

Поэкспериментируем!

X

Следующая часть твоей миссии — изменение
границ кнопки, увеличение размера шрифта
и размера кнопки, чтобы они лучше заполняли
пространство страницы. Почему бы также не
изменить цвет кнопки? Выбери любимый! Напомним, это можно сделать двумя способами:
указать либо название цвета, либо его шестнадцатеричный код (вернись в предыдущую миссию, чтобы освежить знания).

Мы заложили хорошую базу знаний о языке
JavaScript. Теперь ты умеешь создавать переменные. Во время выполнения четвертой миссии ты
узнаешь о JavaScript еще больше. Например, об
удивительных возможностях циклов!

МИССИЯ 4
В ПУ ТЬ: УЛУЧШАЕМ
РАБОТ У САЙТА
С ПОМОЩЬЮ
ЦИКЛОВ

П

ервые знания и навыки создания переменных
с помощью JavaScript открывают большие возможности, правда? Однако код на языке JavaScript
позволяет делать намного больше! В ходе выполнения четвертой миссии мы применим к рисунку циклы и получим впечатляющий результат. Что такое
цикл? Это команда, запускающая исполнение кода
несколько раз автоматически, без твоего участия.

С помощью циклов ты сможешь легко и быстро повторять выполнение одного и того же фрагмента кода. Как думаешь, такая
функция пригодилась бы тебе во время уборки комнаты?

3

6

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Ты удивишься, насколько просто РАБОТАТЬ
С ЦИКЛАМИ:

Напечатай строки, показанные на рисунке ниже,
между открывающим и закрывающим тегами
элемента script в твоем HTML-файле:

В этом примере переменной присвоено имя i,
и ее значение начинается с единицы. Видишь
конец строки? Фрагмент кода i++ работает
точно так же, как и код i = i+1. С каждым выполнением цикла значение переменной i будет
увеличиваться на единицу до тех пор, пока не
достигнет максимального значения, указанного нами в коде, равного шести. Таким образом,
наш цикл повторится пять раз.
Какой код исполняется при запуске цикла? Создается диалоговое окно с текущим значением
переменной i. Цикл повторится пять раз. После
перезагрузки страницы появятся пять диалоговых окон друг за другом. Легко, не правда ли?

Веб-дизайн

Давай продолжим. Удали этот код. Теперь создадим циклы для сайта Стива!
2. Что, если нам нужна функция, которая будет
выбирать случайный вариант из списка? Для
выполнения этой задачи нам пригодятся массивы. МАССИВЫ — ЭТО РАЗНОВИДНОСТЬ ПЕРЕМЕННЫХ. По сути, это списки, но с их помощью
перед тобой откроются новые возможности,
и ты скоро сам в этом убедишься!

3

7

3

8

Изучаем программирование на примере Minecraft

В массив можно включить все что угодно! Рассмотрим несколько примеров:

Да здравствуют массивы!

X

На этом примере видно,
что внутри массива можно
перечислять и смешивать
самые разные типы переменных. Этот список продолжается до тех пор, пока
ты разделяешь переменные
запятыми. Массив похож
на твою комнату — внутри
находится множество самых разных предметов. И важно правильно организовать их в пространстве.
Еще одна крутая особенность массива заключается в том, что ты можешь запустить исполнение отдельной его части. Для этого достаточно
прописать в сценарии порядковый номер выбранного элемента массива. Обрати внимание:
элементы массива нумеруются начиная с нуля,
а не единицы, так что для обращения к первому
элементу следует указать код myFirstArray[0].
Для обращения ко второму элементу массива
укажи код myFirstArray[1] и так далее.

Веб-дизайн

ВНИМАНИЕ! МАРШ!!
3. Для начала открой свой HTML-файл. Под строкой кода кнопки (внутри раздела mainsection)
в HTML-документе ДОБАВЬ ЕЩЕ ОДИН ЭЛЕМЕНТ DIV. ПРИСВОЙ ЕМУ ИДЕНТИФИКАТОР
LOOP-SECTION. Далее добавим еще одну кнопку,
указав следующий код:
4. Чтобы ДОБАВИТЬ на веб-страницу НОВЫЕ
ЭЛЕМЕНТЫ, воспользуемся БИБЛИОТЕКОЙ
JQUERY. В верхней части раздела head добавь
строку:
Библиотека jQuery представляет собой очень
большой файл. Поэтому не нужно загружать ее
на компьютер. С помощью этой строки кода мы
укажем нашей веб-странице, где можно найти
библиотеку jQuery в Интернете.
5. Кнопка после нажатия запустит ФУНКЦИЮ
EXPLORE(). Давай добавим ее. Помнишь, как это
сделать?

Далее перейдем к СОЗДАНИЮ ПАРЫ МАССИВОВ. В первом массиве будут храниться твои
любимые локации в Minecraft, во втором — то,
что ты находишь на своем пути во время путешествия по миру Minecraft.

3

9

4

0

Изучаем программирование на примере Minecraft

Теперь добавим КОД ДЛЯ СЛУЧАЙНОГО ВЫБОРА ЛОКАЦИЙ из массива:

Возможно, пока тебе не все понятно. Однако поверь, код работает. Из массива locations можно выбрать самые разные варианты случайным
образом от нулевого значения до последнего
элемента массива.
6. Ты можешь менять любые разделы сайта с помощью JavaScript. Сейчас мы напишем код,
и ТЕКСТ В РАЗДЕЛЕ LOOP-SECTION ОТДЕЛИТСЯ от остального текста после нажатия кнопки
«Поехали!»

Захватывающая часть нашей миссии! ДОБАВИМ
СЛУЧАЙНЫЕ ВАРИАНТЫ ЛОКАЦИЙ на нашу
страницу ИЗ БИБЛИОТЕКИ JQUERY:

Веб-дизайн

Сохрани изменения в документе, перезагрузи
сайт и НАЖМИ КНОПКУ «ПОЕХАЛИ!». Что изменилось? Нажми кнопку несколько раз и следи за изменениями.

Заметил, как меняется текст? Это происходит,
потому что при КАЖДОМ НАЖАТИИ КНОПКИ
НАПИСАННАЯ ТОБОЙ ФУНКЦИЯ EXPLORE()
ОБРАЩАЕТСЯ К МАССИВУ И ВЫБИРАЕТ ЭЛЕМЕНТ ИЗ НЕГО СЛУЧАЙНЫМ ОБРАЗОМ. Конечно, иногда текст может повторяться. Дело в том,
что выбор ограничен вариантами, включенными в массив. Расширишь список?
7. Пришла пора ВОСПОЛЬЗОВАТЬСЯ ЦИКЛОМ,
ЧТОБЫ ВЫБРАТЬ ТРИ ПУНКТА из нашего массива и отобразить их на странице.

Что произошло после нажатия кнопки?

Выглядит неплохо, но кое-что стоит изменить.
Чтобы убрать последнюю запятую, давай добавим строку $('#loop-section') и условие if.
Обрати внимание на двойной знак равенства
в операторе if.

4

1

4

2

Изучаем программирование на примере Minecraft

В JavaScript ты можешь использовать одинарный знак равенства только при создании и изменении переменных.

Получилось? При выполнении условия i = 3
после третьего ответа не появляется лишняя
запятая. Кроме того, перед третьим вариантом
появляется союз «и». Оцени, как страница выглядит теперь!

Отличная работа! Ты только что создал функцию
с переменными на языке программирования
JavaScript, использовал циклы и операторы if.
Удивительно, но с помощью них можно создавать и изменять все, что только придет в голову.
Пофантазируй и воплоти в жизнь любые идеи,
используя переменные, циклы и операторы if.

МИССИЯ 5
ИГРАЕМ
СО СТИВОМ:
СОЧИНЯЕМ ИГРУ

П

осетители сайта Стива ожидают найти здесь
игру. Придумать и добавить ее на сайт проще,
чем может показаться на первый взгляд!
Мы освоили принципы кодирования и теперь
объединим и напишем код игры. Каждая игра, даже
самая известная, начиналась с простого. Поэтому давай объединим усилия и вместе придумаем
игру.

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

4

4

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Вначале создадим ссылку, по которой любой
пользователь сможет найти игру и весело провести время. Открой свой HTML-файл. Помнишь,
как мы создавали кнопки? ДОБАВЬ ЕЩЕ ОДНУ
КНОПКУ внизу, под другими кнопками. Пропиши в файле условие, которое при нажатии этой
кнопки ЗАПУСТИТ ФУНКЦИЮ PLAYGAME(). Напиши на кнопке текст «Играть!».

2. Теперь ОПРЕДЕЛИМ ФУНКЦИЮ. Напоминаем,
что эту часть кода следует писать внутри элемента script. Для начала нам нужно получить
кое-какую информацию от пользователя. Спросим у него про его любимых персонажей и монстров из Minecraft. Помнишь, как создать такой
диалог с пользователем?

Веб-дизайн

3. Игра основана на информации, которую укажет
пользователь в поле ввода. Поэтому мы ДОЛЖНЫ БЫТЬ УВЕРЕНЫ, ЧТО ПОЛЬЗОВАТЕЛЬ
УКАЖЕТ И ИМЯ ЛЮБИМОГО ПЕРСОНАЖА,
И НАЗВАНИЕ ЛЮБИМОГО МОНСТРА. Для этого
воспользуемся условием if(favCharacter &&
favMonster), которое проверит, заполнено поле
для ввода имен или нет. Обрати внимание на
следующую особенность: символ & указан два
раза. Это сделано для того, чтобы программа
принимала только два ответа. Одного ей будет
недостаточно.

4. Мы можем ПРЕДОСТАВИТЬ ИГРОКУ ВЫБОР,
ЧТО ИМЕННО ОН ХОЧЕТ СКРАФТИТЬ, И В ЗАВИСИМОСТИ ОТ ВЫБОРА СОЗДАТЬ СЦЕНАРИИ
ИГРЫ. Не обязательно использовать историю
из примера выше. Это всего лишь пример.

Видишь, как выбор пользователя влияет на
игру? Давай добавим больше интерактивности?
Код с оператором if, показанный ниже, предназначен для игроков, желающих скрафтить
постель.

4

5

4

6

Изучаем программирование на примере Minecraft

Но выполнение обоих написанных нами условий приводит к завершению игры, а мы хотим
продолжения! Нам нужно множество ОПЕРАТОРОВ IF, ВЛОЖЕННЫХ друг в друга. На них
будет построена структура игры.

А вот что-то новенькое! Ты обратил внимание,
что ОПЕРАТОР IF, связанный с выбором волка, СОДЕРЖИТ УСЛОВИЕ ELSE. Что это значит?
Ввод команды «приручить» приведет к запуску
строки кода if. А ввод любой другой команды
запустит следующую часть кода, которая начинается с команды else. Это отличный способ
предоставить игроку выбор между различными
сценариями игры.
Готов погрузиться в мир программирования
еще глубже? Нас ждет большое анимационное
приключение!

АНИМАЦИОННЫЕ
ПРИКЛЮЧЕНИЯ

МИССИЯ 1
РАБОТАЕМ
С ПЕРСОНАЖАМИ:
РЕСУРСЫ
И АНИМАЦИЯ

П

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

Извечный вопрос, что было
первым — курица или
яйцо? Наша миссия дает
свой вариант ответа — курица и крипер!

Анимационные приключения

1. Запусти свою ЛЮБИМУЮ ПРОГРАММУ ДЛЯ
РИСОВАНИЯ. Начнем с курицы из Minecraft.
Причем на рисунке она должна располагаться
в профиль. Если ты развернешь курицу «клювом» к себе, не получится претворить в жизнь
нашу идею. Нарисуй туловище курицы в виде
большого прямоугольника. Прямоугольники поменьше пусть станут головой, крыльями и другими элементами.
2. После того, как ты завершишь свой рисунок,
раскрась его. Далее необходимо обрезать рисунок как можно ближе к его границам. Но будь
осторожен — не удали лишнего. Уменьшить рисунок можно и с помощью квадратиков, которые появятся, если ты щелкнешь за пределами
поля рисования.

4

9

5

0

Изучаем программирование на примере Minecraft

3. Сохрани файл с рисунком. Какой формат выбрать при сохранении документа? С одной стороны, ФОРМАТ PNG лучше всего, однако из-за
него сайт будет очень долго загружаться. Поэтому рекомендуем выбрать ФОРМАТ JPG. Сохрани файл под именем CHICKEN.JPG в ту же
папку с HTML-документом.
4. Возвращаемся в приложение для рисования.
Пришла пора создать крипера. В этот раз рисунок
должен располагаться иначе — крипер должен
быть развернут к тебе лицом! Этого персонажа
довольно легко создать — достаточно нарисовать несколько прямоугольников. Не забудь добавить прямоугольники и квадраты на тело готового крипера, чтобы сделать его реалистичнее.

Анимационные приключения

5. После того, как крипер будет готов, сохрани
файл с рисунком под именем CREEPER.JPG.
Не забудь, что созданный тобой рисунок должен находиться в той же папке, что и остальные
файлы сайта.
6. Ура! Мы почти закончили создавать ресурсы!
Осталось только яйцо. ИНСТРУМЕНТ ДЛЯ РИСОВАНИЯ ОВАЛОВ ПОМОЖЕТ ТЕБЕ СОЗДАТЬ
ЯЙЦО. Фигуру «Овал» ты найдешь на панели
инструментов в списке разных форм. Панель
инструментов может располагаться в верхней
части окна приложения или вдоль правой или
левой стороны. Это зависит от того, в какой программе ты работаешь. Например, в приложении
Paint в Windows панель инструментов находится в верхней части окна.
7. Как только ты «снес» яйцо с помощью приложения для рисования, сохрани рисунок под именем EGG.JPG.

Интересные шаблоны мы с тобой создали,
не правда ли? Пора вдохнуть в этих жителей
Minecraft жизнь! Для этого приступим к выполнению второй миссии. Персонажам уже не терпится подвигаться!

5

1

5

2

Изучаем программирование на примере Minecraft

Клавиша Z
Ошибки — это не страшно! Нажимая комбинацию
клавиш Ctrl+Z, легко исправить ошибку, поочередно отменяя последние
действия. Эта комбинация
клавиш делает то же самое,
что и команда меню «Отменить». Если же ты перестараешься и случайно отменишь нужное действие, то
вернуть его можно с помощью комбинации Ctrl+Y.

X

МИССИЯ 2
КУРИЦА ПРОТИВ
КРИПЕРА:
ПРОГРАММИРУЕМ
ДВИЖЕНИЕ

Г

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

Почему курица стоит на пути у крипера? Потому что сюда ее привел наш код!

5

4

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Наша страница стала довольно объемной к этому моменту, поэтому анимацию мы разместим
на отдельной странице. Добавь еще одну кнопку к созданным раньше следующим образом:

Получилось? Атрибут LOCATION.HREF будет
переадресовывать пользователя на вторую
страницу после нажатия добавленной кнопки.
Есть и другой способ переадресации — с помощью ссылки. Создать ссылку можно так:

2. Но постой! У нас же нет страницы с таким
именем! Это не проблема. Давай создадим ее.
Для этого в меню ФАЙЛ выбери команду НОВЫЙ и сохрани новый документ под именем
ANIMATION.HTML. Чтобы новая страница не отличалась по внешнему виду от главной страницы, скопируем часть кода.

Анимационные приключения

ВНИМАНИЕ! МАРШ!!
3. Давай начнем с простого — поместим рисунок курицы на сайт? Для этого введи следующий код в div-контейнер с идентификатором
mainsection:

Обрати внимание на СВОЙСТВО CLASS. Классы похожи на идентификаторы (id). Их отличие в том, что идентификатор нацелен на один
HTML-элемент, а классы — на множество элементов. Классы позже помогут нам остановить
анимацию курицы.
4. Наша курица готова. Теперь открой CSS-файл
и внизу перейди на новую строку. Наш рисунок
имеет идентификатор chicken. Как же нам НАЦЕЛИТЬСЯ на него? Верно подмечено — для этого используется СИМВОЛ #. Зная это, мы легко
внесем изменения в изображения на странице:

5. Ты уже знаешь, что строка кода border-radius
отвечает за скругление углов изображения.
Также есть свойства, отвечающие за размеры

5

5

5

6

Изучаем программирование на примере Minecraft

изображения по ширине и высоте. А что за код
мы указали ниже? Если в двух словах, он отвечает за анимацию изображения. Первая часть
содержит ИМЯ ФУНКЦИИ АНИМАЦИИ, вторая
определяет, КАК ДОЛГО АНИМАЦИЯ БУДЕТ
ДЛИТЬСЯ в секундах. В последней же части
кода «зашифровано» КОЛИЧЕСТВО ПОВТОРОВ
АНИМАЦИИ. Значение infinite говорит о том,
что анимация будет повторяться бесконечно.
Давай создадим ФУНКЦИЮ С ИМЕНЕМ WALK.
Введи указанный ниже код в CSS-файл:

Обрати внимание, что часть кода, написанная
в скобках, — это уже знакомый нам язык CSS.
С помощью этого кода ты можешь управлять
временем появления эффектов, указав их здесь.
Причем ты можешь придумать сразу несколько
эффектов, разделив их точкой с запятой (;).
ВИДИШЬ, МЫ УКАЗАЛИ РАЗНЫЕ ПРОЦЕНТНЫЕ
ЗНАЧЕНИЯ? ПРЕДСТАВЬ, ЧТО КАЖДОЕ ТАКОЕ
ЗНАЧЕНИЕ — ЭТО ОДИН ШАГ. Например, шаг
первый — изображения курицы двигается вправо. А второй шаг — она возвращается назад. Сохрани изменения в HTML- и CSS-файлах. Перезагрузи страницу. Курица будет двигаться!
6. Наша курица уже хороша, но не идеальна! А все
потому, что при движении она все время смотрит в одну сторону. Мы ПОВЕРНЕМ ее с помощью еще одной дополнительной строки кода.

Анимационные приключения

При движении назад курица смотрит в неправильном направлении. Исправим это. Курица,
двигаясь налево или направо, должна смотреть
перед собой. Поэтому сначала развернем картинку клювом вправо, затем — влево. Возвратившись на исходную точку, курица опять должна развернуться. Проще простого, правда?

Вот как много ты можешь сделать с помощью
этих свойств. Повеселись! Некоторыми идеями
для создания забавной анимации мы с тобой
поделимся в конце этого раздела.
7. Давай добавим еще одного персонажа — крипера. Напомним, что ему необходимо присвоить идентификатор creeper. Если твой рисунок
оказался слишком большим, то ты увидишь, что
он выходит за пределы экрана. Исправить это
нам поможет СЛЕДУЮЩИЙ CSS-КОД:

5

7

5

8

Изучаем программирование на примере Minecraft

Меняй число в коде, который указан на рисунке
выше, до тех пор, пока не добьешься идеального результата. Но смотри, с рисунком все равно
происходит что-то необычное. Он бежит назад
и вперед, хотя мы пока не водили команды, анимирующие крипера. Все дело в том, что при движении курицы ее изображение автоматически
сдвигает объекты, расположенные перед ней.
Это хорошая новость! Ведь курица поработала
над крипером за нас. И теперь кажется, что курица и крипер гонятся по очереди друг за другом. Здорово, правда?
Ты отлично потрудился и с успехом завершил
миссию по оживлению персонажей!

Анимационные приключения

Умопомрачительное
программирование

5

X

Попробуй ввести указанные ниже команды для
анимации персонажей. Также посмотри, что поменяется, если указать значения в процентах.
Повеселись от души!
Узнай, для чего нужны эти команды!
• transform: rotateY(270deg);
• max-height: 100px;
• opacity: 0.1;
• transform: skewY(50deg);
Анимация с ключевыми кадрами хороша тем,
что ее можно применить не только к рисункам,
а вообще к любым объектам. Скопируй CSS-код
-webkit-animation курицы и примени к другому элементу. Что произошло? Не забудь потом
удалить этот фрагмент кода, чтобы не создавать
слишком много анимаций на странице. Их избыток утомляет и отвлекает!

9

МИССИЯ 3
ПЛАН СПАСЕНИЯ
КУРИЦЫ: ДА
ЗДРАВСТВУЕТ
ВРАЩЕНИЕ!

О

тлично! Курица теперь бегает туда-сюда. Все
благодаря успешному выполнению второй
миссии. Но мы же знаем, что произойдет с ней после встречи с крипером. Пора выручать курицу из
беды! Интерактивные элементы кода спасут и курицу, и яйца.

Забавно наблюдать за
бегающей курицей, но
нас больше обрадует
вид взрывающегося
крипера!

Анимационные приключения

НА СТАРТ!
1. Мы ДОБАВИМ НОВЫЙ ВИД АНИМАЦИИ в CSSфайл. Первая КОМАНДА SPIN заставит крипера
вращаться вокруг своей оси. Все очень просто:

2. Далее применим к криперу класс. Если щелкнуть
мышью по криперу, все свойства класса будут
применены. В нашем случае крипер станет вращаться. Помнишь, как мы использовали символ
#, чтобы выбрать идентификатор в CSS-файле?
ЧТОБЫ ВЫБРАТЬ КЛАСС, ВВЕДИ ТОЧКУ.
Например:

Добавь код, указанный на рисунке, и сохрани
CSS-файл.
3. Открой созданную тобой страницу animation.
html. Добавь ТЕГИ ЭЛЕМЕНТА SCRIPT в нижнюю часть страницы между тегами </body> и </
html>.
4. Обратимся снова к БИБЛИОТЕКЕ JQUERY. На
этот раз с ее помощью будет применен класс
.defeated — после того, как игрок щелкнет
мышью по криперу.

6

1

6

2

Изучаем программирование на примере Minecraft

Если ты обновишь страницу и щелкнешь мышью по криперу, то УВИДИШЬ, КАК ОН НАЧНЕТ КРУТИТЬСЯ.

Это хорошо, но никак не поможет нашей курице, ведь так? Давай уже ОТДЕЛАЕМСЯ ОТ НАВЯЗЧИВОГО КРИПЕРА!

Щелкни мышью по криперу еще раз. Ты обнаружишь проблему — он исчезает мгновенно, не
закончив вращение. Исправим это.
5. Добавим ТАЙМЕР, по которому будут исполняться те или иные команды. Например, мы хотим, чтобы крипер сначала остановился, а потом уже исчез.

Анимационные приключения

Мы добавили ФУНКЦИЮ SETTIMEOUT в наш код.
Выглядит необычно, правда? Число, указанное
после функции, — это количество миллисекунд,
которые должны пройти прежде, чем функция
начнет исполняться.
В одной секунде 1000 миллисекунд, так что мы
установили отсрочку исполнения команды на
1/3 часть секунды. Этого хватит для того, чтобы
крипер успел остановиться.
6. Теперь, когда крипер исчез, курице не о чем
волноваться! Она может наконец перестать бегать. Для этого мы УДАЛИМ КЛАСС
CHICKENANIMATION И УСТАНОВИМ ПАУЗУ,
добавив две строки в код:

Курица перестала бегать, анимация прекратилась. Кстати, ты знаешь, что если курица

6

3

6

4

Изучаем программирование на примере Minecraft

надолго замирает на одном месте, значит, она
готовится снести яйцо?
7. Давай сделаем так, чтобы после щелчка мыши
по курице появлялось яйцо. Для этого ПОНАДОБИТСЯ ВОТ ТАКАЯ ФУНКЦИЯ:

Так как у нас много яиц, мы будем использовать
КЛАСС ВМЕСТО ИДЕНТИФИКАТОРА. Проверь,
что в CSS-файле свойствам max-width и maxheight класса egg присвоены приближенные
к реальным размерам значения относительно
курицы (у нас заданы свойства max-width: 2%
и max-height: 4%). Ведь яйцо не должно быть
больше курицы, отложившей его!
Есть еще одна проблема. Курица отложила
яйца, но в безопасности ли они? Сейчас команда срабатывает каждый раз, когда ты щелкаешь
мышью по курице. Даже если за курицей гонится крипер.

Анимационные приключения

Моб из-за ошибки

6

X

Знаешь ли ты, что крипер
был создан в результате случайной ошибки в коде? Это
правда! Создатель Minecraft
Маркус «Нотч» Персон писал код для свиньи, когда
случайно перепутал ширину и высоту. И неожиданно
появился высокий персонаж на четырех маленьких
ножках. Программирование может быть забавным.
И иногда становится частью
истории!

8. Мы должны быть уверены, что курица будет нести
яйца, только когда крипера нет. Знаешь лучший
способ это сделать? ИСПОЛЬЗОВАТЬ БИБЛИОТЕКУ JQUERY! С ее помощью можно проверить,
сколько объектов имеют определенный класс или
идентификатор. В нашем случае, мы воспользовались библиотекой, чтобы узнать КОЛИЧЕСТВО
ОБЪЕКТОВ С ИДЕНТИФИКАТОРОМ CREEPER.
Если такие объекты найдутся, их количество будет подсчитано. Если же объектов с таким идентификатором нет, значение будет равно нулю. Как
только крипер исчезнет (когда игрок щелкнет по
нему), наша курица начнет нестись. Ведь теперь
ничего не угрожает ни ей, ни будущим цыплятам.

5

6

6

Изучаем программирование на примере Minecraft

СОХРАНИ ИЗМЕНЕНИЯ В ФАЙЛАХ И ПЕРЕЗАГРУЗИ страницу с анимацией. Сначала щелкни
мышью по курице. Как видишь, яйца не появляются. Теперь щелкни мышью по криперу, чтобы
он исчез, а потом опять по курице.

Цель достигнута! Но это еще не все! Обрати
внимание, сколько бы раз ты ни щелкал по курице, яйца всегда появляются только внутри
div-контейнера mainsection. Не разбрасываемся яйцами!

МИССИЯ 4
УДИВИТЕЛЬНЫЕ
ЯЙЦА: ИГРАЕМ
С ПЛАГИНАМИ

Я

йца в Minecraft всегда пригодятся — их можно
собирать и ими можно бросаться. Запрограммируй забавные эффекты для них — яйца будут
подпрыгивать, дрожать, скользить. Для этого обратимся к плагину jQuery под названием jQuery UI.
Давай узнаем, как много интересного можно добавить на веб-страницу с помощью кода!

Ты все еще в раздумьях, что лучше — золотые или алмазные
инструменты? Ты просто не пробовал силу и мощь плагинов
jQuery!

6

8

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. ДОБАВЬ СЛЕДУЮЩУЮ СТРОКУ в раздел head
страницы с анимацией:

Ну и что же делает плагин jQuery UI?

ВНИМАНИЕ! МАРШ!!
2. Давай проверим, что произойдет, если мы ДОБАВИМ ПОКАЗАННЫЙ НИЖЕ КОД в функцию
#chicken.click():

Теперь ты можешь перемещать любое яйцо по
странице, нажав и удерживая на нем кнопку
мыши.

3. Что еще? Применим несколько крутых трюков
к элементам.

Анимационные приключения

Если мы добавим код, указанный выше, каждое
яйцо начнет подпрыгивать при появлении. Но
это не все! Попробуй следующие эффекты:
• shake
• drop
• puff
• pulsate
• slide
При желании ты можешь даже ИЗМЕНИТЬ СКОРОСТЬ каждого эффекта. Поменяй медленную
(slow) скорость на быструю (fast). Что произошло?
4. Ты также можешь МЕНЯТЬ РАЗМЕРЫ С ПОМОЩЬЮ ПЛАГИНА JQUERY UI. Но для этого придется добавить ссылку на еще один CSS-файл
в раздел head:

Измени размер любого элемента с помощью
ФУНКЦИИ .RESIZABLE() в элементе script.
Например, так:

Теперь в правом нижнем углу любого раздела
веб-страницы должна отображаться стрелка.
Попробуй перетащить ее, чтобы увеличить или
уменьшить объект. Важно помнить, что изменение размеров курицы, крипера или яйца может привести к сбою в анимации. В то же время
остальные объекты будут менять свои размеры
без каких-либо проблем.

6

9

7

0

Изучаем программирование на примере Minecraft

5. Н а к о н е ц , п о з н а к о м и м с я с Ф У Н К Ц И Е Й
DROPPABLE() плагина jQuery UI. С помощью нее
мы определяем, что происходит с теми объектами, которые мы перетащим на веб-страницу.
Вот тебе одна идея.
Курица снесла яйцо. Ты не хочешь, чтобы оно
просто лежало, так? Яйца можно собирать. Почему бы нам не ДОБАВИТЬ В DIV-КОНТЕЙНЕР
TOPBAR ЧТО-ТО ДЕЙСТВИТЕЛЬНО ПОЛЕЗНОЕ?
Например, функцию подсчета яиц.
Начнем с СОЗДАНИЯ ПЕРЕМЕННОЙ EGGCOUNT.
Установим ее значение равным нулю.

6. Теперь сделаем так, чтобы яйца можно было
БРОСАТЬ В ОБЛАСТЬ DIV-КОНТЕЙНЕРА TOPBAR.
Это значит, что на эту часть веб-страницы будет нужно перетащить объект, в данном случае
яйцо.

7. Мы должны ДАТЬ УКАЗАНИЯ ОБЛАСТИ DIVКОНТЕЙНЕРА TOPBAR, что ей следует делать,

Анимационные приключения

если на нее что-либо попадет. Для этого создадим функцию внутри этого кода:

О, как много скобок! Не волнуйся, осталось совсем чуть-чуть.
8. После того как яйцо переместится в область
div-контейнера topbar, нужно, чтобы ЗНАЧЕНИЕ ПЕРЕМЕННОЙ EGGCOUNT УВЕЛИЧИЛОСЬ
и стало равным одному.

9. Последний шаг — ИЗМЕНЕНИЕ ТЕКСТА в области div-контейнера TOPBAR веб-страницы.
Должно появиться сообщение с подсчитанным
количеством яиц. Так как это единственный абзац на странице, все, что нам нужно сделать, это
выбрать нужный абзац с помощью jQuery и изменить сообщение.

Обрати внимание, что, если у тебя больше, чем
один абзац на веб-странице, текст будет меняться во всех абзацах. Чтобы избежать этого,
выбери элементы с идентификатором topbar.
Хорошо, теперь СОХРАНИ ИЗМЕНЕНИЯ И ПЕРЕЗАГРУЗИ СТРАНИЦУ. Заметил, что не так?
Если мы сначала перетащим яйцо вверх, а потом удалим его, число не изменится. Если ты

7

1

7

2

Изучаем программирование на примере Minecraft

снова переместишь то же яйцо вверх, функция
его опять засчитает. Но не волнуйся, это легко
исправить.

10. Все, что для этого нужно сделать, — сообщить программе, что ЗНАЧЕНИЕ ПЕРЕМЕННОЙ
EGGCOUNT ДОЛЖНО УМЕНЬШИТЬСЯ НА ЕДИНИЦУ, если яйцо перетащили в нижнюю часть
страницы. Нам нужно скопировать функцию, которую мы только что сделали, и заменить в ней
сложение на вычитание! Также замени слово
drop на out.

Анимационные приключения

7

Прекрасно! Теперь код работает правильно:

Загадки кодирования

X

Ты заметил сбои в работе счетчика яиц? Вопервых, если ты начнешь перетаскивать яйцо
до завершения анимации, оно не сможет переместиться. Во-вторых, перемещая яйцо тудасюда в верхней части страницы, ты увеличиваешь значение счетчика.
Решить эти проблемы не так-то просто, поэтому
пока мы их пропустим. Но ты все же подумай,
как с ними справиться. В программировании
часто нужно придумывать новые идеи и подходы к решению возникающих проблем, чтобы
добиться желаемого результата. И программистам нравится бросать самим себе вызов!

3

СОЧИНЯЕМ
МУЗЫКУ

МИССИЯ 1
ТВОРЧЕСТВО СТИВА:
СОЗДАЕМ ОНЛАЙНПИАНИНО

С

амое удивительное, что в кодировании и вебдизайне ты можешь придумать и изменить все
что угодно. До сих пор мы были заняты только
внешним видом сайта Стива. Но где же музыка?
Приступим к созданию онлайн-пианино!

Криперы любят рок!
Давай добавим музыку на сайт Стива.

Сочиняем музыку

НА СТАРТ!
1. Для выполнения миссии нам понадобится отдельная страница, как и в случае с анимацией.
ОТКРОЙ ДОКУМЕНТ INDEX.HTML в текстовом
редакторе и ДОБАВЬ НОВУЮ КНОПКУ со ссылкой на страницу music.html. Ты можешь, разумеется, скопировать и вставить код кнопки, отсылающей на страницу с анимацией, но не забудь
изменить текст на кнопке и ссылку.

2. Теперь давай создадим саму страницу. Создай
новый документ, введи код, указанный на рисунке ниже, и СОХРАНИ ФАЙЛ ПОД ИМЕНЕМ
MUSIC.HTML. Проверь, что документ сохранен
в ту же папку, что и остальные HTML-файлы.

Этот код формирует новую страницу с верхним
и основным разделами.
Прежде чем мы займемся музыкой, давай немного порисуем!

7

7

7

8

Изучаем программирование на примере Minecraft

3. Что ты делаешь, если хочешь послушать музыку в Minecraft? Если не получилось найти пластинки, то можно скрафтить музыкальный блок.
Давай сделаем вот что: открой графический
редактор и НАРИСУЙ МУЗЫКАЛЬНЫЙ БЛОК.
Напомним, что нужно убрать белое пустое пространство по периметру рисунка с помощью
кнопки Обрезать. Закончив рисовать, сохрани
рисунок в ФАЙЛ С ИМЕНЕМ NOTE.JPG.

4. Отлично. Теперь давай ПОМЕСТИМ МУЗЫКАЛЬНЫЙ БЛОК НА НАШУ МУЗЫКАЛЬНУЮ СТРАНИЦУ! Но один музыкальный блок не похож на
пианино, поэтому добавь то же самое изображение пять раз.

Сочиняем музыку

7

Обрати внимание, что каждый блок является
объектом класса noteblock. Добавив несколько
новых строк кода в CSS-файл, сделаем так, чтобы наши блоки никогда не вытеснялись за пределы экрана и не влияли на остальные элементы страницы.

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

Знаешь ли ты?
Фоновая музыка для игры
Minecraft написана немецким композитором Даниэлем Розенфельдом, также
известным под ником C418.
Ему помогала его любимица — кошка. Именно ее
«голос» использовался для
озвучивания гаста.

X

9

8

0

Изучаем программирование на примере Minecraft

ВНИМАНИЕ! МАРШ!!
5. Есть несколько способов ДОБАВИТЬ МУЗЫКУ
на сайт. Самый простой — добавить ЭЛЕМЕНТ
AUDIO, как показано ниже:

ВМЕСТО ЗНАЧЕНИЯ MUSIC.MP3 МОЖНО УКАЗАТЬ ИМЯ НУЖНОГО МУЗЫКАЛЬНОГО ФАЙЛА.
Выполнение данного кода приведет к автоматическому проигрыванию музыки после загрузки страницы. Если заменить атрибут autoplay
командой controls, то можно будет управлять
музыкой, в том числе останавливать ее воспроизведение.
Также имей в виду, что плагины JavaScript дадут
тебе еще бóльшие возможности для управления музыкой. Но есть и обратная сторона медали: все может работать не так идеально ввиду
сложности кодирования.
6. Как же СОЗДАТЬ ЗВУКОВОЕ СОПРОВОЖДЕНИЕ, ЕСЛИ НА ТВОЕМ КОМПЬЮТЕРЕ НЕТ МУЗЫКАЛЬНЫХ ФАЙЛОВ? Это, конечно, немного
осложняет выполнение миссии, но не делает ее
невозможной. Нам поможет ИНТЕРФЕЙС WEB
AUDIO API. Это достаточно новый инструмент.
С его помощью легко создать любой звук, какой
только можно вообразить.
Добавь элемент script в раздел head HTMLфайла. Далее между тегами элемента script
введи показанный ниже код:

Сочиняем музыку

7. Для выполнения следующего шага обратимся
к основам языков программирования. Ты когданибудь задумывался, почему после имени функции ставят скобки (например, sayHello())?
В скобках указывают значения, которые будут
передаваться функции при вызове. Взгляни на
пример:

В этом примере, мы вызываем функцию
showNumber, передав ей значение 5. Эта функция автоматически создает переменную с именем number и со значением 5, после чего появляется окно с этим числом. Все просто!
Осталось понять, как эти знания пригодятся нам
сейчас, когда мы «творим» музыку? Итак, найди
теги элемента script в нижней части страницы.
СОЗДАДИМ ФУНКЦИЮ, КОТОРАЯ ВОСПРОИЗВЕДЕТ РАЗЛИЧНЫЕ НОТЫ В ЗАВИСИМОСТИ
ОТ ВВЕДЕННОГО ЧИСЛА!
Приступай к вводу кода, указанного на рисунке.
Пока не пытайся понять, что значит этот код. Он
нужен нам для того, чтобы начать работу с интерфейсом Web Audio API.

8

1

8

2

Изучаем программирование на примере Minecraft

8. Далее добавим атрибут onclick в код ссылок
для изображений музыкальных блоков.

После щелчка мышью по музыкальному блоку
ты услышишь звук. Почему мы выбрали именно
эти числа? Это элементарно. Просто они приятно звучат! Если ты попробуешь изменить числа,
то поймешь, как сложно подобрать звуки, которые сложиться в красивую мелодию. Запомни: небольшие числа производят низкие звуки,
а большие — высокие.
Но все же остается небольшая проблема. Звуки
не затихают. И сложить из них какую-либо мелодию невозможно. Чтобы исправить это, ДОБАВИМ ЕЩЕ ДВЕ СТРОКИ КОДА:

Есть две переменные, значения которых можно менять. Первая, NOTELENGTH, определяет
продолжительность каждого звука в секундах.
Другая переменная, представленная числом
красного цвета, задает продолжительность

Сочиняем музыку

ЗАТУХАНИЯ звука. Видишь, насколько маленькое значение имеет вторая переменная? Это обусловлено тем, что нам нужен чистый, короткий
звук.
Итак, первая миссия заканчивается. Мы создали
несколько основных звуков. Но зачем же останавливаться? Давай импровизировать дальше.
Впереди вторая миссия!

8

3

МИССИЯ 2
ИМПРОВИЗАЦИЯ:
ДОБАВЛЯЕМ
АУДИОЭФФЕКТЫ

П

ервая миссия была довольно простой — мы
создали самое примитивное пианино. Но ты
же не думаешь останавливаться на достигнутом?
Эти звуки можно сделать намного более интересными, дописав код и воспользовавшись интерфейсом Web Audio API для выбора разных стилей звучания.

Алекс размышляет, будет ли наша музыка похожа на музыку
Minecraft или мы придумаем что-то новенькое!

Сочиняем музыку

ВНИМАНИЕ! МАРШ!!
1. ОТКРОЙ ДОКУМЕНТ MUSIC.HTML, чтобы добавить в него новые функции. Интерфейс Web
Audio API предлагает четыре варианта звучания. Чтобы получить доступ к ним, ДОБАВИМ
ЕЩЕ ОДНУ СТРОКУ с кодом:

Видишь атрибут O.TYPE? Именно здесь мы укажем ВЫБРАННЫЙ МУЗЫКАЛЬНЫЙ СТИЛЬ. Попробуй указать следующие значения:
• SINE: тип сигнала по умолчанию. Пока мы
создавали пианино, мы слышали звуки именно в таком стиле.
• TRIANGLE: звуки такого типа более мягкие,
очень похожие на звуки настоящего пианино.
• SQUARE: звуки низкие, насыщенные, звонкие,
как дверной звонок!
• SAWTOOTH: а этот вариант идеален для
Minecraft! Он рождает звуки в «игровом»
стиле.
2. Конечно, все лучшие музыканты играют одновременно несколько нот. Ты уже догадался,
как можно достичь такого эффекта? Нет? На
самом деле все просто. МЫ СКОПИРУЕМ РАНЕЕ ВВЕДЕННЫЙ КОД И ПЕРЕИМЕНУЕМ ПЕРЕМЕННЫЕ:

8

5

8

6

Изучаем программирование на примере Minecraft

3. Обрати внимание — мы продублировали переменные o и g и присвоили копиям имена o2 и g2.
Но сейчас они идентичны исходным, поэтому
мы не услышим различия между ними.
Так как же ДОЛЖНЫ ЗВУЧАТЬ ДУБЛИКАТЫ
НОТ? Чтобы определить это, можно пойти двумя путями. Либо изменить значение, передаваемое функции в момент вызова, либо изменить
ее значение как-нибудь еще.
Например, мы можем удвоить значение переменной второй ноты, как показано на рисунке (в JavaScript символ * означает «умножение»):

Сочиняем музыку

Или сделать так:

Конечно, если мы воспользуемся этим способом, придется добавить второе значение, передаваемое при вызове функции. И тогда вместо
этого:

поступим так:

Определенно наша музыка стала звучать интереснее. Но на этом мы не остановимся и будем
стремиться к совершенству. Как его достичь,
узнаем в третьей миссии!

8

7

МИССИЯ 3
В ОЧЕРЕДИ
НА ПРОСЛУШИВАНИЕ:
МУЗЫКА НА САЙТЕ
SCRATCH

Х

очешь, чтобы музыка звучала еще лучше? Не
ограничивайся пианино! Все, что нам понадобится, это другой инструмент программирования. Воспользуемся сайтом Scratch и с помощью
блоков создадим несколько простых программ.
Scratch значительно превосходит по своим возможностям Web Audio API и предлагает множество
инструментов.

Чем больше персонажей в Minecraft и чем больше инструментов, исполняющих музыку, тем интереснее и веселее игра!

Сочиняем музыку

1. Открой окно браузера и ПЕРЕЙДИ ПО ССЫЛКЕ
SCRATCH.MIT.EDU.
2. ЩЕЛКНИ МЫШЬЮ ПО ВКЛАДКЕ СОЗДАВАЙ
в верхней части сайта или нажми кнопку Начни создавать. Откроется страница для создания
программ. Видишь вкладку Код слева?

Тут нужно перетаскивать «строительные» блоки из панели слева в пустую центральную часть
страницы. Каждый блок отвечает за свою часть
кода. Например, блок Повторить 10 раз создает
цикл из десяти повторений.
Кроме того, можно добавлять дополнительные
блоки и создавать собственные. Нам понадобятся дополнительные блоки Музыка.
На вкладке Код нажми синюю кнопку с двумя полосками в левом нижнем углу. На открывшейся
странице выбери раздел Музыка. Ты вернешься
в основное окно Scratch и увидишь новый раздел блоков Музыка.
3. На вкладке Код выбери раздел СОБЫТИЯ. Перетащи блок КОГДА КЛАВИША ПРОБЕЛ НАЖАТА вправо.
Теперь перейди в раздел Музыка и выбери блок
БАРАБАНУ ИГРАТЬ (1) МАЛЫЙ БАРАБАН 0,25
БИТА. Перетащи его вправо, расположив под
блоком Когда клавиша пробел нажата. Теперь
нажми клавишу Пробел на клавиатуре, и ты
услышишь барабан! Здорово, правда?

8

9

9

0

Изучаем программирование на примере Minecraft

Давай сделаем так, чтобы барабаны звучали непрерывно. Для этого нам нужно создать цикл,
который никогда не прекращает работу. Перейди в раздел УПРАВЛЕНИЕ и перетащи блок ПОВТОРЯТЬ ВСЕГДА вправо к ранее размещенным блокам. Его нужно поместить под блоком
КОГДА КЛАВИША ПРОБЕЛ НАЖАТА, соединив
с блоком БАРАБАНУ ИГРАТЬ (1) МАЛЫЙ БАРАБАН 0,25 БИТА. Теперь, если мы нажмем клавишу Пробел на клавиатуре, барабаны начнут
играть без остановки. Попробуй!

Все идет хорошо! Было довольно просто создать базовый ритм для нашей музыки.
4. Почему бы не добавить еще один барабан, например большой? Перейди в раздел Музыка
и вновь перетащи блок БАРАБАНУ ИГРАТЬ

Сочиняем музыку

9

(1) МАЛЫЙ БАРАБАН 0,25 БИТА вправо, расположив его в блоке ПОВТОРЯТЬ ВСЕГДА.
В раскрывающемся списке блока выбери пункт
(2) Большой барабан, чтобы блок стал называться БАРАБАНУ ИГРАТЬ (2) БОЛЬШОЙ БАРАБАН 0,25 БИТА.

Scratch против JavaScript

X

Есть одно большое отличие Scratch от JavaScript.
Scratch позволяет запускать исполнение сразу двух блоков кода. В JavaScript строки кода
выполняются друг за другом, по очереди. Слышишь, как оба выбранных нами барабана играют одновременно? Все благодаря установленному циклу.

Продолжаем импровизировать. Создадим еще
один цикл. Перетащи другой блок КОГДА КЛАВИША ПРОБЕЛ НАЖАТА, соедини его с блоком
ПОВТОРЯТЬ ВСЕГДА. Наконец, перетащи еще
один блок Барабану играть… и выбери на нем
в раскрывающемся списке пункт (5) Открытый
хай-хет. Теперь драм-секция дополнится звуками «тарелки». Вот теперь мы создали что-то
действительно интересное.

1

9

2

Изучаем программирование на примере Minecraft

5. Но вот в чем загвоздка: большинство композиций исполняется с участием многих инструментов, не одного. Давай ДОБАВИМ ДРУГИЕ
ИНСТРУМЕНТЫ и создадим мелодию. Для начала — синтезатор: ноты смогут звучать долго,
и это не будет казаться странным. Попытайся
создать такой же блок кода, как показано на рисунке. Затем нажми клавишу Пробел на клавиатуре одновременно с клавишей ↑.

Если тебе удалось синхронизировать музыкальные инструменты, синтезатор заиграет в такт
с барабанами!
6. Расширим наши музыкальные возможности,
ДОБАВИВ ЕЩЕ ОДИН ИНСТРУМЕНТ. Правда на
этот раз есть небольшое отличие. Мы не будем
подключать его к циклу. Тебе придется вовремя
нажимать клавишу на клавиатуре, чтобы создать мелодию!

Сочиняем музыку

Попробуй — этот блок должен быть задействован, пока звучат последние ноты синтезатора.
Получилось неплохо, правда?
7. Почему бы нам не добавить ЕЩЕ ОДИН ИНСТРУМЕНТ в группу ПОСЛЕДНИЙ?

Помнишь, как мы проигрывали последнюю музыкальную часть на заключительных звуках
синтезатора? Так вот теперь давай проиграем
виброфон в первой музыкальной части синтезатора, бас — во второй. И все повторяем снова.
Звучит потрясающе! Отличная работа!

9

3

9

4

Изучаем программирование на примере Minecraft

Почему бы тебе не попробовать другие инструменты? Еще можно увеличить длительность
каждого звука. Помнишь, чем меньше значение
указано в поле бита, тем короче ноты. Пусть это
станет музыкальной разминкой перед началом
четвертой миссии, в ходе которой напишем собственную музыку для Minecraft!
8. Прежде чем закрыть страницу, убедись, что
все изменения сохранены. Иначе они исчезнут! Сохрани свою работу на компьютер, выбрав в меню Файл команду Сохранить на свой
компьютер. Ты можешь продолжить работать
в Scratch позже, выбрав в меню Файл команду
Загрузить с компьютера и дважды щелкнув по
значку документа.

МИССИЯ 4
НОМИНАЦИЯ
НА ЗОЛОТО:
СОЧИНЯЕМ МУЗЫКУ
MINECRAF T

Б

удучи фанатом игры Minecraft, ты наверняка
согласишься, что музыка в Minecraft довольно
специфичная. Она медленная, с длинными фортепианными проигрышами. В фоновом звучании
можно услышать синтезатор. Давай теперь сочиним собственную музыку для мира Minecraft!

Придумай мелодию, а потом запиши ее с помощью кода!

9

6

Изучаем программирование на примере Minecraft

ВНИМАНИЕ! МАРШ!!
1. Начнем с сайта Scratch по ссылке SCRATCH.MIT.
EDU. Создай новый проект, щелкнув мышью по
вкладке СОЗДАВАЙ в верхней части сайта или
нажав кнопку Начни создавать.
2. В этот раз мы УПРОСТИМ ЗАДАЧУ ПО ОДНОВРЕМЕННОМУ ВОСПРОИЗВЕДЕНИЮ РАЗЛИЧНЫХ ЗВУКОВ. Создай несколько музыкальных
блоков. Важно — для всех блоков определи
одну и ту же клавишу, отвечающую за начало
звучания. Работает идеально! Проверь сам:

3. Мы слышим славные аккорды, которые проигрывает синтезатор после нажатия клавиши на клавиатуре ←. Однако музыка Minecraft
обычно начинается с длинных проигрышей на
пианино, поэтому давай создадим спокойную
мелодию:

Сочиняем музыку

4. Заметил еще одну ошибку? Если все инструменты звучат в одно и то же время, Scratch
проигрывает все ноты одним и тем же инструментом. Чтобы решить эту проблему, придется задать нашим музыкальным блокам очередность исполнения.
Для этого сосчитай количество битов в каждой
музыкальной части. Фортепианная часть включает в себя 13,9 битов, а синтезаторная — 20 битов. Один бит примерно равен одной секунде.
Так что нам нужно указать для каждой части период ожидания перед их проигрыванием, равный количеству битов, или секунд. К счастью,
существует специальный блок для подобных
задач.
Перетащи блок Ждать … секунд из раздела
Управление в нижнюю часть каждого цикла.
Для фортепиано установи значение 20, а для

9

7

9

8

Изучаем программирование на примере Minecraft

синтезатора — 13,9. Запусти воспроизведение
мелодии еще раз. Теперь она зазвучит именно
так, как мы и желали!

Странные звуки

X

Немного странно звучит, не правда ли? В Scratch
можно выбирать ноты до максимального значения 72, но существуют более высокие ноты.
Можно ввести любое число, однако большинство звуков выше 100 некомфортны для восприятия, поэтому их не рекомендуется использовать.

Мы отлично повеселились, создавая музыку для
твоего мира Minecraft! Пора соединить музыку
и игру. Переходим к пятой миссии.

МИССИЯ 5
ВОЙНА МИРОВ:
НОВЫЕ ЗВУКИ
В МИРЕ MINECRAF T

Н

аша последняя музыкальная миссия — записать различные звуки и добавить их в Minecraft!
Начнем с записи звуков. Для этого можно воспользоваться микрофоном или диктофоном либо найти в Интернете готовые сэмплы, которые хотелось
бы добавить в игру. Затем тебе предстоит решить,
какие звуки в Minecraft ты хочешь заменить собственными. После чего останется только написать
код, чтобы претворить идеи в жизнь!

Изменить можно
любые звуки —
от фоновой музыки до хрюканья
свиньи. Ограничений нет!

1

0

0

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Как только ты решишь поэкспериментировать,
запусти аудиоредактор и ЗАПИШИ ЗВУК. Длительность записи не должна превышать нескольких секунд. Если аудиофайлы будут воспроизводиться дольше, возможны ошибки при
запуске игры. Завершив запись, СОХРАНИ ЕЕ
В ФОРМАТЕ .OGG. Это крайне важно. Только
этот формат поддерживается игрой.

ВНИМАНИЕ! МАРШ!!
2. Как же нам добавить звуки в игру? Для начала СОЗДАДИМ ПАКЕТ РЕСУРСОВ. Благодаря
этому мы сможем добавлять собственные звуки и рисунки в игру, не удаляя оригинальные
игровые объекты. Итак, найдем исходную ПАПКУ MINECRAFT ДЛЯ ХРАНЕНИЯ ПАКЕТОВ РЕСУРСОВ.

Сочиняем музыку

1

ЕСЛИ НА ТВОЕМ КОМПЬЮТЕРЕ УСТАНОВЛЕНА
ОПЕРАЦИОННАЯ СИСТЕМА WINDOWS, открой
любую папку и в адресной строке в окне папки
введи следующий путь, указав вместо ТВОЕ_
ИМЯ имя пользователя компьютера:
C:\Users\ТВОЕ_ИМЯ\AppData\Roaming\
.minecraft\resourcepacks
ЕСЛИ ТЫ ИГРАЕШЬ НА MAC, выбери в меню команду Переход ⇒ Переход к папке и введи следующий путь:
~/Library/Application Support/minecraft/
resourcepacks
В обоих случаях должна открыться необходимая нам папка с файлами.
3. Внутри открывшейся папки resourcepacks
СОЗДАЙ НОВУЮ ПАПКУ. Ей можно присвоить
любое имя. Однако сейчас мы рекомендуем
тебе назвать папку МОИ ЗВУКИ. Внутри нее
создай новый текстовый документ. Открой его
в текстовом редакторе, введи указанный ниже
код и сохрани созданный файл под именем
PACK.MCMETA.

0

1

1

0

2

Изучаем программирование на примере Minecraft

Обрати внимание на важный нюанс: число, указанное в строке pack_format, должно соответствовать твоей версии игры Minecraft.

Чтобы определить, какая именно версия игры
установлена на твоем компьютере, запусти лаунчер Minecraft. Номер версии указан рядом
с кнопкой ИГРАТЬ. В таблице ниже показаны
соответствия между версиями игры и значениями в строке pack_format:

Сочиняем музыку

Версия игры

1

Соответствующий номер
в строке pack_format

Version 1.6, 1.7 или 1.8

1

Version 1.9 или 1.10

2

Version 1.11 или 1.12

3

Version 1.13 или 1.14

4

В нашем случае установлена программа
Minecraft версии 1.14.4, поэтому в строке pack_
format мы указали число 4.
4. Внутри папки МОИ ЗВУКИ создай еще одну папку с именем ASSETS. Внутри нее создай следующую, присвоив ей имя MINECRAFT. И наконец
в папке minecraft создай папку SOUNDS.

Мы совершили столько действий потому, что
Minecraft весьма строг к правилам размещения
графических и аудиофайлов, а также к их именам. И тут возникает проблема: мы же не знаем,
как называется звуковой файл, который хотим
заменить. Как же его найти?
5. Во-первых, ВЕРНИСЬ В ПАПКУ .MINECRAFT —
щелкни мышью по слову .minecraft в адресной
строке в верхней части окна.
Далее перейди в папку ASSETS, а затем в папку
INDEXES и открой в текстовом редакторе JSONфайл с номером твоей версии игры.
Давай представим, что мы хотим изменить звуки, которые издают курицы, когда гуляют. Нажми одновременно КЛАВИШИ CTRL И F на клавиатуре и в окне поиска введи слово CHICKEN.

0

3

1

0

4

Изучаем программирование на примере Minecraft

Ты увидишь список файлов со звуками. Тот звук,
который ищем мы, называется say1.ogg. Как видишь, наш замещающий файл должен быть помещен в строго определенную серию папок.
Нам необходимо создать такие же папки, вложенные друг в друга, в каталоге нашего пакета
ресурсов. Только в этом случае игра обнаружит
аудиофайл.

6. Вернись в папку .MINECRAFT\RESOURCEPACKS\
МОИ ЗВУКИ\ASSETS\MINECRAFT\SOUNDS. Создай
папку с именем MOB, а в ней — каталог CHICKEN.
Помести свой звуковой файл в папку CHICKEN,
присвоив ему имя SAY1.OGG.
7. Отлично, взглянем на результат проделанной
работы! Запусти Minecraft. На главном экране
нажми кнопку НАСТРОЙКИ. В открывшемся
окне нажми кнопку ПАКЕТЫ РЕСУРСОВ.
Если ты четко следовал нашему плану, то
увидишь свой пакет ресурсов в списке слева. Наведи указатель мыши на его миниатюру и щелкни по появившемуся треугольнику,
чтобы загрузить пакет ресурсов в игру. Нажми
кнопку ГОТОВО два раза и вернись на главный
экран.

Сочиняем музыку

1

8. Но вот в чем дело: мы не можем просто бегать
в поисках курицы. Поэтому создадим новый
мир, чтобы проверить, что мы все сделали правильно и наш звук загрузился. Выбери в окне
вариант ОДИНОЧНАЯ ИГРА, затем нажми кнопку СОЗДАТЬ НОВЫЙ МИР и выбери режим игры
ТВОРЧЕСКИЙ. Когда завершишь настройки,
нажми кнопку СОЗДАТЬ НОВЫЙ МИР.
Когда игра загрузится, отправляйся на открытое пространство. Затем нажми КЛАВИШУ E
на клавиатуре и перейди на ВКЛАДКУ ПОИСК
(в виде компаса) инвентаря. В поиске начни набирать слово курица, пока не увидишь ЯЙЦО
ПРИЗЫВА КУРИЦЫ. Перетащи его в одну из
ячеек в нижней строке инвентаря. И наконец
опять нажми клавишу E на клавиатуре. Теперь
мы проверим, работает ли наш новый набор
звуков!

0

5

1

0

6

Изучаем программирование на примере Minecraft

Щелкни правой кнопкой мыши, чтобы появилась курица. Ты услышишь звук, который добавил ранее! Не беспокойся, если игра зависнет
на секунду-другую. Это нормально для первого
раза. Поздравляем! Ты только что модифицировал игру Minecraft!

БОЛЬШАЯ ИГРА

МИССИЯ 1
ЛАБИРИНТ В ДУХЕ
MINECRAF T: ПРОСТАЯ
ИГРА С ПОМОЩЬЮ
SCRATCH

С

оздание игры — не такой уж сложный процесс,
если следовать пошаговым инструкциям. В процессе разработки учитывай три момента: определи,
как игрок будет взаимодействовать с объектами на
экране, в чем заключается цель игры и с какими
препятствиями игроку придется столкнуться. Цель
может быть любой — от поиска определенной локации на карте до набора очков. Препятствиями
служат монстры, головоломки и даже просто стены, преграждающие путь. Давай создадим настоящий лабиринт!

Мечтаешь создавать игры?
Тогда ты на правильном
пути!

Большая игра

1

ВНИМАНИЕ! МАРШ!!
1. Начнем с сайта Scratch SCRATCH.MIT.EDU. Создай новый проект — щелкни мышью по вкладке
СОЗДАВАЙ в верхней части сайта или нажми
кнопку Начни создавать.
2. Первое, что нам предстоит сделать, — это СОЗДАТЬ СПРАЙТ. Спрайтами называют группы
изображений игровых персонажей и объектов.
В качестве примера мы видим изображение
кота в левой части экрана на панели Спрайт.
Щелкни правой кнопкой мыши по маленькому
изображению кота и удали его, выбрав соответствующую команду в открывшемся меню.
Наведи мышь на кнопку в правом нижнем углу
с изображением головы кота. В появившемся
списке нажми на кнопку с ИЗОБРАЖЕНИЕМ
КИСТОЧКИ, чтобы нарисовать собственных
персонажей.

0

9

1

1

0

Изучаем программирование на примере Minecraft

Сначала нарисуем лодку. Очень важно нарисовать лодку правым бортом к себе. В противном
случае она будет выглядеть странно во время
игры. С помощью инструментов, которые ты
увидишь слева от области для рисования, проведи две линии, соединив их спереди под углом.
Сейчас твоя лодка должна выглядеть так:

Теперь перетащи лодку в центр области рисования. Отличная работа!
3. Если ты щелкнешь мышью по ярлыку ВКЛАДКИ
КОД в левом верхнем углу сайта, то сможешь
добавить нужные команды для нашей лодки.
Расставь и настрой блоки, как показано на рисунке ниже. Посмотри, что произойдет, если нажать клавишу со стрелкой на клавиатуре. Все
верно, лодка развернется и поплывет.

Направление движения лодки зависит от твоего
выбора. Чтобы плыть влево, лодка развернется
на –90°. Чтобы двигаться вправо, — на 90°.

Большая игра

1

Однако кое-что нам надо исправить. Наша лодка слишком большая. Попробуй уменьшить
ее. Для этого щелкни по спрайту лодки на панели Спрайт и укажи нужное значение в поле
РАЗМЕР.

4. Теперь ВОЗВЕДЕМ СТЕНЫ нашего лабиринта.
Создай новый спрайт и нарисуй зеленый прямоугольник, опирающийся на короткую сторону.
Создай еще один прямоугольник, только на этот
раз он должен лежать на длинной стороне.
В режиме рисования уменьшай их размеры до
необходимых, указывая нужное значение в поле
РАЗМЕР.
Теперь щелкай по прямоугольникам правой
кнопкой мыши и в контекстном меню выбирай команду ДУБЛИРОВАТЬ. Появятся копии
прямоугольников. Перетаскивая их в области
в верхней левой части окна, построй лабиринт,
как показано на рисунке.

1

1

1

1

2

Изучаем программирование на примере Minecraft

5. Перейдем к СОЗДАНИЮ ПОСЛЕДНЕГО СПРАЙТА.
Это и будет цель нашей игры. Допустим, Стиву надо доплыть на лодке до дома прежде, чем
стемнеет. Так что его цель — дом, правда? Нарисуй дом, уменьши его размеры и расположи
около выхода из лабиринта.

6. Далее ВЫСТРОИМ ЛОГИКУ игры. Что это значит? Вкратце, логика — это код, который отвечает за ход игры, иначе говоря, определяет правила игры. Например, мы должны запретить лодке
двигаться сквозь зеленые стены лабиринта!
Для этого добавим соответствующие блоки
в каждую из наших подпрограмм. Обрати внимание, что пример на нашем рисунке сработает,
только если стены твоего лабиринта тоже зеленого цвета.

Большая игра

1

Если лодка коснется стены (при условии, что
стена зеленого цвета), код сообщит программе,
что игрок должен вернуться в начало! В зависимости от схемы лабиринта, который ты построил, лодка может оказаться где угодно. Поэтому
измени значения на нужные в блоках УСТАНОВИТЬ X В и УСТАНОВИТЬ Y В. Координата
x укажет лодке, как долго ей двигаться вправо.
Координата y определяет движение лодки в направлении нижнего края экрана.
7. Осталось еще кое-что. Нужно придумать, что
произойдет, когда Стив достигнет цели — т.е.
лодка доплывет до дома. Наш лабиринт невозможно пройти, нажимая только клавиши ←, ↑
и ↓ на клавиатуре. Поэтому нам предстоит добавить дополнительный код в блок КОГДА
КЛАВИША СТРЕЛКА ВПРАВО НАЖАТА, определяющий движение при нажатии клавиши →.

1

3

1

1

4

Изучаем программирование на примере Minecraft

В зависимости от того, какой лабиринт ты выстроил, возможно, тебе придется добавить дополнительный блок в каждый созданный тобой
блок КОГДА КЛАВИША … НАЖАТА.

Обрати внимание, что если твой лабиринт построен из множества стен, то дом Стива может называться не Спрайт 13, а иначе. Поэтому
проверь спрайты в окне, в котором находятся
все созданные объекты игры, и определи правильный номер спрайта дома Стива. Замени
имя спрайта дома Стива на правильное в блоке КАСАЕТСЯ …, который ты только что добавил.
Отлично, давай проверим, что будет, если пройти лабиринт до конца…

Большая игра

1

Отличный результат! Остались последние настройки.
8. Ты заметил, что даже после достижения цели,
игра не заканчивается и лодка может продолжить движение? Исправим это. Нам всего лишь
надо немного ИЗМЕНИТЬ ПОСЛЕДНИЙ ДОБАВЛЕННЫЙ БЛОК:

Теперь лодка исчезнет через две секунды после
касания дома, как будто Стив зашел внутрь. Хорошая работа! Перезапусти игру, нажав кнопку с изображением красного знака Остановить
в верхней части окна с игрой.

ВВЕДИ НАЗВАНИЕ СВОЕЙ ИГРЫ в поле ввода
в центре, если хочешь.
9. Последняя недоработка связана с тем, что вода
в лабиринте белая! Чтобы изменить ее цвет,
перейди к панели Сцена в правом нижнем углу

1

5

1

1

6

Изучаем программирование на примере Minecraft

окна. На этой панели установи указатель мыши
поверх кнопки с изображением картины. В появившемся меню выбери пункт НАРИСОВАТЬ
с изображением кисточки.

В открывшемся окне для рисования с помощью
инструмента ЗАЛИВКА залей фон голубым цветом. Вода тут же затопит лабиринт!

10. Не забудь выбрать в меню ФАЙЛ команду
СОХРАНИТЬ НА СВОЙ КОМПЬЮТЕР. И тогда позже ты сможешь показать свою игру
друзьям!
Поздравляем! Ты самостоятельно построил лабиринт с нуля. Как насчет еще одной игры, на
этот раз на тему строительства? Нас ждет вторая миссия.

МИССИЯ 2
НА ПРОСТОРАХ
ИНТЕРНЕТА:
СОЗДАЕМ
ОНЛАЙН-ИГРУ

Т

ы можешь создавать онлайн-игры. Тебе ведь
было интересно создавать приключенческую
игру для Стива в самой первой миссии? Мы можем написать еще более продвинутый код для более сложных игр. Давай создадим для сайта Стива
строительную игру!

Блоки — базовый элемент в игре Minecraft. Какие еще фигуры
можно добавить в игру?

1

1

8

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Давай вернемся к сайту Стива. Для начала добавим новую строку с кодом в документ INDEX.
HTML:

2. Теперь нам предстоит создать еще одну новую
страницу, присвоив файлу имя GAMES.HTML.
Страницу сохрани в ту же папку, что и остальные документы, созданные нами ранее для сайта Стива. Наконец введи следующий код в созданный документ:

3. В разделе head СДЕЛАЙ ССЫЛКИ НА CSSИ JQUERY-ФАЙЛЫ:

4. И теперь ДОБАВЬ НОВУЮ КНОПКУ в раздел
body:

Большая игра

1

Пока новая страница выглядит довольно скучно.
Но кнопка выглядит заманчиво, не так ли?

ВНИМАНИЕ! МАРШ!!
5. Мы собираемся СОЗДАТЬ ФУНКЦИЮ, КОТОРАЯ
СГЕНЕРИРУЕТ КВАДРАТЫ РАЗНЫХ РАЗМЕРОВ.
В разделе script в нижней части страницы добавь следующее:

Пока тебе все понятно? Всякий раз, когда
игрок нажимает кнопку, значение переменной
shapeCount будет увеличиваться на единицу.
Нам это поможет отследить, сколько фигур уже
использовано, и применить разные эффекты
к каждому объекту.
6. Давай подумаем над СЛУЧАЙНЫМ ВЫБОРОМ
РАЗМЕРА И ЦВЕТА НАШИХ ФИГУР. Метод Math.
random генерирует случайные значения, а метод
Math.floor округляет результат. Таким образом
генерируется случайное целое (не десятичное)
число, определяющее размер блока в диапазоне от минимальной величины в 5 пикселей до
максимальной равной 100 пикселям.

1

9

1

2

0

Изучаем программирование на примере Minecraft

Нижняя строка написанного кода отвечает за
случайный выбор цвета фигуры. Не останавливайся, придумай что-нибудь еще!
Как всегда, есть проблема, требующая решения:
КАЖДОЙ ФИГУРЕ НЕОБХОДИМО ПРИСВОИТЬ
СОБСТВЕННЫЙ ИДЕНТИФИКАТОР. Поможет
нам в этом вот такая строка кода:

В этой строке создается переменная shapeID,
которая и будет присваивать уникальное имя
каждому блоку, объединяя слово shape с порядковым номером фигуры. Первый строительный блок получит имя shape1, второй — shape2
и так далее.
7. Теперь добавим в нашу функцию КОМАНДУ
СОЗДАВАТЬ НА СТРАНИЦЕ НОВЫЙ РАЗДЕЛ
DIV с идентификатором последней созданной
фигуры. Здесь очень важно четко соблюдать
расположение кавычек. Двойные кавычки окружают сообщение и позволяют вводить переменные. Одинарные кавычки помогают HTML-файлу
понять, что это идентификатор.

8. А ты знаешь, что мы можем изменять стили CSS
с помощью jQuery? Теперь не придется создавать для каждой фигуры отдельные свойства
CSS. Давай пропишем возможность ЗАДАВАТЬ

Большая игра

1

НАШИМ БЛОКАМ СЛУЧАЙНЫЕ ЗНАЧЕНИЯ ВЫСОТЫ, ШИРИНЫ И ЦВЕТА.

Обрати внимание, как мы использовали переменную в нашем селекторе jQuery. Если мы введем #shapeID, ничего не произойдет, поскольку
ни одному из наших элементов не присвоен такой идентификатор. Код, созданный нами, указывает jQuery искать объекты с идентификаторами shape1, shape2 и так далее.
9. Наконец, давай сделаем так, ЧТОБЫ ИГРОК
СМОГ ПЕРЕТАСКИВАТЬ БЛОКИ.

10. СОХРАНИ ВСЕ ИЗМЕНЕНИЯ И ПЕРЕЗАГРУЗИ
страницу. Проверь, что происходит после каждого нажатия кнопки.

У нас появился набор случайных строительных
блоков. Их можно перетаскивать, чтобы строить
дома, машины — да все, что только пожелаешь!

2

1

1

2

2

Изучаем программирование на примере Minecraft

Мы усовершенствовали нашу игру. Однако надоедает все время прокручивать экран в поисках нужного блока, чтобы перетащить его к месту стройки.
11.

Поэтому давай создадим класс, чтобы поменять
место появления блоков. Введи в CSS-файле
следующий код:

Наши блоки теперь появляются вдоль правого края страницы, располагаясь рядом. Также
вокруг каждого блока добавилось немного пустого пространства — будет легче захватить
нужную фигуру, чтобы перетащить ее к месту
строительства.

12. Итак, мы создали действительно классную строительную игру! И МЫ МОЖЕМ ЕЕ УЛУЧШИТЬ,
ЕСЛИ ДОБАВИМ КОД, УКАЗАННЫЙ НА РИСУНКЕ НИЖЕ. В самом конце функции введи:

Большая игра

1

Каждый раз, когда мы создаем фигуру, переменная circle будет выбирать значение в диапазоне от 1 до 10. Если значение будет больше 7, появится круг. Иными словами, у нас 20%
вероятность появления круга после каждого
нажатия кнопки.
Взгляни:

Да, из двадцати появившихся фигур четыре круга. То есть каждая пятая фигура — круг. Это те
самые 20%. Значит, наш оператор if работает
безупречно. Мы с тобой отлично потрудились!
Управляя значением в операторе if, измени вероятность появления круга, увеличив или, наоборот, уменьшив ее. Экспериментируй! Твори!
Перейдем к следующей миссии, которая научит
нас вести подсчет очков.

2

3

МИССИЯ 3
ОЧКИ ПРОТИВ
КРИПЕРОВ:
ПРОГРАММИРУЕМ
ИГРУ НА РЕЗУЛЬТАТ

П

рохождение лабиринта и строительство из
блоков — безусловно, очень интересные и веселые игры. Но если цель твоей игры набрать как
можно больше очков, эта миссия — именно то, что
тебе нужно. Сейчас нам пригодятся все полученные знания о программировании!

Твоих знаний достаточно, чтобы создать армию криперов
и набрать многомного очков, которые принесут
тебе победу!

Большая игра

1

НА СТАРТ!
1. Для этой игры нам понадобится весь экран, поэтому мы не можем работать в созданном ранее
документе games.html. Нам предстоит СОЗДАТЬ
НОВУЮ СТРАНИЦУ ПОД ИМЕНЕМ GAMES2.
HTML. При желании ты можешь добавить ссылку
на него в свой HTML-файл, ты это уже умеешь.
2. Итак, создаем страницу. Чувствуешь уверенность в собственных силах? Сможешь создать
страницу без подсказки ниже? Попробуй.

3. Код, который мы добавим в раздел body нового
файла, будет отличаться от того, что мы делали раньше. Нам нужно ОТОБРАЗИТЬ ИГРОВОЙ
СЧЕТ — очки, заработанные игроком, и время,
оставшееся до конца игры.

4. Перейдем в РАЗДЕЛ SCRIPT. Первое, что нужно
сделать, это убедиться, что невозможно повторно нажать кнопку Старт! В противном случае
возникнут разного рода проблемы! Мы включим код, запрещающий многократное нажатие
кнопки в ФУНКЦИЮ STARTGAME:

2

5

1

2

6

Изучаем программирование на примере Minecraft

СОХРАНИ СТРАНИЦУ и попробуй нажать кнопку. Что произошло?

Цвет кнопки изменился. И ты не можешь нажать ее повторно. Отличная работа! Мы на пути
к созданию полноценной игры с большими возможностями!

ВНИМАНИЕ! МАРШ!!
5. ДОБАВИМ РЯД ПЕРЕМЕННЫХ в код игры:

Обрати внимание, ПЕРЕМЕННАЯ HIGHSCORE
находится вне функции. Это значит, что только после открытия веб-страницы игровой счет

Большая игра

1

будет равен нулю. Во время игры счетчик не
обнуляется. Если бы мы добавили переменную
highscore внутрь функции, игровой счет обнулялся бы после каждого старта игры.
6. Далее мы собираемся ОГРАНИЧИТЬ ВРЕМЯ
игры. Этот показатель контролирует ПЕРЕМЕННАЯ GAMELENGTH. Видишь, значение переменной gameLength равно 60? Значит, игра не может длиться больше 60 секунд. В JavaScript для
ограничения событий по времени используется
функция setInterval:

Число в скобках после функции сообщает ей,
с какой частотой должен запускаться код, написанный выше. У нас это 1000 миллисекунд. Значит, код будет исполняться каждую секунду. Что
это значит? Один раз в секунду игрового времени функция будет учитывать и отображать
оставшееся время в счетчике кнопки, указанном в разделе div. Также функция будет вести
подсчет очков и выведет наилучший результат,
но этот код мы введем позже.

Щелкни мышью по кнопке, чтобы начать игру,
и подожди, пока закончится игровое время. Заметил ошибку?
Кнопка не вернулась к исходному виду. Нам
НУЖЕН КОД, КОТОРЫЙ ОСТАНОВИТ ПОДСЧЕТ ВРЕМЕНИ после достижения нулевого

2

7

1

2

8

Изучаем программирование на примере Minecraft

значения. При этом кнопка должна активизироваться! К счастью, это легко исправляется с помощью оператора if else.

Наш код сообщает функции необходимость учета времени и очков, пока не останется одна секунда до конца игры. Как только время выйдет,
код сделает кнопку Старт! доступной для нажатия, а с помощью функции clearInterval остановит таймер. Если ты перезагрузишь страницу
и нажмешь кнопку Старт!, счетчик остановится
на нуле. Так должно быть каждый раз.

7. Теперь мы знаем, как связывать события и время. Давай ПРОДОЛЖИМ ОСВАИВАТЬ ФУНКЦИЮ SETINTERVAL и создадим еще один таймер
с заданным интервалом в две секунды. Пока мы
здесь, давай добавим оператор if else, как показано на рисунке:

Большая игра

1

8. Дальше будет труднее. Мы хотим, чтобы каждые
две секунды ПОЯВЛЯЛСЯ НОВЫЙ МОНСТР.
Для этого каждому монстру нужно присваивать уникальный идентификатор, точно так же,
как во второй миссии этой главы идентификаторы присваивались каждой новой фигуре.
Помнишь, как это сделать? Не волнуйся, если
не помнишь, — продолжай вместе с нами. Введи код, указанный на рисунке внизу, в верхнюю
часть оператора if, заключив код в скобки, перед элементом else:

Теперь каждые две секунды значение ПЕРЕМЕННОЙ MONSTERCOUNT будет увеличиваться на
единицу. Затем это значение будет присваиваться в качестве идентификатора с добавлением
слова monster перед ним. Например, monster1,
monster2 и monster3. Последняя строка кода
отвечает за появление нового крипера и присвоение каждому персонажу уникального идентификатора.

2

9

1

3

0

Изучаем программирование на примере Minecraft

9. Цель игры — заработать как можно больше очков. Очко дают за исчезновение крипера после того, как игрок щелкнул по нему мышью.
Нам будет ЛЕГЧЕ СПРАВИТЬСЯ С МОНСТРАМИ
С ПОМОЩЬЮ JQUERY:

Теперь каждая победа на крипером приносит 10
очков. Как всегда, нам есть над чем поработать,
чтобы улучшить игру. Первая проблема, которую нужно решить, заключается в том, что каждый новый крипер появляется в одном и том же
месте. Вторая ошибка — крипер появится, даже
если ты еще не уничтожил предыдущего монстра.

Большая игра

1

10. КРИПЕРЫ ДОЛЖНЫ СПАУНИТЬСЯ В СЛУЧАЙНЫХ МЕСТАХ. Для этого добавим две строки
с кодом с указанием координат по осям x (определяет расстояние от крипера до правого края
экрана) и y (определяет расстояние от крипера
до верхнего края экрана). Мы как будто строим график. Добавь новый код ниже переменной
monsterID:

Если на экране видна только часть крипера,
измени значения по осям x и y. На твоем компьютере может понадобится корректировка координат. То, что на одном компьютере будет выглядеть хорошо, на другом требует изменения.
11.

Найди строку с кодом, с помощью которого мы
добавили изображение крипера. Прямо под ней
ВВЕДИ СЛЕДУЮЩИЙ КОД:

Обрати внимание, что вместо конкретных чисел
мы используем проценты для определения расстояния от крипера до верхнего и левого края
экрана. Благодаря этому игра запустится даже
на устройствах с небольшими экранами. А еще
мы уменьшили размеры крипера, чтобы усложнить игру и сделать ее более интересной.

3

1

1

3

2

Изучаем программирование на примере Minecraft

12. Теперь сделаем так, ЧТОБЫ КРИПЕРЫ ИСЧЕЗАЛИ, если никто не щелкнул по ним мышью
в течение двух секунд. Для начала удали всех
криперов с экрана. Затем перейди к функции
setInterval. И в операторе if gameLength добавь следующий код:

Такой же код добавь в нижнюю часть оператора
else. Теперь криперы исчезнут по завершении
игры.

Твоя игра, твой код

X

Как и в любой миссии, предлагаем тебе пофантазировать и изменить все, что пожелаешь.
•

Хочешь ловить кур, а не уничтожать криперов? Укажи ссылку на другой рисунок.

•

Хочешь заработать больше очков, или увеличить продолжительность игры, или изменить размер криперов? Это просто — достаточно поменять значение соответствующей
переменной!

Большая игра

•

1

Игра получилась слишком простой или
слишком сложной? Измени уровень сложности, скорректировав интервал выполнения
функции setInterval. Напомним, это значение, указанное в скобках рядом с функцией.
Если ты хочешь столкнуться с настоящими
трудностями, установи значение равным 500.
Если оно будет меньше 500, пройти игру станет невозможно.

13. СОХРАНИ ИЗМЕНЕНИЯ НА СТРАНИЦЕ и перезагрузи ее. Твоя игра почти безупречна! Но коечто не работает. Заметил на рисунке ниже, что
именно?

Не работает счетчик лучших результатов. Не паникуй — исправить его легче легкого! Ты помнишь
функцию, которая определяет, что происходит
с монстром после щелчка мышью по нему? Измени код в этой функции следующим образом:

3

3

1

3

4

Изучаем программирование на примере Minecraft

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

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

Побеждаем баги

X

Программирование и отладка кода идут рука
об руку. Давай поищем, не осталось ли ошибок
(багов) в нашем коде? Попробуй предположить,
что случится, если:
•

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

•

Установить рекорд в текущей игре, а в следующей игре не дотянуть до рекордного показателя?

•

Дважды щелкнуть по криперу? Сработает ли
эта хитрость?

•

Изменить число заработанных очков обманным путем? (Это не сработает. Почему?)

МИССИЯ 4
НОВЫЙ УРОВЕНЬ:
CОВЕРШЕНСТВУЕМ
ИГРУ

Д

о того, как к тебе в руки попала эта книга, скорее всего, тебе не было известно о программировании ничего. А теперь ты умеешь писать код
полноценной игры, как, например, в последней
миссии. Ты можешь гордиться своими достижениями на пути программирования. Но знаешь, любой
создатель игры всегда хочет что-то в ней изменить,
придумать новые интересные возможности. Поэтому и мы собираемся добавить несколько функций, которые сделают нашу игру более сложной
и увлекательной.

Сердце настоящего программиста никогда не остается спокойным в отношении его творения! Как только код закончен,
программист уже думает над тем, как его изменить в лучшую
сторону.

1

3

6

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Представь, что ты построил куриную ферму
в Minecraft. Все идет хорошо, но вдруг ты слышишь шипящий звук — криперы пробрались на
ферму! Цель новой игры — отловить криперов,
то есть щелкать мышью только по ним. Это сложнее, чем кажется. Ведь если ты щелкнешь по
курице, которая тоже появляется то тут, то там,
с тебя снимут очки. Усложним задачу еще сильнее — уменьшим изображения персонажей.

2. Открой файл games2.html.

Большая игра

1

ВНИМАНИЕ! МАРШ!!
3. Начнем со случайного изменения размеров
монстров. Для этого СОЗДАДИМ НОВУЮ ПЕРЕМЕННУЮ MONSTERSIZE. Значение этой переменной определяет изменение размера монстра
в диапазоне от 3% до 12% от исходного размера
крипера. Введи этот код под строками monsterX
и monsterY. Имей в виду, что ты можешь изменить эти значения в том случае, если появляются персонажи слишком большие или, наоборот,
слишком маленькие.

Теперь УСТАНОВИМ ШИРИНУ (ТОЛЩИНУ)
МОНСТРА. Добавим следующую строку ниже
кода, который отвечает за случайное место появления крипера:

После СОХРАНЕНИЯ ИЗМЕНЕНИЙ И ПЕРЕЗАГРУЗКИ СТРАНИЦЫ размеры криперов станут
другими. Сработало?

4. Теперь СДЕЛАЕМ ТАК, ЧТОБЫ КУРЫ ПОЯВЛЯЛИСЬ ПРОИЗВОЛЬНО. Мы создадим новую
функцию, которая случайным образом выберет

3

7

1

3

8

Изучаем программирование на примере Minecraft

число в диапазоне от 1 до 10. Если число будет
больше 5, появится крипер. Если число окажется меньше 5, на экране возникнет курица.

Обрати внимание, что мы применили классы
к нашим изображениям, не внеся изменения
в CSS-файл. Мы указываем jQuery, что должно
происходить после щелчка мышью по персонажу. Обычно для этого используется идентификатор. Но мы уже присвоили его ранее, работая
над исчезновением криперов.
5. Наша новая функция почти готова. Осталось
определить, КОГДА ОНА БУДЕТ ВЫПОЛНЯТЬСЯ. За появление новых персонажей отвечает
ВТОРАЯ ФУНКЦИЯ SETINTERVAL, так что включим наш код сюда. Поместим здесь новую строку с кодом прямо под строкой monsterSize:

СОХРАНИ ИЗМЕНЕНИЯ И ПЕРЕЗАГРУЗИ СТРАНИЦУ. Если все работает, как задумывалось,
куры должны время от времени появляться на
экране.

Большая игра

1

6. Мы сильно продвинулись вперед. Однако есть
недоработки. Когда мы щелкаем мышью по курице, ничего не происходит. Это случилось потому, что мы пока не добавили нужный код. Изучи
свою HTML-страницу, чтобы НАЙТИ ТУ ЧАСТЬ
КОДА, КОТОРАЯ ОТВЕЧАЕТ ЗА ПОСЛЕДСТВИЯ
ЩЕЛЧКА МЫШЬЮ ПО КРИПЕРУ. Добавим почти такую же функцию для курицы:

Все довольно просто, верно? Мы сделали так,
чтобы щелчок по курице приводил к потере десяти очков. Она никак не повлияет на рекорд,
и поэтому этот раздел мы не трогали. Твой счет
будет уменьшаться! УБЕДИСЬ, ЧТО ВСЕ РАБОТАЕТ, ПОЙМАВ КУРИЦУ:

7. Осталась последняя задача, которую нам предстоит решить, чтобы игра стала лучше. В игре
нет обратной связи за исключением подсчета

3

9

1

4

0

Изучаем программирование на примере Minecraft

очков. Новые игроки, только поймав курицу,
узнают, что не стоит по ней щелкать мышью, так
как это приводит к потере очков.
Если ты делаешь в игре что-то, что не стоило
делать, что происходит? Часто игровые объекты начинают дрожать или подпрыгивать, тем
самым показывая, что ты делаешь что-то недозволенное. Давай наша КУРИЦА БУДЕТ ПОДПРЫГИВАТЬ ПОСЛЕ ТОГО, КАК ИГРОК ПОЙМАЕТ ЕЕ МЫШЬЮ.
Вспомни миссии, в которой мы создавали анимацию. Ты, должно быть, догадываешься, что
сейчас нам ПОМОЖЕТ ПЛАГИН JQUERY UI.
В разделе head файла игры добавь ссылку на
плагин jQuery UI.

Прокрути страницу вниз, пока не найдешь раздел с функциями .click, связанный с курами
и криперами.
В первом разделе измени строку с функцией
.remove(). Она должна выглядеть так:

8. Что касается криперов, используй любой эффект по своему усмотрению. Нам кажется, оптимальным будет установить для криперов эффект
дрожания. Все как в Minecraft. Добавь следующий код, чтобы КРИПЕРЫ ЗАДРОЖАЛИ:

Большая игра

1

9. Но постой! Поскольку теперь крипер не исчезает мгновенно после щелчка мышью, можно
щелкать по одному и тому же монстру много
раз, набирая очки. Это нечестно, поэтому давай
подумаем, как исправить ситуацию.
В jQuery есть отличная функция. Она ПОЗВОЛЯЕТ ЩЕЛКНУТЬ ПО ОБЪЕКТУ ТОЛЬКО ОДИН
РАЗ. Если бы не эта функция, нам пришлось бы
создавать новую переменную, которая проверяла бы, щелкнул ли игрок по монстру ранее.
А при появлении нового крипера переменная
должна была бы возвращаться к исходному значению. Но мы можем решить эту проблему с помощью одной строки кода. Продолжаем работу. Заменим первую строку сценария .click()
крипера следующим кодом:

Если хочешь, проделай то же самое и для курицы. Хотя в этом нет необходимости. Ведь сколько бы ты не щелкал по курице, это не повлияет
на твои достижения.

4

1

1

4

2

Изучаем программирование на примере Minecraft

Продолжаем учиться

X

Мы хорошо потрудились и освоили различные
настройки игры! Однако, если хочешь узнать
больше, добавь или измени некоторые элементы кода. Вот несколько дополнительных заданий:
•

Установи время появления криперов в значении 80%, а не 50%, как у нас.

•

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

•

Сделай так, чтобы криперы двигались (совет: тебе нужно добавить раздел .creeper
в CSS-файл).

•

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

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

МИССИЯ 5
ВНУ ТРИ MINECRAF T:
ЗАМЕНА ОБЪЕКТОВ

Д

о сих пор мы занимались настройкой твоей
игры с криперами и курами. Но ведь можно
воспользоваться кодом, чтобы внести изменения
в уже готовые игры. Тебе хотелось бы поменять
что-нибудь в Minecraft? Давай начнем с внешнего
вида игровых объектов.

Как бы ты изобразил мир Minecraft? Пофантазируй, чтобы
использовать свои идеи в дальнейшем.

1

4

4

Изучаем программирование на примере Minecraft

НА СТАРТ!
1. Первым делом мы ВЕРНЕМСЯ В ПАПКУ С ПАКЕТОМ РЕСУРСОВ, который мы создали ранее
в этой главе. Тогда мы создали папку Мои звуки,
помнишь? В той же папке создай еще одну, под
названием TEXTURES.
2. В созданной папке СОЗДАЙ ЕЩЕ ТРИ — BLOCKS,
ENTITY, ITEMS.

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

ПАПКА BLOCKS предназначена для хранения стандартных блоков, таких как земля,
песок, трава.

•

В ПАПКЕ ENTITY должны находиться персонажи игры — свиньи, волки, скелеты.

•

В ПАПКУ ITEMS поместим оружие, инструменты и тому подобное.

3. Очень важно сохранять новый объект под правильным именем. К счастью, есть простой способ определить, не допущена ли ошибка в имени

Большая игра

1

любого файла с игровым объектом. Вернись
в исходную папку Minecraft. В операционной
системе Windows она находится по адресу:
C:\USERS\ТВОЕ_ИМЯ\APPDATA\ROAMING\
.MINECRAFT\
На компьютере Mac нужную папку можно найти
здесь:
~/LIBRARY/APPLICATION SUPPORT/
MINECRAFT/
Ты увидишь папку versions. Открой ее и далее
щелкни мышью по папке с той версией игры
Minecraft, которая установлена на твоем компьютере. Внутри находятся два файла. Нас интересует сейчас только один, тот, который больше.
Размер каждого файла отображается в колонке
Размер справа от имени файла.
ЕСЛИ У ТЕБЯ ОПЕРАЦИОННАЯ СИСТЕМА WINDOWS:
Перейди на вкладку Вид на панели управления
в верхней части окна проводника. На панели
установи флажок в строке Расширения имен
файлов.

ЕСЛИ У ТЕБЯ MAC:
Выдели файл и выбери команду Свойства.
В строке Имя и расширение ты увидишь маленький треугольник. Щелкни по нему мышью.
Если на открывшейся панели установлен флажок Скрыть расширение, сбрось его.
Теперь ты должен увидеть, что в конце имени
файла указано расширение .jar. ПЕРЕИМЕНУЙ

4

5

1

4

6

Изучаем программирование на примере Minecraft

ФАЙЛ, заменив расширение на .zip. Теперь ОТКРОЙ ЕГО.
ПЕРЕЙДИ В ПАПКУ ASSETS, ЗАТЕМ В ПАПКУ
MINECRAFT И НАКОНЕЦ В ПАПКУ TEXTURES.
Именно здесь хранятся ресурсы текстур по
умолчанию. Зайди в папку blocks, чтобы узнать,
как именно называется файл с тем объектом
игры, который потребуется заменить. Ту же самую информацию ты можешь посмотреть в отношении файлов в папке entity.

Большая игра

1

ВНИМАНИЕ! МАРШ!!
4. Начнем с простого. ФАЙЛ С ТЕКСТУРОЙ ТРАВЫ НАЗЫВАЕТСЯ GRASS_TOP.PNG. Щелкни по
нему правой кнопкой мыши и выбери команду
Извлечь, чтобы сохранить файл в любом месте,
например на рабочем столе. Попробуй прямо
сейчас! Потом ОТКРОЙ ФАЙЛ В ЛЮБИМОЙ
ПРОГРАММЕ ДЛЯ РИСОВАНИЯ.

Рисунок очень маленький, правда? Увеличь его
в несколько раз с помощью инструмента в виде
лупы. Есть еще кое-что: трава зеленая, но в нашей программе она серая. Это связано с тем,
что в Minecraft некоторые блоки объектов прозрачные и графические редакторы их не видят.
Не волнуйся, это не проблема.
5. Измени что-нибудь в файле. Ты можешь СДЕЛАТЬ ВСЕ ЧТО УГОДНО — ИЗМЕНИТЬ ЦВЕТ,
УДАЛИТЬ ВСЕ И НАРИСОВАТЬ СОБСТВЕННУЮ
ТРАВУ, ДОБАВИТЬ ТЕКСТОВОЕ СООБЩЕНИЕ
и так далее. Ты даже можешь увеличить рисунок,

4

7

1

4

8

Изучаем программирование на примере Minecraft

если умеешь. В нашем примере мы дополнили
рисунок травинками и цветочками.

Стоит учесть один нюанс. Если ты рисуешь
какой-то элемент, помни, что он повторится
в текстуре. При этом он не должен смотреться
странно. Например, если в центре нашего рисунка ты изобразил один большой цветок, он
появится в каждом блоке травы. Звучит странно? Выглядит это тоже несколько странно:

Большая игра

1

Есть только одно правило: рисунок должен
иметь ОДИНАКОВЫЕ ВЫСОТУ И ШИРИНУ.
В противном случае он отобразится на экране
в виде пурпурных и черных квадратов. Это выглядит чудаковато, особенно если на этом месте должна быть трава.

4

9

1

5

0

Изучаем программирование на примере Minecraft

6. Как только ты закончишь рисовать траву, СОХРАНИ ФАЙЛ ПОД ИМЕНЕМ GRASS_TOP.PNG.
Помести документ в свою папку с пакетами ресурсов. Помни, что файл с травой должен находиться в папке blocks. Запусти Minecraft и подключи свой пакет ресурсов в настройках игры,
как мы делали это раньше.
Когда игра загрузится, мы увидим, что трава изменилась!

Эй, здесь свинья. Можем ли мы изменить ее
внешний вид?

Большая игра

Моды Minecraft —
будь бдителен

1

X

Когда дело доходит до моддинга Minecraft, многие предпочитают загружать готовые моды из
Интернета. Проблема в том, что если мод несовместим с используемой версией игры, то
игра будет работать нестабильно. Если ошибка
все-таки произошла, нужно удалить мод. Однако в некоторых случаях это проще сказать,
чем сделать. Чтобы обезопасить себя, всегда
спрашивай разрешение родителей, прежде чем
скачать и установить файл из Интернета. А еще
лучше попроси их прочитать о моде, который
ты выбрал, и о его установке. Часто установка
представляет собой довольно замысловатый
процесс.

7. Файл с текстурой свиньи сохранен в папке entity
в архиве, который мы уже открывали ранее.
СКОПИРУЙ ЭТОТ ФАЙЛ И ОТКРОЙ ЕГО В ГРАФИЧЕСКОМ РЕДАКТОРЕ. Заметил что-нибудь
необычное?

8. Абсолютно все объекты в игре Minecraft построены из блоков. Поэтому файлы текстур состоят

5

1

1

5

2

Изучаем программирование на примере Minecraft

из частей, которые складываются в целую фигуру животного. Вот наглядный пример:

Фигура слева называется развертка. РАЗВЕРТКА — ЭТО ДВУХМЕРНЫЙ ОБЪЕКТ, ИЗ КОТОРОГО МОЖНО СЛОЖИТЬ ТРЕХМЕРНУЮ ФИГУРУ.
В нашем случае, из развертки слева получается
куб, изображенный справа. Развертка свиньи —
это то же самое, просто у нее более сложная
форма. Если мы нарисуем прямую черную линию вдоль развертки свиньи, то во время игры
ты увидишь на свинье несколько черных точек.
Так что будем внимательны, стоит подумать, какой частью свиньи станет отредактированная
часть развертки.
Как это узнать? Не очень просто. Но есть несколько подсказок. Мы видим, где на развертке
находятся пятачок, глаза, хвост. Почему бы нам
не начать отсюда? ПОПРОБУЕМ НАРИСОВАТЬ
СОЛНЦЕЗАЩИТНЫЕ ОЧКИ:

Большая игра

1

9. СОХРАНИ РИСУНОК ПОД ИМЕНЕМ PIG.PNG.
Внутри своей папки entity с существами
Minecraft создай папку pig и сохрани свой рисунок в нее. А теперь перезапусти игру и найди
свинью. Призови ее в творческом режиме, как
мы делали ранее.

Отличная работа! Мы сделали модных хрюшек!

5

3

1

5

4

Изучаем программирование на примере Minecraft

А ты так сможешь?!

X

Поиграй немного, а потом попробуй решить
следующие задачи:
•

Сделай всех куриц голубыми.

•

Напиши на одной стороне блока слово «Домик» и используй такой блок при строительстве дома.

•

Надень на всех коров носки.

•

Измени внешний вид меча.

ГЛОССАРИЙ
Не знаешь, что значит то или иное слово? Мы составили список непонятных и новых терминов.
Проверь себя и поделись с друзьями новыми знаниями!
HTML: Язык разметки гипертекста. Этот язык используется для создания «фундамента» сайта, его
структуры.
HTML-элемент: Фрагмент кода веб-страницы,
обычно состоящий из открывающего и закрывающего тегов.
JavaScript: Язык сценариев, с помощью которых на
сайт добавляются новые функции, расширяющие
его возможности.
jQuery: Плагин JavaScript, который определяет взаимодействие пользователя с веб-страницей, иначе
говоря, делает сайт интерактивным.
Scratch: Сайт, где можно собрать собственные программы с помощью готовых блоков. Главная его
особенность в том, что код не вводится вручную
построчно.
setInterval: Функция JavaScript, которая позволяет многократно запускать исполнение кода
в определенное функцией время.
Каскадная таблица стилей (CSS): Файлы CSS необходимы для изменения внешнего вида или поведения элементов HTML-страницы.
Массивы: Тип переменных, содержащих несколько
значений, а не одно.

1

5

6

Изучаем программирование на примере Minecraft

Мод: Небольшая модификация, изменение. Мод,
созданный для программы, вызывает изменения
в ее работе.
Параметр: Значение функции, которое влияет на
ее работу.
Переменная: Значение, которому присвоено имя.
Ее сохраняют для дальнейшего использования.
Плагин: Готовый модуль, содержащий код, предназначенный для улучшения и расширения возможностей программного обеспечения. С помощью
плагина в программу добавляют новые возможности или упрощают работу с существующими функциями.
Ресурсы: Аудиофайлы и изображения, которые
используются при создании сайтов и программ.
Спрайт: Рисунок персонажа. В нашей книге это
были Стив, криперы, куры, яйца.
Теги: «Кирпичики» при строительстве сайтов
HTML. Теги всегда заключены в угловые скобки.
Из открывающего и закрывающего тегов состоит
HTML-элемент. Чтобы закрыть тег, его повторяют,
но перед первой буквой ставят косую черту. Например, открывающий тег <head> и закрывающий
тег </head> формируют элемент head.
Функция: Строки кода, сгруппированные вместе
для решения определенной задачи. Может исполняться в заданное время без необходимости вводить этот же код.
Цикл: Запускает исполнение кода много раз подряд, при этом не нужно каждый раз копировать
и вводить этот код.
Элемент веб-страницы: Объект веб-страницы. Элементом может быть все что угодно — рисунок, таблица и даже текст. Не путайте с HTML-элементом.

ИСПРАВЛЯЕМ
ОШИБКИ
Если написанный тобой код не работает или работает с ошибками, не вешай нос! Никто и никогда не
писал идеально работающую программу с первого
раза. На самом деле ошибки (баги) — это мощный
стимул, чтобы расти и развиваться в выбранном
деле, в программировании. Исправляя ошибки,
ты учишься писать код все лучше и лучше. В этом
разделе мы перечислим основные проблемы, с которыми ты можешь столкнуться на пути к идеальному коду.
НА СТРАНИЦЕ ВИДЕН ТЕКСТ, КОТОРЫЙ НЕ ДОЛЖЕН ОТОБРАЖАТЬСЯ.
Обычно это говорит о том, что элемент
в HTML-файле закрыт неправильно. Например, если вместо открывающего и закрывающего тегов <p></p> указаны теги <p></>, то на странице появится текст </>.
Также с подобной проблемой ты столкнешься,
если неправильно используешь кавычки. Если кавычки указываются внутри других кавычек (например, двойных), то это должны быть другие (например, одинарные) кавычки. Тогда программа будет
понимать команды правильно.
Это работает:

1

5

8

Изучаем программирование на примере Minecraft

А это нет:

Код на втором рисунке попытается применить
строку <img class = к слову egg. Во избежание
этого слово egg должно быть заключено в одинарные кавычки.
ФУНКЦИИ JAVASCRIPT НЕ РАБОТАЮТ
Существует множество причин, по которым функции не будут исполняться после запуска. С помощью браузера можно легко выяснить, где именно
допущена ошибка.
Нажми клавишу F12 на клавиатуре, выбери команду Консоль на открывшейся панели (или воспользуйся соответствующей командой в меню, если
у тебя другой браузер, а не Chrome). В окне отобразится сообщение, в котором красный цвет укажет на ошибку.

На нашем рисунке ошибка допущена в строке 59
на странице animation.html. Мы забыли поставить
закрывающую скобку. Так что перейдем к указанной странице и добавим пропущенный знак в нужном месте.
Одной из распространенных ошибок является неправильный ввод слов. В примере внизу мы видим, что вместо eggCount было введено egCount.
Одна буква пропущена. Исправить такую ошибку
легко — достаточно ввести пропущенную букву,
и страница начнет работать корректно.

Исправляем ошибки

1

Если тебе не удается найти причину ошибки, проверь:
•

Все ли функции и переменные (включая имена)
написаны правильно?

•

Если не работает библиотека jQuery, проверь,
что ссылки с указанием пути к библиотеке в раздел head добавлены в твой HTML-файла.

•

Проверь функции setInterval. Если установлено слишком большое время для запуска повторения, то будет казаться, что ничего не происходит.

СТИЛИ CSS НЕ ПРИМЕНЯЮТСЯ
Самая частая причина того, что стили CSS не применяются, — отсутствие ссылки на CSS-файл в начале HTML-страницы. Вторая распространенная
ошибка — пропущенные буквы при наборе функций и их свойств. Например, вместо backgroundcolor может быть введено bacground-color.
Если после проверки все еще непонятно, почему
стили CSS не применяются, убедись, что правильно указано имя CSS-файла. Имя CSS-файла должно быть введено в атрибуте href:

Возникла какая-то проблема с отдельным элементом кода? Помни, что нужный объект ты можешь
выбрать по его идентификатору, добавив символ #
впереди, либо по классу, введя точку (.):

5

9

1

6

0

Изучаем программирование на примере Minecraft

ИЗОБРАЖЕНИЕ СЛИШКОМ БОЛЬШОЕ, СЛИШКОМ МАЛЕНЬКОЕ ИЛИ ЛИШЬ ЧАСТИЧНО ОТОБРАЖАЕТСЯ НА ЭКРАНЕ
Мониторы могут быть самых разных форм и размеров. Мы ориентировались на то, что у пользователя будет стандартный 24-дюймовый монитор
с разрешением 1920×1080 пикселей. Поэтому, если
какой-то рисунок отображается не так, как нужно, попробуй изменить его размеры в CSS-файле.
И нет проблем! Это никак не повлияет на исполнение кода, хотя тебе, возможно, придется настроить
размеры некоторых других элементов, чтобы они
лучше выглядели на странице, особенно если речь
идет об анимации.
РАБОТАЕТ ТОЛЬКО ЧАСТЬ КОДА
Код, приведенный в этой книге, проверялся в браузере Google Chrome (версия 65.0.3325.181). К несчастью, не все браузеры поддерживают язык
HTML5 полностью. В этом случае часть кода может
не исполняться при просмотре страницы в других
браузерах.
Если у тебя возникают трудности и при работе
в браузере Google Chrome, проверь, отключены ли
блокировщики всплывающих окон и сценариев.
Ты снова сможешь их активировать по окончании
работы.