Программирование. Азы. Урок 1⁠⁠

Добрый день. Хочу представить Вам курс по пониманию азов программирования. Учиться программированию мы с Вами будем на Javascipt. Но не просто Javascipt, который в силу не знания html и css, будет даваться с трудом, а графический фреймворк Phaser.

Для обучения Вам необходим любой браузер, но я бы порекомендовал бы Chrome (т.к. все уроки я буду демонстрировать в нем) и любой текстовый редактор (Sublime Text 3 подойдет без проблем).

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

http://pyatilistnik.info/kak-ustanovit-denver-denwer-v-windo...

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

http://dssbox.[ орг тчк ]ua/download.php?file=0c364fff3be57fa4e00259f1ce8d6c87

В хроме открываем core.html или index.html через локальный сервер и видим результат:

На скриншоте включена консоль разработчика (для этого используйте клавишу F12 под Windows, а если у вас Mac, то Cmd+Opt+J.), постепенно я научу Вас ей пользоваться.

Как видите на страничке у нас выделенная черная область, а в ней летает печенюшка :)

Выделенная черная область - это полотно в области которого мы можем рисовать или выводить изображения. В эту область была загружена и выведена картинка. На следующей картинке представлен файл core.js.

Давайте же познакомимся с первым кодом который мы смогли выполнить и увидеть результат.

В каждом языке программирования есть переменные и функции. В нашей программе есть две переменных: Game и test. Переменные по своей сути - это область в памяти которая хранить какие-либо данные. В строке под номером 1 создается переменная с именем Game:

var Game = null;

Все переменные в языке программирования Javascipt создаются с использованием ключевого слова “var”. Ключевое слово - это слово зарезервированное языком программирования и его использовать как имя переменной или имя функции нельзя. На скриншоте исходного кода, все зарезервированные слова пишутся фиолетовым цветом. После создания переменной обращаться к ней нужно без использования слова “var”. В первой строке мы создали переменную, в 4, 8, 12 мы обращаемся к данной переменной без добавления “var”. Чтобы изменить значение переменной используется оператор присваивания “=”. Простой символ “=” заменить значения переменной. “null” - это просто ноль, очищает область в памяти. Хороший стиль программирования - когда каждая новая переменная будет обнулена принудительно. Были на моей практике случаи, когда писал под мобильные девайсы на С++, что иОС обнуляет переменные, Андроид частично обнуляет, частично - нет.

Функции используются для объединения логических участков кода. В нашем примере три функции:

document_loaded - выполняется когда страница в браузере загрузилась.

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

create - функция с которой мы и начинаем все наши действия :)

function document_loaded(){

...

}

function - зарезервированное слово, говорит о том, что дальше программист будет описывать функцию. “document_loaded” - имя функции. Программист может сам придумывать любые имена функциям, кроме зарезервированных слов. Пустые круглые скобки говорят о том, что функция не принимает никаких данных. Далее идут фигурные скобки - между открывающейся и закрывающейся фигурными скобками помещается необходимый код (по сути часть программы).

Это если вкратце в теории, а теперь посмотрим на все как оно выглядит на практике.

В первой строке мы создали переменную и придумали ей имя Game. Т.к. эта переменная в данной строке создается нами, то мы перед ней пишем ключевое слово “var” и обнуляем ее, присвоив null.

В третьей строке мы сообщаем, что хотели бы создать функцию с именем “document_loaded” и без параметров (пустые круглые скобки). После этого открываем фигурную скобку и переходим в четвертую строку.

В четвертой строке уже созданной переменной присваивается объект игровой сцены

Phaser’а. Вас не должно смущать то, что и наша переменная и имя функции в Phaser имеет одинаковое имя Game, этот прием демонстрирует, что одинаковые имена переменных и функций могут встречать в разных классах.

Все что Вам необходимо знать на данный момент в 4-ой строке, это то, что 800 и 600 - размеры в пикселях рабочей области (черная область).

( 7 - 9 строки)

function preload() {

Game.load.image('bayan', 'images/pechenka.png');

}

В данных строках мы говорим, что хотим создать функцию с именем preload и которая не будет принимать параметры. Game.load.image - загружает картинку из папки 'images' с именем 'pechenka.png' и дает внутреннее имя данной картинке 'bayan'.

В 11 строке создаем функцию с именем “create”, которая не будет принимать никаких параметров. В данной функцие в строе 12 создаем новую переменную “test” в которую помещаем ссылку на прорисованную картинку. Картинка, которая была до этого загружена в 8 строке, добавляется на сцену следующим кодом: Game.add.sprite, где первые два параметра это координаты х и у, а третий параметр - внутрисистемное имя картинки. Т.к. переменная “test” создается впервые, то перед ней пишем ключевое слово “var”.

В Javascipt есть глобальные и локальные переменные. Переменная “Game” является глобальной, т.к. мы ее описали не внутри какой-либо функции, а вне этого. Поэтому получить данные из этой переменной мы сможем в любом месте программы. С другой стороны, переменная “test” описана внутри функции “create” и к ней можно обращаться (брать значение) только между фигурными скобками внутри которых она создана, т.е. между 11 и 13 строками.

Чтобы можно было двигать изображение, необходимо переменную в которую помещаем картинку, сделать не локальной, а глобальной:

Попробуйте сами найти изменения в коде и понять почему так произошло.

Если посмотреть на картинку справа в нижнем углу есть запись test.x = 0 и test.x = Game.width / 2. Это консоль в хроме с помощью нее можно изменять некоторые свойства у переменных. В данных примерах в начале для печеньки координата х присваивается 0, потом присваивается половина от ширины поля. Если вы попробуете то же самое у себя сделать, то в начале печенька как бы прилипнет к левому краю, а потом переместиться на позицию как на картинке. Кроме x есть также вторая координата y. Попробуйте поиграться с этими двумя координатами, задав в начале позицию (0,0), потом центр экрана и максимальные width и height области. Определите от какой точки идет позиционирование рисунка. Разберитесь как и куда смотрят оси координат, при этом x и y могут быть отрицательными числами тоже.