Данный туториал поможет новичкам на основе примитивного проекта в C2 реализовать таблицу рекордов, которые будут сохраняться в базе данных MySQL, а 10 лучших результатов будут выводиться в конце нашего проекта.
Данный туториал выходит за тематические рамки нашего форума, поэтому читатели могут испытать некоторые сложности по ходу выполнения шагов, даже несмотря на то, что я старался учесть любую, даже самую малую деталь =) Однако все вопросы можете оставить здесь и любой момент я разъясню и найду ошибку, если таковая имеется
1. Подготовка к работе
Если в туториале про массивы не было ничего сложного и сверхъестественного, то организация игры с регистрацией и запоминанием лучших результатов потребует помимо хороших навыков в обращении с C2 еще и навыки работы с серьезными веб-сервисами, как-то: веб-хостинги, базы данных. Более того, потребуются некоторые знания и умения работы с «голым» PHP-языком программирования. Но не буду пугать слишком сильно, ибо для этого и пишется данный туториал: чтобы внести ясность в эту тему и научить желающих того людей работать с AJAX-объектом, серверным кодом и в целом улучшить ориентирование в данной теме.
Для начала нам потребуется некоторая подготовка, чтобы максимально упростить предстоящую нам работу. Не стоит пролистывать этот раздел, потому что он действительно очень важен!
Во-первых, нам потребуется регистрация у одного из веб-хостеров, а для этого нам будет нужен личный e-mail. Я сомневаюсь, что у тех, кто читает эту статью, нет электронного почтового ящика, поэтому, если Вы относитесь к таким людям, то откройте новую вкладку на сайте http://gmail.com и пройдите довольно простую регистрацию. А для остальных советую перейти к «во-вторых».
Во-вторых, нам потребуется простой редактор PHP-кода. Я просто обожаю Notepad++ и рекомендую его всем, кого знаю и кого не знаю. Поэтому быстренько переходим по ссылочке http://notepad-plus-plus.org/download/v6.3.html и клацаем по большой зеленой кнопке с хамелеоном (или выбираем первый пункт из предложенных):
Сохраняем, запускаем, выбираем «русский язык», везде жмем «далее», на последнем шаге оставляем все галки пустыми, хотя можно поставить галку на «Create Shortcut on Desktop», чтобы создать ярлык на рабочем столе:
Кстати, у меня стоит версия v5.9.6.2, так что если Вы скачали более новую версию, то у Вас что-то может отличаться (хотя и не очень сильно).
В-третьих, нам потребуется FTP файловый менеджер. Хотя, конечно, можно обойтись и без него, загружая файлы посредством веб-сервисов, но он значительно сокращает время загрузки и упрощает весь процесс. Я пользуюсь бесплатной программой FileZilla и буду показывать все на примере именно этого FTP-менеджера версии 3.6.0.2. Если Вы владеете знаниями по этой теме и имеете какие-либо свои предпочтения по выбору FTP-менеджера, можете использовать любой другой, суть от этого не изменится. Итак, переходим по ссылочке http://filezilla.ru/get/ и выбираем самую первую ссылку, после которой написано (рекомендуется):
Сохраняем, запускаем, везде соглашаемся (английские слова: Next, I Agree, Install) и устанавливаем.
В-четвертых, нам потребуется зарегистрировать свой личный сайт, на котором мы будем размещать нашу игру и .php файлы. Самым главным критерием выбора хостинга является поддержка выполнения сервером PHP-скриптов и поддержка работы с базами данных MySQL (нам достаточно 1 базы данных). Из бесплатных вариантов могу предложить иностранного хостера 000webhost.com. Из платных: экономичные варианты предлагает русский сервис: host-food.ru (от 12 руб/мес за хостинг). Сам я использую host-food – тариф Mini (24 руб/мес) и мне хватает, как говорится, «выше крыши». Однако, в туториале я буду показывать все на примере первого варианта (чтобы данный урок был полезен для всех). Поэтому быстренько переходим по ссылке: http://www.000webhost.com/order.php.
Видим примерно следующее:
Поле (А) пригодится, если у Вас уже есть зарегистрированный домен. Но если у Вас уже есть зарегистрированный домен, то, я думаю, весь этот шаг Вам не нужен, потому как скорее всего у Вас есть оплаченное место на хостинге, а значит можно легко использовать его, чем регистрировать много новых аккаунтов и сайтов.
Если своего домена у Вас нет, то удаляем из первого поля все, что было, и переходим к полю (B). Здесь мы должны вписать название своего будущего сайта (доменное имя). В моем случае будущий сайт будет доступен по ссылке: http://result-table.site90.net. (Если Вы заполнили первое поле с Вашим доменным именем, это поле заполнять не надо).
В поле (C),(D) и (E) идут стандартные для регистрации поля: Имя (или Логин), почтовый адрес и пароль с его подтверждением.
В поле (F) самая обычная каптча. Вводим написанные слова, ставим галку в поле (G) (соглашение с правилами – хорошо бы прочитать) и жмем (H).
Если все было заполнено правильно: домен свободен, логин не занят, почтовый адрес не используется в системе, пароли сложны и совпадают, каптча введена верно, стоит галка над соглашением, то Вас перекинет на страничку личного кабинета, где будет примерно следующее:
Ваш домен (мой, кстати, изменился с result-table.site90.net на result-table.comli.com, потому что я очень долго не нажимал кнопку регистрации), затем статус – в моем случае ожидание подтверждения почтового ящика и кнопка для повторного сообщения подтверждения e-mail. Проверяем почту, находим письмо, активируем аккаунт. Если не пришло письмо в течение 15 мин, проверяйте СПАМ-папку, настраивайте спам-фильтры и высылайте письмо заново (при помощи указанной кнопки).
Если все прошло удачно, и у Вас получилось активировать аккаунт, то его статус некоторое время будет Bulding…, а затем сменится на Active, а вместо кнопки повторного активационного письма будет кнопка [Go to CPanel]. Смело жмем на нее и перескакиваем в панель управления нашим сайтом. Да, кстати, теперь у Вас окончательно создался свой сайт, и информацию о нем можно увидеть в окошке справа:
Перейти на свой сайт можно, кликнув по ссылке (A). Кстати, этот сайт нам понадобится в следующем шаге (настройке FTP-менеджера). Еще нам понадобится наш Юзернэйм (B) - (обычно латинская буква + несколько цифр), пароль (C) – известен только Вам и название сервера (D).
Что ж, любознательные могут еще полазить по меню, посмотреть на разные функции и сервисы, но лучше ничего не трогать… до поры, до времени. А мы идем к следующему шагу… Это у нас, по-моему, уже «в-пятых».
В-пятых, нам надо настроить наш FTP-менеджер на наш новый сайт. Но сначала, нам надо задать пароль для FTP-доступа к нашему сайту. Крутим страничку вниз и в категории Files нажимаем на View FTP Details.
А в открывшемся окошке:
Нажимаем [Change account password]. Вводим новый пароль (запоминаем его!!!), повторяем его во втором поле и нажимаем на кнопку [Change].
Теперь все готово к настройке FTP-клиента, поэтому грузим нашу установленную ФайлЗиллу и в открывшемся окошке нажимаем Ctrl+S или Файл -> Менеджер Сайтов… Открывается примерно такое окошко:
В него надо занести данные из той таблички, что находится в правом верхнем углу странички панели управления сайтом. Итак, у меня уже есть созданный шаблон для моего сайта enterwork.ru, у Вас же там будет пусто. Нажимаем на кнопку Новый Сайт (A) и меняем название (B) на любое, какое нравится. Далее, в поле (C) записываем адрес хостинга (в табличке находится в поле Server Name и обозначен на прошлом скрине буквой D). Далее меняем список (D) на Учетная запись и в поле (E) вводим логин (тот, который состоит из латинской буквы и нескольких цифр…). В поле (G) надо указать пароль, который мы создавали в предыдущем шаге, а в поле (F) надо записать адрес Вашего сайта без http:// (т.е. то, что написано в первом поле нашей таблички с инфой). Теперь жмем [Соединиться] и смотрим, что происходит.
В самом верхнем окошке должен появиться список команд серверу (синий цвет шрифта) и ответов от него (зеленый). В конце концов, должна появиться строчка, извещающая нас о том, что «Список каталогов извлечен». Если этого не произошло, появились какие-то красные строчки (красный – цвет ошибок), то проверяйте введенные значения и пробуйте заново (вполне вероятно у Вас не обновился FTP-пароль, так что желательно его поменять и проследить за тем, чтобы нам написали, что он успешно установлен).
Итак, на данном этапе подготовка завершена и можно переходить к следующей части – созданию игры в C2.
Для начала нам потребуется некоторая подготовка, чтобы максимально упростить предстоящую нам работу. Не стоит пролистывать этот раздел, потому что он действительно очень важен!
Во-первых, нам потребуется регистрация у одного из веб-хостеров, а для этого нам будет нужен личный e-mail. Я сомневаюсь, что у тех, кто читает эту статью, нет электронного почтового ящика, поэтому, если Вы относитесь к таким людям, то откройте новую вкладку на сайте http://gmail.com и пройдите довольно простую регистрацию. А для остальных советую перейти к «во-вторых».
Во-вторых, нам потребуется простой редактор PHP-кода. Я просто обожаю Notepad++ и рекомендую его всем, кого знаю и кого не знаю. Поэтому быстренько переходим по ссылочке http://notepad-plus-plus.org/download/v6.3.html и клацаем по большой зеленой кнопке с хамелеоном (или выбираем первый пункт из предложенных):
Сохраняем, запускаем, выбираем «русский язык», везде жмем «далее», на последнем шаге оставляем все галки пустыми, хотя можно поставить галку на «Create Shortcut on Desktop», чтобы создать ярлык на рабочем столе:
Кстати, у меня стоит версия v5.9.6.2, так что если Вы скачали более новую версию, то у Вас что-то может отличаться (хотя и не очень сильно).
В-третьих, нам потребуется FTP файловый менеджер. Хотя, конечно, можно обойтись и без него, загружая файлы посредством веб-сервисов, но он значительно сокращает время загрузки и упрощает весь процесс. Я пользуюсь бесплатной программой FileZilla и буду показывать все на примере именно этого FTP-менеджера версии 3.6.0.2. Если Вы владеете знаниями по этой теме и имеете какие-либо свои предпочтения по выбору FTP-менеджера, можете использовать любой другой, суть от этого не изменится. Итак, переходим по ссылочке http://filezilla.ru/get/ и выбираем самую первую ссылку, после которой написано (рекомендуется):
Сохраняем, запускаем, везде соглашаемся (английские слова: Next, I Agree, Install) и устанавливаем.
В-четвертых, нам потребуется зарегистрировать свой личный сайт, на котором мы будем размещать нашу игру и .php файлы. Самым главным критерием выбора хостинга является поддержка выполнения сервером PHP-скриптов и поддержка работы с базами данных MySQL (нам достаточно 1 базы данных). Из бесплатных вариантов могу предложить иностранного хостера 000webhost.com. Из платных: экономичные варианты предлагает русский сервис: host-food.ru (от 12 руб/мес за хостинг). Сам я использую host-food – тариф Mini (24 руб/мес) и мне хватает, как говорится, «выше крыши». Однако, в туториале я буду показывать все на примере первого варианта (чтобы данный урок был полезен для всех). Поэтому быстренько переходим по ссылке: http://www.000webhost.com/order.php.
Видим примерно следующее:
Поле (А) пригодится, если у Вас уже есть зарегистрированный домен. Но если у Вас уже есть зарегистрированный домен, то, я думаю, весь этот шаг Вам не нужен, потому как скорее всего у Вас есть оплаченное место на хостинге, а значит можно легко использовать его, чем регистрировать много новых аккаунтов и сайтов.
Если своего домена у Вас нет, то удаляем из первого поля все, что было, и переходим к полю (B). Здесь мы должны вписать название своего будущего сайта (доменное имя). В моем случае будущий сайт будет доступен по ссылке: http://result-table.site90.net. (Если Вы заполнили первое поле с Вашим доменным именем, это поле заполнять не надо).
В поле (C),(D) и (E) идут стандартные для регистрации поля: Имя (или Логин), почтовый адрес и пароль с его подтверждением.
В поле (F) самая обычная каптча. Вводим написанные слова, ставим галку в поле (G) (соглашение с правилами – хорошо бы прочитать) и жмем (H).
Если все было заполнено правильно: домен свободен, логин не занят, почтовый адрес не используется в системе, пароли сложны и совпадают, каптча введена верно, стоит галка над соглашением, то Вас перекинет на страничку личного кабинета, где будет примерно следующее:
Ваш домен (мой, кстати, изменился с result-table.site90.net на result-table.comli.com, потому что я очень долго не нажимал кнопку регистрации), затем статус – в моем случае ожидание подтверждения почтового ящика и кнопка для повторного сообщения подтверждения e-mail. Проверяем почту, находим письмо, активируем аккаунт. Если не пришло письмо в течение 15 мин, проверяйте СПАМ-папку, настраивайте спам-фильтры и высылайте письмо заново (при помощи указанной кнопки).
Если все прошло удачно, и у Вас получилось активировать аккаунт, то его статус некоторое время будет Bulding…, а затем сменится на Active, а вместо кнопки повторного активационного письма будет кнопка [Go to CPanel]. Смело жмем на нее и перескакиваем в панель управления нашим сайтом. Да, кстати, теперь у Вас окончательно создался свой сайт, и информацию о нем можно увидеть в окошке справа:
Перейти на свой сайт можно, кликнув по ссылке (A). Кстати, этот сайт нам понадобится в следующем шаге (настройке FTP-менеджера). Еще нам понадобится наш Юзернэйм (B) - (обычно латинская буква + несколько цифр), пароль (C) – известен только Вам и название сервера (D).
Что ж, любознательные могут еще полазить по меню, посмотреть на разные функции и сервисы, но лучше ничего не трогать… до поры, до времени. А мы идем к следующему шагу… Это у нас, по-моему, уже «в-пятых».
В-пятых, нам надо настроить наш FTP-менеджер на наш новый сайт. Но сначала, нам надо задать пароль для FTP-доступа к нашему сайту. Крутим страничку вниз и в категории Files нажимаем на View FTP Details.
А в открывшемся окошке:
Нажимаем [Change account password]. Вводим новый пароль (запоминаем его!!!), повторяем его во втором поле и нажимаем на кнопку [Change].
Теперь все готово к настройке FTP-клиента, поэтому грузим нашу установленную ФайлЗиллу и в открывшемся окошке нажимаем Ctrl+S или Файл -> Менеджер Сайтов… Открывается примерно такое окошко:
В него надо занести данные из той таблички, что находится в правом верхнем углу странички панели управления сайтом. Итак, у меня уже есть созданный шаблон для моего сайта enterwork.ru, у Вас же там будет пусто. Нажимаем на кнопку Новый Сайт (A) и меняем название (B) на любое, какое нравится. Далее, в поле (C) записываем адрес хостинга (в табличке находится в поле Server Name и обозначен на прошлом скрине буквой D). Далее меняем список (D) на Учетная запись и в поле (E) вводим логин (тот, который состоит из латинской буквы и нескольких цифр…). В поле (G) надо указать пароль, который мы создавали в предыдущем шаге, а в поле (F) надо записать адрес Вашего сайта без http:// (т.е. то, что написано в первом поле нашей таблички с инфой). Теперь жмем [Соединиться] и смотрим, что происходит.
В самом верхнем окошке должен появиться список команд серверу (синий цвет шрифта) и ответов от него (зеленый). В конце концов, должна появиться строчка, извещающая нас о том, что «Список каталогов извлечен». Если этого не произошло, появились какие-то красные строчки (красный – цвет ошибок), то проверяйте введенные значения и пробуйте заново (вполне вероятно у Вас не обновился FTP-пароль, так что желательно его поменять и проследить за тем, чтобы нам написали, что он успешно установлен).
Итак, на данном этапе подготовка завершена и можно переходить к следующей части – созданию игры в C2.
2. Основные принципы работы
В первой части этого туториала мы занимались подготовкой, теперь же пришло время заняться непосредственно созданием игры. Но прежде, я хочу посветить читателя в суть работы системы, которую я предлагаю.
В целом, на выходе у нас на руках будут экспортированные в HTML5 файлы игры из Construct 2 и один файл.php. При запуске игры (доступной по адресу: адрес_сайта/index.html) игрок будет совершать какие-то действия, а по завершению игры, он должен будет ввести свое имя и нажать кнопку. По нажатию кнопки объект AJAX-пошлет POST-запрос на сервер к файлу.php, где запрос обработается следующим образом: достанется результат из базы данных из строчки, где имя совпадает с переданным из игры именем, он сравнится с переданным, и если переданный результат больше полученного из базы данных (БД), то в БД запишется новый результат, если же переданное значение меньше полученного из БД – ничего не будет записано в БД, ну а если такого имени существовать в БД не будет, то мы создадим новую запись в нашей таблице. После этой обработки, скрипт в файле.php вернет объекту AJAX-строчку вида: «Игрок1 - 100|Игрок2 - 50|Игрок3 – 10|» и т.д. А уже в игре мы обработаем эту строчку и выведем ее на экран в соответствующем таблице виде.
Вот примерная схема работы нашей системы:
1) Игрок нажимаем на кнопку «Опубликовать»
2) AJAX-объект отправляет данные скрипту на сервере
3) Скрипт делает запрос в БД
4) БД возвращает результат запроса
5) Скрипт возвращает сформированную строку результатов
6) Игра обрабатывает строку результатов и выдает игроку ее в виде таблицы
Схема может показаться несколько сложной, но на практике она таковой не является. Поэтому предлагаю уже начать наконец заниматься чем-то более полезным, чем разглагольствовать на заданную тему.
В целом, на выходе у нас на руках будут экспортированные в HTML5 файлы игры из Construct 2 и один файл.php. При запуске игры (доступной по адресу: адрес_сайта/index.html) игрок будет совершать какие-то действия, а по завершению игры, он должен будет ввести свое имя и нажать кнопку. По нажатию кнопки объект AJAX-пошлет POST-запрос на сервер к файлу.php, где запрос обработается следующим образом: достанется результат из базы данных из строчки, где имя совпадает с переданным из игры именем, он сравнится с переданным, и если переданный результат больше полученного из базы данных (БД), то в БД запишется новый результат, если же переданное значение меньше полученного из БД – ничего не будет записано в БД, ну а если такого имени существовать в БД не будет, то мы создадим новую запись в нашей таблице. После этой обработки, скрипт в файле.php вернет объекту AJAX-строчку вида: «Игрок1 - 100|Игрок2 - 50|Игрок3 – 10|» и т.д. А уже в игре мы обработаем эту строчку и выведем ее на экран в соответствующем таблице виде.
Вот примерная схема работы нашей системы:
1) Игрок нажимаем на кнопку «Опубликовать»
2) AJAX-объект отправляет данные скрипту на сервере
3) Скрипт делает запрос в БД
4) БД возвращает результат запроса
5) Скрипт возвращает сформированную строку результатов
6) Игра обрабатывает строку результатов и выдает игроку ее в виде таблицы
Схема может показаться несколько сложной, но на практике она таковой не является. Поэтому предлагаю уже начать наконец заниматься чем-то более полезным, чем разглагольствовать на заданную тему.
3. Создаем игру в C2
В основе нашей системы лежит соревновательный фактор, поэтому нам требуется придумать такую игру, где игрок должен набрать как можно больше очков по сравнению с другими. Это могут быть какие-либо гонки, тогда лучшим будет игрок с наименьшим временем. Это могут быть игры наподобие Doodle Jump, Subway Surfers и прочие игры, где требуется как можно дольше осуществлять какие-либо однотипные действия. Ну и наконец это могут быть игры, где на ГГ нападают враги (допустим, зомби) и их нужно отстреливать, пока они не съели ГГ. С каждой секундой их становится все больше и в конце концов они все-таки съедают ГГ, а в результат записывается время жизни ГГ.
В связи с тем, что цель туториала не сделать игру с самым крутым геймплеем, а научить Вас внедрять онлайн таблицу результатов в свою игру, я предлагаю сделать простейшую игру на скорость реакции. Суть будет заключаться в том, чтобы правильно нажимать на стрелки, которые будут показываться на экране. Ошибка – проигрыш и вызов окна публикации результата.
Открываем C2, создаем новый проект, добавляем объект Sprite и рисуем или загружаем спрайт стрелки, закрываем графический редактор и сразу же меняем название спрайта на Arrow. Кстати, тут же, не отходя от кассы, меняем размер уровня на 640х480.
Добавляем также объект Keyboard и объект Text. Объект текст растягиваем во всю ширину уровня и можно сделать шрифт пожирнее и разместить текст по центру, относительно краев объекта. Назовем наш текст просто: Timer.
Еще нам понадобится шкала времени на каждый ход, для нее добавляем объект TiledBackground и заливаем его зеленым цветом и размещаем как на скрине:
Теперь идем в редактор событий и пишем следующее:
Во-первых, добавляем глобальную переменную Timer с начальным значением -4. Эта переменная будет считать прошедшее время. Далее добавляем еще одну переменную Score, она будет считать кол-во правильных нажатий.
Каждые 100 мс добавляем по 0.1 к таймеру. Если таймер меньше 0 (т.е. первые 4 секунды), показываем в тексте надпись «Ждите N секунд», где N – значение переменной Timer, округленное до ближайшего целого снизу. Исходная формула: "Ждите " & floor(-Timer) & " секунд".
Если таймер больше нуля (т.е. игра уже началась), то показываем текст: «Ваш счет: N», где N – количество правильных нажатий. Исходная формула: "Ваш счет: " & Score.
Далее идут под-события к событию Таймер > 0. Если высота нашего индикатора меньше нуля (помните, его высота была -400), то мы постепенно уменьшаем, вернее, увеличиваем ее (+ в формуле привязка ко времени: чем больше времени прошло – тем быстрее уменьшаем видимую высоту индикатора). Формула: self.Height+1+Timer/4. А дальше идет сканирование нажатия клавиш относительно угла нашей стрелки, и при верном нажатии мы возвращаем высоту индикатора, меняем положение стрелки (случайно) и добавляем 1 к переменной счета.
Идем в редактор уровня и добавляем еще несколько объектов. Для начала, добавляем новый слой поверх старого и ставим его изначальную видимость на «Невидим».
На новый слой добавляем объект TextBox и кнопку (можно новым спрайтом, можно кнопкой). В объекте TextBox можно в поле Placeholder написать «Login».
Теперь идем в редактор событий:
Я добавил событие Start of layout, и поместил в него действие изменения CSS-стиля объекта TextBox, чтобы текст размещался посередине. Далее, действие изменение текста объекта Timer я перенес в событие ВысотаИндикатора < 0, потому к этому событию было добавлено событие Else, где уничтожается стрелка, высота становится равной 0, меняется текст (Формула: "Поздравляю!" & newline & "Ваш счет: " & Score) и становится видимым второй слой.
В принципе, болванка игры уже готова, но я, пожалуй, добавлю еще несколько событий, которые приведут к концу игры при неверном нажатии клавиши:
Для этого нам придется немного поменять структуру проверки нажатий, и создать событие с OR блоком (ПКМ по событию -> Add Or block). Суть такова: если нажата верная клавиша, то через 0.1 сек (чтобы это нажатие не проверилось сразу же в последующих событиях) выполняется функция возобновления индикатора, рандомизации стрелки и прибавления единицы. Если же нажата одна из трех других клавиш, то высота индиктора = 0, а значит - игра окончена. По скриншоту не сложно догадаться, как выглядят остальные события проверки, поэтому не буду тратить на это время.
Итак, теперь приступаем к объекту AJAX. Для начала добавим его на уровень. Затем в редакторе событий пишем действие запроса при клике по кнопке:
Если мы нажали на кнопку, верхний слой показывется, а в текстбоксе что-то есть, то осуществляется запрос объектом AJAX к нашему скрипту (который мы напишем чуть позже), который лежит по адресу: http://result-table.comli.com/script.php в моем случае (в Вашем только изменится адрес сайта, а script.php останется).
Запрос также имеет свой уникальный тэг «post», который может быть любым числом или словом (чисто, чтобы нам ориентироваться между запросами в коде). К тому же с запросом передаются некоторые значения: имя и результат. Записываются они в виде "name=имя&score=счет". В нашем случае исходная формула выглядит так: "name=" & TextBox.Text & "&score=" & score.
Теперь, давайте вспомним, в каком виде сервер должен будет вернуть результат: «Игрок1 - 100|Игрок2 - 50|Игрок3 - 10|». Как мы видим, сервер нам уже разделил по парам имена игроков и их результаты. Более того, он их уже отсортировал в порядке убывания. Нам лишь остается записать эту строчку в соответствующем виде.
Если посмотреть на выражение: replace(Text, Find, Replace), то даже без объяснений понятно, что это выражение заменяет в исходном тексте один отрезок текста на другой. В нашем случае надо будет заменить “|” на newline. Поэтому смело пишем:
Если запрос успешно выполнен, то высота текста становится равной 480px, а сам текст меняется на (исходная формула): "ТОП-10 лучших:" & newline & newline & replace(AJAX.LastData, "|", newline).
Если же произошла ошибка, пишем об этом в тексте.
На этом я хочу закончить с игровой частью, ибо эта часть является самой простой из всего туториала, и задерживаться слишком долго на ней нет смысла. Хотя, конечно, можно добавить кнопку «Играть еще раз» и еще несколько фич, но пусть это останется домашним заданием Вам, дорогие читатели.
В связи с тем, что цель туториала не сделать игру с самым крутым геймплеем, а научить Вас внедрять онлайн таблицу результатов в свою игру, я предлагаю сделать простейшую игру на скорость реакции. Суть будет заключаться в том, чтобы правильно нажимать на стрелки, которые будут показываться на экране. Ошибка – проигрыш и вызов окна публикации результата.
Открываем C2, создаем новый проект, добавляем объект Sprite и рисуем или загружаем спрайт стрелки, закрываем графический редактор и сразу же меняем название спрайта на Arrow. Кстати, тут же, не отходя от кассы, меняем размер уровня на 640х480.
Добавляем также объект Keyboard и объект Text. Объект текст растягиваем во всю ширину уровня и можно сделать шрифт пожирнее и разместить текст по центру, относительно краев объекта. Назовем наш текст просто: Timer.
Еще нам понадобится шкала времени на каждый ход, для нее добавляем объект TiledBackground и заливаем его зеленым цветом и размещаем как на скрине:
Теперь идем в редактор событий и пишем следующее:
Во-первых, добавляем глобальную переменную Timer с начальным значением -4. Эта переменная будет считать прошедшее время. Далее добавляем еще одну переменную Score, она будет считать кол-во правильных нажатий.
Каждые 100 мс добавляем по 0.1 к таймеру. Если таймер меньше 0 (т.е. первые 4 секунды), показываем в тексте надпись «Ждите N секунд», где N – значение переменной Timer, округленное до ближайшего целого снизу. Исходная формула: "Ждите " & floor(-Timer) & " секунд".
Если таймер больше нуля (т.е. игра уже началась), то показываем текст: «Ваш счет: N», где N – количество правильных нажатий. Исходная формула: "Ваш счет: " & Score.
Далее идут под-события к событию Таймер > 0. Если высота нашего индикатора меньше нуля (помните, его высота была -400), то мы постепенно уменьшаем, вернее, увеличиваем ее (+ в формуле привязка ко времени: чем больше времени прошло – тем быстрее уменьшаем видимую высоту индикатора). Формула: self.Height+1+Timer/4. А дальше идет сканирование нажатия клавиш относительно угла нашей стрелки, и при верном нажатии мы возвращаем высоту индикатора, меняем положение стрелки (случайно) и добавляем 1 к переменной счета.
Идем в редактор уровня и добавляем еще несколько объектов. Для начала, добавляем новый слой поверх старого и ставим его изначальную видимость на «Невидим».
На новый слой добавляем объект TextBox и кнопку (можно новым спрайтом, можно кнопкой). В объекте TextBox можно в поле Placeholder написать «Login».
Теперь идем в редактор событий:
Я добавил событие Start of layout, и поместил в него действие изменения CSS-стиля объекта TextBox, чтобы текст размещался посередине. Далее, действие изменение текста объекта Timer я перенес в событие ВысотаИндикатора < 0, потому к этому событию было добавлено событие Else, где уничтожается стрелка, высота становится равной 0, меняется текст (Формула: "Поздравляю!" & newline & "Ваш счет: " & Score) и становится видимым второй слой.
В принципе, болванка игры уже готова, но я, пожалуй, добавлю еще несколько событий, которые приведут к концу игры при неверном нажатии клавиши:
Для этого нам придется немного поменять структуру проверки нажатий, и создать событие с OR блоком (ПКМ по событию -> Add Or block). Суть такова: если нажата верная клавиша, то через 0.1 сек (чтобы это нажатие не проверилось сразу же в последующих событиях) выполняется функция возобновления индикатора, рандомизации стрелки и прибавления единицы. Если же нажата одна из трех других клавиш, то высота индиктора = 0, а значит - игра окончена. По скриншоту не сложно догадаться, как выглядят остальные события проверки, поэтому не буду тратить на это время.
Итак, теперь приступаем к объекту AJAX. Для начала добавим его на уровень. Затем в редакторе событий пишем действие запроса при клике по кнопке:
Если мы нажали на кнопку, верхний слой показывется, а в текстбоксе что-то есть, то осуществляется запрос объектом AJAX к нашему скрипту (который мы напишем чуть позже), который лежит по адресу: http://result-table.comli.com/script.php в моем случае (в Вашем только изменится адрес сайта, а script.php останется).
Запрос также имеет свой уникальный тэг «post», который может быть любым числом или словом (чисто, чтобы нам ориентироваться между запросами в коде). К тому же с запросом передаются некоторые значения: имя и результат. Записываются они в виде "name=имя&score=счет". В нашем случае исходная формула выглядит так: "name=" & TextBox.Text & "&score=" & score.
Теперь, давайте вспомним, в каком виде сервер должен будет вернуть результат: «Игрок1 - 100|Игрок2 - 50|Игрок3 - 10|». Как мы видим, сервер нам уже разделил по парам имена игроков и их результаты. Более того, он их уже отсортировал в порядке убывания. Нам лишь остается записать эту строчку в соответствующем виде.
Если посмотреть на выражение: replace(Text, Find, Replace), то даже без объяснений понятно, что это выражение заменяет в исходном тексте один отрезок текста на другой. В нашем случае надо будет заменить “|” на newline. Поэтому смело пишем:
Если запрос успешно выполнен, то высота текста становится равной 480px, а сам текст меняется на (исходная формула): "ТОП-10 лучших:" & newline & newline & replace(AJAX.LastData, "|", newline).
Если же произошла ошибка, пишем об этом в тексте.
На этом я хочу закончить с игровой частью, ибо эта часть является самой простой из всего туториала, и задерживаться слишком долго на ней нет смысла. Хотя, конечно, можно добавить кнопку «Играть еще раз» и еще несколько фич, но пусть это останется домашним заданием Вам, дорогие читатели.
4. Создание и настройка базы данных MySQL
Итак, для того, чтобы каждый раз выводить топ лучших десяти игроков, нам потребуется где-то хранить данные для каждого игрока, чтобы потом выбирать десяток лучших. Более того, эти данные должны храниться где-то в интернете, чтобы в любой момент любой игрок мог получить эти данные. По идее, можно хранить текстовый файл у нас на сайте, где будут лежать файлы игры и файл скрипта, но хранить данные в файле не надежно. К тому же, работа с файлами на сервере требует довольно много времени, так что если одновременно будут совершены сразу два запроса, то один из них не обработается. Поэтому я предлагаю использовать базу данных MySQL, которая поддерживается в выбранном нами хостинге и представляет из себя набор таблиц, в каждой из которой можно хранить данные. Работа с базами данных MySQL осуществляется напрямую через PHP-код и имеет множество преимуществ над способом хранения результатов в файле. В том числе скорость запросов к базе данных в разы больше, чем скорость обращения к файлам.
Поэтому, не задерживаясь долго на разъяснениях, переходим по ссылке: http://members.000webhost.com/login.php, вводим свой почтовый адрес, пароль и каптчу и входим в панель управления нашим сайтом.
Прежде чем начать работу с базой данных, ее нужно создать. Ищем вкладку Software/Services и выбираем кнопку [MySQL].
На открывшейся страничке придумываем название базы данных, имя пользователя и пароль:
Нажимаем кнопку Create database и видим следующее:
Эти 4 строчки (свой пароль я естественно не покажу) копируем и сохраняем куда-нибудь в файл (в блокноте можно сохранить либо сразу в Notepad++). Они нам еще понадобятся во время написания скрипта, а пока мы продолжаем настраивать базу данных.
Нажимаем на кнопку [Back to Control Panel] и ищем иконку phpMyAdmin в том же разделе, в котором мы только что добавляли БД.
Клацаем по ней и перемещаемся на страничку с выбором нужной базы данных. Поскольку мы создали только одну (бесплатная версия хостинга поддерживает только одну БД), то нажимаем на кнопку [Enter phpMyAdmin] (пароль менять в показанных полях не надо).
Перемещаемся в основной инструмент по работе с Базами Данных MySQL – phpMyAdmin. Вы должны увидеть примерно следующую картинку (если войти не удалось проверяйте предыдущие шаги):
Сейчас в нашей базе данных нету ни одной таблицы, поэтому нам надо создать одну. Назовем ее result_table, а количество полей зададим равным 2 (одно под имя, второе – под результат). Нажимаем [Go], и нас перебрасывает на страничку настройки полей таблицы. Заполняем только первые 3, как показано на скриншоте:
Остальные нас пока не волнуют. Первое поле мы назвали name, тип данных – VARCHAR, т.е. текстовое, а длина – 32 (придется в исходнике игры поставить также ограничение на 32 символа в имени). Второе поле называется score, хранит в себе числовой тип данных и его длина – 5. После того, как ввели эти значения нажимаем [Save].
В итоге должна получиться такая табличка:
Если что-то не так, то можно поменять значения, нажав на зеленый карандашик.
Итак, на этом настройка Базы Данных для нашей игры закончена, а это значит, что мы можем перейти к самой трудной части туториала – написанию скрипта по обработке данных на сервере.
Поэтому, не задерживаясь долго на разъяснениях, переходим по ссылке: http://members.000webhost.com/login.php, вводим свой почтовый адрес, пароль и каптчу и входим в панель управления нашим сайтом.
Прежде чем начать работу с базой данных, ее нужно создать. Ищем вкладку Software/Services и выбираем кнопку [MySQL].
На открывшейся страничке придумываем название базы данных, имя пользователя и пароль:
Нажимаем кнопку Create database и видим следующее:
Эти 4 строчки (свой пароль я естественно не покажу) копируем и сохраняем куда-нибудь в файл (в блокноте можно сохранить либо сразу в Notepad++). Они нам еще понадобятся во время написания скрипта, а пока мы продолжаем настраивать базу данных.
Нажимаем на кнопку [Back to Control Panel] и ищем иконку phpMyAdmin в том же разделе, в котором мы только что добавляли БД.
Клацаем по ней и перемещаемся на страничку с выбором нужной базы данных. Поскольку мы создали только одну (бесплатная версия хостинга поддерживает только одну БД), то нажимаем на кнопку [Enter phpMyAdmin] (пароль менять в показанных полях не надо).
Перемещаемся в основной инструмент по работе с Базами Данных MySQL – phpMyAdmin. Вы должны увидеть примерно следующую картинку (если войти не удалось проверяйте предыдущие шаги):
Сейчас в нашей базе данных нету ни одной таблицы, поэтому нам надо создать одну. Назовем ее result_table, а количество полей зададим равным 2 (одно под имя, второе – под результат). Нажимаем [Go], и нас перебрасывает на страничку настройки полей таблицы. Заполняем только первые 3, как показано на скриншоте:
Остальные нас пока не волнуют. Первое поле мы назвали name, тип данных – VARCHAR, т.е. текстовое, а длина – 32 (придется в исходнике игры поставить также ограничение на 32 символа в имени). Второе поле называется score, хранит в себе числовой тип данных и его длина – 5. После того, как ввели эти значения нажимаем [Save].
В итоге должна получиться такая табличка:
Если что-то не так, то можно поменять значения, нажав на зеленый карандашик.
Итак, на этом настройка Базы Данных для нашей игры закончена, а это значит, что мы можем перейти к самой трудной части туториала – написанию скрипта по обработке данных на сервере.
5. Создание скрипта для данных на сервере
Писать скрипт для сервера мы будем на PHP-языке в редакторе NotePad++. Но сначала нам требуется познакомиться с синтаксисом этого языка программирования. Отталкиваться мы будем от того, что мы должны получить в итоге. В нашей игре AJAX-объект вернет содержимое странички, на которую посылается запрос, после обработки отправленных данных. Поэтому в нашем файле скрипта не будет присутствовать никаких HTML-тэгов. Итак, объяснять лучше на примере, поэтому открываем наш NotePad++ и создаем новый файл (Ctrl + N или Файл -> Новый). Поскольку мы будем писать код на PHP-языке, то нам надо выбрать этот синтаксис в редакторе. Нажимаем Синтаксис -> P -> PHP:
Теперь я предлагаю сохраниться, поэтому жмем Ctrl + Alt + S (или Файл -> Сохранить как…) и сохраняем под именем: script.php
Итак, поскольку наша страничка будет лежать на сайте, то на нее можно зайти, а это в свою очередь значит, что на ней могут располагаться html-тэги. Эти html-тэги будут обрабатываться браузером и преобразовываться в уже привычные нам странички. Но нам надо внедрить PHP-код в нашу страничку. Этот код будет читаться на сервере, выводить нужные значения (в html-формате), а сам в итоге присутствовать на странице не будет.
Для того, чтобы внедрить PHP-код надо задать его границы. Делается это следующим образом:
Как мы можем видеть, php-страничка представляет из себя обычную html-страничку, только с добавлением php-кода, который обработается на сервере. PHP-код может находиться в любом месте странички: до, внутри, после… Открывается php-контейнер тэгом: <?php, а закрывается - ?>
«Умный» NotePad++ подсвечивает границы php-кода красным цветом, что, на самом деле, очень удобно.
Однако, представленный выше тип странички нам не подойдет, потому что нам не нужны все эти html-тэги, ведь именно их вернет AJAX-объект после запроса на сервер. Поэтому удаляем все лишнее и оставляем только php-код. (Кстати, в PHP-языке для написания комментариев используется двойной слэш “//”, а комментарии в NotePad++ подсвечиваются зеленым цветом).
Теперь немного поговорим о синтаксисе самого PHP.
Во-первых, нам потребуются переменные. Они задаются латинскими буквами со знаком доллара (“$”) в начале каждой. Знак операции присвоения – одинарное “=”. Допустим, положим в переменную под названием “test_value” значение “521”:
Кстати, PHP автоматически определяет тип данных переменной, поэтому я в данном случае даже не парюсь по этому поводу.
А теперь давайте выведем это значение на страничку:
В итоге, написанный выше код в браузере будет выглядеть вот так:
Кстати, при запуске этого файла с компьютера у Вас будет отображен весь код. Это связано с тем, что у Вас на компьютере (скорее всего) не стоит Apache, который умеет понимать PHP-код и выполнять роль сервера на компьютере.
Теперь, надеюсь, Вы поняли, что означали те строчки, которые мы копировали при настройке БД. Давайте добавим их вместо нашей переменной:
Кстати, для записи числовых значений мы пишем знак присваивания (“=”) и число, а для записи строковых значений используем двойные или одинарные кавычки (не имеет значения какие, но двойные закрываются двойными, а одинарные – одинарными). Пароль свой я не покажу, у Вас есть свой.
Итак, теперь, для того, чтобы записать, например, логин для доступа к БД, не надо каждый раз печатать a8132496_Ilyko96, достаточно использовать переменную $mysql_user.
Что ж, теперь нам надо точно также записать в переменные $name и $score передаваемые AJAX-объектом значения. Для доступа к передаваемым значениям используется следующая переменная: $_POST[‘название_передаваемой_переменной’]. То есть, по сути $_POST – это ассоциативный массив, в котором в ячейке с названием – название_переменной лежит значение, передаваемое методом POST. (Любознательные могут погуглить на тему POST и GET запросов.)
Итак, по идее мы должны написать следующее:
(Я буду писать попутно комментарии в самом скрипте, чтобы Вам потом было проще разобраться)
Вроде бы все должно работать, но давайте подумаем, что произойдет, если страничку загрузят без передачи значений name и score. Чтобы исключить этот вариант, мы поставим проверку на наличие этих переменных.
То есть, по сути, мы проверяем «не равно ли значение передаваемых переменных пустоте», и если не равно, то присваиваем переменным name и score эти значения. (оператор “!=” эквивалентен выражению «не равно»). Но эта запись немного не корректна. Правильнее будет использовать выражение isset(), которое проверяет, была ли переменная задана, и в случае, если была – возвращает правду, иначе – ложь.
Итак, я предлагаю попробовать загрузить наш файл на сервер и посмотреть, что нам будет выведено на страничку, но сначала напишем еще пару строк кода:
Мы добавили еще одну проверку на наличие чего-либо в переменных name и score, и если там что-то есть (оператор “&&” – логическое «И», т.е. если задана переменная name «И» задана переменная score…), то мы выведем через тире переданное имя и счет. (В PHP для соединения строковых значений используется точка).
В противном же случае (оператор “else”) мы выведем соответствующую надпись.
Теперь нам надо загрузить этот файл на сервер. Для этого откроем наш уже настроенный FileZilla и нажмем на кнопку как показано на скриншоте:
В случае, если все было настроено и сохранено правильно, в верхнем пустом окошке мы увидим уже знакомые запросы на сервер и последнюю строчку: «Список каталогов извлечен»
Обратим наше внимание на правое окошко:
Мы видим папку public_html и еще 2 файла. Не трогая файлы, нажимаем дважды ЛКМ по папке и перемещаемся в корневую директорию нашего сайта.
Видим 2 файла: .htaccess и default.php. Не трогаем их и в левом окошке открываем папку, где лежит (сохранен) наш файл script.php. Однако я обычно открываю проводник, зажимаю ЛКМ файл, а затем перетаскиваю в пустое окошко нашего FTP-менеджера – как раз туда, куда мы должны были его добавить. Ждем пару секунд и вуаля: наш файл лежит на сервере. Теперь он доступен по адресу: http://result-table.comli.com/script.php, а В вашем случае домен будет другой, а файл тот же…
Если мы теперь перейдем по нашей ссылке, то нам будет показана следующая строчка:
Т.е. наш скрипт работает правильно. Теперь давайте запустим наш проект в C2 и попытаемся отправить нашему скрипту данные (просто проиграем в игру, впишем любые буквы и нажмем «Опубликовать»):
Вот какой получился результат. Предугадать все нельзя, просчитать все очень сложно. Так что давайте исправлять ошибки в нашем исходнике:
Итак, мы поставили триггер в событие проверки окончания игры, чтобы потом можно было сменить текст на «ТОП-10», а также сделали невидимым верхний слой (с полями для ввода данных) после обработки AJAX-объектом полученный от сервера результат.
Если мы теперь запустим проект, то нам покажется надпись о том, что произошла ошибка при выполнении запроса к БД. Все правильно, так и должно быть. Это связано с тем, что браузеры блокируют кроссдоменные запросы, т.е. когда html-файл лежит на одном домене, а php-файл, к которому обращаются, - на другом. Чтобы это исправить, надо либо экспортировать игру в HTML5 и «залить» на сервер к скрипту, либо разрешить браузеру обрабатывать кроссдоменные запросы.
Делается это одной строчкой в PHP-коде:
Сохраняем изменения (Ctrl + S или Файл -> Сохранить) и повторяем процесс загрузки скрипта на сервер (с перезаписью).
После проделанной работы вновь запускаем исходник игры, проигрываем, вбиваем любое имя и смотрим, что вернул нам сервер:
Уже лучше. По крайней мере, есть то, что и должно быть. Но, помимо этого, мы получили еще и html-код какого-то счетчика. Поскольку хостинг бесплатный, то на каждую его страничку автоматически добавляется этот код, а AJAX-объект получает содержимое странички вместе с этим кодом. Идем в редактор событий и меняем код с учетом новых строк:
Строчку, где мы меняли знак “|” на переход строки обрамляем выражением tokenat(), которое разделяет строку по разделителю и возвращает N-ую часть от разделенной строки. Исходная форумла:
В итоге мы получим следующее:
Это как раз то, что надо! Как мы можем видеть, сервер определил наличие переданных значений name и score и вернул их в соответствующем виде – через тире.
Теперь давайте разберемся с нашей Базой Данных. Для начала нам надо подключиться к нашей БД. Для этого мы присвоим некоей переменной идентификатор подключения, чтобы в дальнейшем работать с ним. Делается это следующим образом:
Мы совершаем подключение к нашему аккаунту в MySQL при помощи наших введенных переменных, а в случае ошибки выводим сообщение об ошибке. После подключения в переменную link записывается идентификатор подключения, который мы используем дальше для выбора Базы Данных:
Этой командой мы выбираем Базу Данных по идентификатору подключения link. Теперь, если загрузить с перезаписью (мы будем много раз обновлять скрипт на сервере, так что я об этом могу забывать говорить – это подразумевается ситуацией), то мы должны увидеть надпись о том, что никаких значений не получено (т.е. никаких ошибок быть не должно!!! Если ошибки все же есть – проверяйте введенные данные, правильность введенного пароля и т.д.)
Теперь давайте попробуем вывести какое-либо значение из нашей БД. Но на данный момент она пуста, поэтому идем в нашу панель управления (если дисконектнуло – входим под своим логин/паролем), выбираем phpMyAdmin -> Enter phpMyAdmin.
Выбираем нашу таблицу в левой колонке, а затем клацаем по вкладке SQL:
И печатаем запрос на добавление одной строки:
Текст запроса такой:
Если ошибок в запросе нет, то сверху появится ответ:
Теперь, если мы нажмем вкладку [Browse] (там же где мы нажимали SQL), то мы увидим, что у нас теперь есть одна строчка, где в поле name лежит Ilyko96, а в поле score – 15 (те значения, которые мы ввели в запросе).
Что ж, теперь наша таблица не пуста и можно попробовать вывести эти значения при помощи нашего скрипта.
Вот такой блок кода я добавил, теперь попробую пояснить что к чему.
Во-первых, мы создаем запрос к нашей таблице для выбора той строки, в которой поле name равняется Ilyko96 (Это строчка 15 на скриншоте). В переменную $q1 записывается идентификатор этого запроса, чтобы в дальнейшем обработать результат.
Исходное выражение:
Во-вторых, мы проверяем кол-во полученных результатов (строчка №16). Для этого используется выражение mysql_num_rows(), которое возвращает кол-во выбранных строк. Если это кол-во численно равно 1 (оператор приравнивания в PHP-коде – “==” – двойное равно), то мы задаем ассоциативный массив (строка №17) (кстати, про массивы, чтобы понимать о чем речь, можно прочитать в моем туториале про массивы), где названия ключей – это названия полей, а значения – значения полей.
В-третьих, в строке №18 мы выводим значения полей name и score (обращаемся уже к обычному массиву), причем выводим через тире (опять же точка “.” – соединительный оператор строковых значений) и добавляем еще html-тэг “<br>”, чтобы перескочить на другую строку.
Загружаем на сервер и обновляем страничку в браузере:
Как видите, все работает просто замечательно: значения были успешно получены из БД, а вторая часть скрипта определила отсутствие передаваемых значений! Но это не конечная наша цель. Теперь давайте соорудим систему условий по проверке наличия передаваемого AJAX-объектом имени:
Итак, мы соединили блок проверки переданных данных и блок по работе с таблицами БД. В итоге схема получилась примерно следующая: Если мы получили значения от AJAX-объекта, то выбираем строчку, в которой name равен переданному от игры имени, если же количество таких строчек равно 1, то мы разделяем результат запроса в массив и выводим в формате: имя – результат, если же таких значений 0 или больше 1, то мы выводим сообщение о том, что такого пользователя нет.
Структура нашей таблицы построена таким образом, что двух одинаковых имен быть не может, поэтому единственно возможный случай, если кол-во строк НЕ РАВНО 1, это 0, а это значит, что такого пользователя еще нет.
Прошу обратить внимание на фигурные скобки! Это очень важный момент, который очень часто является причиной многочисленных ошибок!!!
И еще один момент: я не буду дублировать куски кода сюда, в целях экономии места (очень длинно получается), весь этот код показан на скриншотах и будет доступен в конце урока в отдельном файле script.php
Итак, если мы теперь загрузим скрипт на сервер, запустим наш проект и проиграем там, то при вводе имени Ilyko96 мы получим ожидаемый результат:
Как видно C2 отобразил еще и тэг <br>, который мы вставляли для того, чтобы разделить строчки вывода двух разных блоков кода.
Если же мы введем любое другое имя, то C2 выведет нам абракадабру:
Эта ошибка возникла из-за различия кодировок. Насколько я помню, C2 кодирует в UTF-8, а наш NotePad++ - в ANSI. Хотя, может быть, Вы уже выбрали другую кодировку, но я напишу как это сделать. Для «безболезненной» смены кодировки в нашем редакторе выбираем Кодировки -> Преобразовать в UTF-8:
Если теперь обновить на сервере скрипт и повторить вышеописанные действия, то все будет в порядке:
С кодировками разобрались. Теперь напишем код, для добавления новой строчки при условии, что такое имя еще не использовалось:
Вместо вывода сообщения о том, что такой строчки нет, мы создаем запрос к БД о записи в таблицу строчки с полями name и score, и кладем в них переданные AJAX-объектом значения (Текст запроса идентичен тому, что мы вводили в БД во вкладке SQL, за исключением того, что здесь мы создаем строку не со статичными значениями полей, а с переменными).
Загружаем, сохраняем, запускаем проект, проигрываем и вводим какое-нибудь другое имя, допустим, Test. Пока все работает правильно – идем в phpMyAdmin, чтобы проверить добавилась ли строка:
Все прекрасно работает! Но суть нашей таблицы рекордов в том, чтобы запоминать наилучший результат! Да и вообще выводить не только твой результат, а десяток лучших. Поэтому теперь поработаем в сторону «улучшения результата при более высоком переданном значинии».
Проверяем, больше ли полученное значение, чем записанное в БД, и если это так, то обновляем в строке, где поле name равно переданному значению имени, поле score со старого на полученное от AJAX-объекта. Вывод результата в этом месте делать пока не будем, потому что сейчас мы займемся тем, чтобы написать код по передаче сразу 10 лучших результатов. (Я предполагаю, что Вы сами догадались загрузить скрипт и проверить его действие в phpMyAdmin: действительно ли он обновляет значения или нет!)
Во-первых, я убрал выражение echo из последнего случая, где мы добавляем строку в таблицу. Соответственно, поскольку выражений после else стало 1 (перед этим было 2: запрос и echo), то можно убрать лишние фигурные скобки, чтобы не нагромождать код, что я собственно и сделал! (Голубая рамка).
Во-вторых, мы добавляем новый запрос, но, внимание, после закрывающей фигурной скобки проверки наличия передаваемых AJAX-объектом значений, т.е. после всего этого большого блока!!! Запрос несколько отличается от предыдущих. Мы выбираем все строки из таблицы result_table и сортируем их по полю score в порядке убывания (о последнем параметре говорит выражение DESC).
Ну а дальше простой скрипт, где в цикле while перебираются все (в нашем случае пары) комплекты полей для каждой строки, пока, собственно, они не закончатся. Далее в цикле стоит проверка переменной $i, которая выступает в роли счетчика, отсчитывающего 10 строк, после чего идет вывод сначала значения 0ого поля (имя), затем тире “-“, а затем значение 1ого поля (результат).
Вот результат работы нашего скрипта. Все работает на удивление правильно!
Кстати, если загрузить в браузере нашу страничку со скриптом, то можно увидеть те значения, которые передает наш скрипт. А если еще и поменять разделитель “|” на “<br>” (в C2 соответственно тоже поменять в выражении replace соответствующие параметры) , то на страничке в браузере эти строки будут располагаться друг под другом, т.е. можно будет смотреть таблицу результатов не только со страницы игры, но и со страницы скрипта.
Нам осталось сделать самый последний шаг: экспорт нашей игры к нам на сервер. Те, кто прочитал эту статью, в принципе, могут и сами догадаться, что нам надо сделать, но я все же поясню:
Во-первых, надо поменять название проекта, добавить имя создателя и в целом произвести настройки нашего проекта. Это делается в редакторе уровня в панели: Properties при помощи кнопки [View]:
Заполняем первые 3 поля, остальные можно и не трогать, хотя, если Вы знаете, за что они отвечают, то можете настроить под себя:
Теперь все готово к экспорту, поэтому смело жмем [Export project] в Ribbon-панели – вкладка [Home]:
В открывшемся окне выбираем самый первый пункт: HTML5 website:
Далее выбираем путь сохранения экспортированной игры, остальные параметры можно оставить в их изначальном положении:
Произойдет не слишком долгий процесс создания файлов игры, после чего появится окошко, где нам предложат перейти в папку с проектом, либо продолжить работу в C2. Теперь осталось сделать последнее: перенести наши файлы на сервер. Открываем FileZilla, подключаемся к нашему сайту, заходим в папку public_html.
И теперь, либо открываем в левом окошке расположение экспортированного проекта, либо сразу из проводника перетаскиваем в правое окошко ВСЕ экспортированные файлы и ждем, пока они туда загрузятся!
В итоге должен получиться следующий список файлов:
Теперь просто заходим на наш сайт (без всяких скриптов и прочего) и у нас запускается наша игра. Рекорды все сохранились (они ведь лежат в БД, а ее мы не трогали), и все условия выполняются правильно!
На этой прекрасной ноте, когда все работает превосходно, я и хочу закончить этот урок. Надеюсь у Вас, дорогие читатели, все получилось, и Вы все поняли. А если нет, то я всегда здесь: могу ответить на любые вопросы и помочь в любой (касательно C2 и этого туториала) проблеме!
Огромное спасибо за проявленное внимание и за то, что дочитали этот во многом сложный туториал до конца!!!
Удачи в игрострое!
Теперь я предлагаю сохраниться, поэтому жмем Ctrl + Alt + S (или Файл -> Сохранить как…) и сохраняем под именем: script.php
Итак, поскольку наша страничка будет лежать на сайте, то на нее можно зайти, а это в свою очередь значит, что на ней могут располагаться html-тэги. Эти html-тэги будут обрабатываться браузером и преобразовываться в уже привычные нам странички. Но нам надо внедрить PHP-код в нашу страничку. Этот код будет читаться на сервере, выводить нужные значения (в html-формате), а сам в итоге присутствовать на странице не будет.
Для того, чтобы внедрить PHP-код надо задать его границы. Делается это следующим образом:
Как мы можем видеть, php-страничка представляет из себя обычную html-страничку, только с добавлением php-кода, который обработается на сервере. PHP-код может находиться в любом месте странички: до, внутри, после… Открывается php-контейнер тэгом: <?php, а закрывается - ?>
«Умный» NotePad++ подсвечивает границы php-кода красным цветом, что, на самом деле, очень удобно.
Однако, представленный выше тип странички нам не подойдет, потому что нам не нужны все эти html-тэги, ведь именно их вернет AJAX-объект после запроса на сервер. Поэтому удаляем все лишнее и оставляем только php-код. (Кстати, в PHP-языке для написания комментариев используется двойной слэш “//”, а комментарии в NotePad++ подсвечиваются зеленым цветом).
Теперь немного поговорим о синтаксисе самого PHP.
Во-первых, нам потребуются переменные. Они задаются латинскими буквами со знаком доллара (“$”) в начале каждой. Знак операции присвоения – одинарное “=”. Допустим, положим в переменную под названием “test_value” значение “521”:
Кстати, PHP автоматически определяет тип данных переменной, поэтому я в данном случае даже не парюсь по этому поводу.
А теперь давайте выведем это значение на страничку:
В итоге, написанный выше код в браузере будет выглядеть вот так:
Кстати, при запуске этого файла с компьютера у Вас будет отображен весь код. Это связано с тем, что у Вас на компьютере (скорее всего) не стоит Apache, который умеет понимать PHP-код и выполнять роль сервера на компьютере.
Теперь, надеюсь, Вы поняли, что означали те строчки, которые мы копировали при настройке БД. Давайте добавим их вместо нашей переменной:
Кстати, для записи числовых значений мы пишем знак присваивания (“=”) и число, а для записи строковых значений используем двойные или одинарные кавычки (не имеет значения какие, но двойные закрываются двойными, а одинарные – одинарными). Пароль свой я не покажу, у Вас есть свой.
Итак, теперь, для того, чтобы записать, например, логин для доступа к БД, не надо каждый раз печатать a8132496_Ilyko96, достаточно использовать переменную $mysql_user.
Что ж, теперь нам надо точно также записать в переменные $name и $score передаваемые AJAX-объектом значения. Для доступа к передаваемым значениям используется следующая переменная: $_POST[‘название_передаваемой_переменной’]. То есть, по сути $_POST – это ассоциативный массив, в котором в ячейке с названием – название_переменной лежит значение, передаваемое методом POST. (Любознательные могут погуглить на тему POST и GET запросов.)
Итак, по идее мы должны написать следующее:
(Я буду писать попутно комментарии в самом скрипте, чтобы Вам потом было проще разобраться)
Вроде бы все должно работать, но давайте подумаем, что произойдет, если страничку загрузят без передачи значений name и score. Чтобы исключить этот вариант, мы поставим проверку на наличие этих переменных.
То есть, по сути, мы проверяем «не равно ли значение передаваемых переменных пустоте», и если не равно, то присваиваем переменным name и score эти значения. (оператор “!=” эквивалентен выражению «не равно»). Но эта запись немного не корректна. Правильнее будет использовать выражение isset(), которое проверяет, была ли переменная задана, и в случае, если была – возвращает правду, иначе – ложь.
Итак, я предлагаю попробовать загрузить наш файл на сервер и посмотреть, что нам будет выведено на страничку, но сначала напишем еще пару строк кода:
Мы добавили еще одну проверку на наличие чего-либо в переменных name и score, и если там что-то есть (оператор “&&” – логическое «И», т.е. если задана переменная name «И» задана переменная score…), то мы выведем через тире переданное имя и счет. (В PHP для соединения строковых значений используется точка).
В противном же случае (оператор “else”) мы выведем соответствующую надпись.
Теперь нам надо загрузить этот файл на сервер. Для этого откроем наш уже настроенный FileZilla и нажмем на кнопку как показано на скриншоте:
В случае, если все было настроено и сохранено правильно, в верхнем пустом окошке мы увидим уже знакомые запросы на сервер и последнюю строчку: «Список каталогов извлечен»
Обратим наше внимание на правое окошко:
Мы видим папку public_html и еще 2 файла. Не трогая файлы, нажимаем дважды ЛКМ по папке и перемещаемся в корневую директорию нашего сайта.
Видим 2 файла: .htaccess и default.php. Не трогаем их и в левом окошке открываем папку, где лежит (сохранен) наш файл script.php. Однако я обычно открываю проводник, зажимаю ЛКМ файл, а затем перетаскиваю в пустое окошко нашего FTP-менеджера – как раз туда, куда мы должны были его добавить. Ждем пару секунд и вуаля: наш файл лежит на сервере. Теперь он доступен по адресу: http://result-table.comli.com/script.php, а В вашем случае домен будет другой, а файл тот же…
Если мы теперь перейдем по нашей ссылке, то нам будет показана следующая строчка:
Т.е. наш скрипт работает правильно. Теперь давайте запустим наш проект в C2 и попытаемся отправить нашему скрипту данные (просто проиграем в игру, впишем любые буквы и нажмем «Опубликовать»):
Вот какой получился результат. Предугадать все нельзя, просчитать все очень сложно. Так что давайте исправлять ошибки в нашем исходнике:
Итак, мы поставили триггер в событие проверки окончания игры, чтобы потом можно было сменить текст на «ТОП-10», а также сделали невидимым верхний слой (с полями для ввода данных) после обработки AJAX-объектом полученный от сервера результат.
Если мы теперь запустим проект, то нам покажется надпись о том, что произошла ошибка при выполнении запроса к БД. Все правильно, так и должно быть. Это связано с тем, что браузеры блокируют кроссдоменные запросы, т.е. когда html-файл лежит на одном домене, а php-файл, к которому обращаются, - на другом. Чтобы это исправить, надо либо экспортировать игру в HTML5 и «залить» на сервер к скрипту, либо разрешить браузеру обрабатывать кроссдоменные запросы.
Делается это одной строчкой в PHP-коде:
Сохраняем изменения (Ctrl + S или Файл -> Сохранить) и повторяем процесс загрузки скрипта на сервер (с перезаписью).
После проделанной работы вновь запускаем исходник игры, проигрываем, вбиваем любое имя и смотрим, что вернул нам сервер:
Уже лучше. По крайней мере, есть то, что и должно быть. Но, помимо этого, мы получили еще и html-код какого-то счетчика. Поскольку хостинг бесплатный, то на каждую его страничку автоматически добавляется этот код, а AJAX-объект получает содержимое странички вместе с этим кодом. Идем в редактор событий и меняем код с учетом новых строк:
Строчку, где мы меняли знак “|” на переход строки обрамляем выражением tokenat(), которое разделяет строку по разделителю и возвращает N-ую часть от разделенной строки. Исходная форумла:
- Код: Выделить всё
"ТОП-10 лучших:" & newline & newline & tokenat(replace(AJAX.LastData, "|", newline), 0, "<!-- Hosting24 Analytics Code -->")
В итоге мы получим следующее:
Это как раз то, что надо! Как мы можем видеть, сервер определил наличие переданных значений name и score и вернул их в соответствующем виде – через тире.
Теперь давайте разберемся с нашей Базой Данных. Для начала нам надо подключиться к нашей БД. Для этого мы присвоим некоей переменной идентификатор подключения, чтобы в дальнейшем работать с ним. Делается это следующим образом:
Мы совершаем подключение к нашему аккаунту в MySQL при помощи наших введенных переменных, а в случае ошибки выводим сообщение об ошибке. После подключения в переменную link записывается идентификатор подключения, который мы используем дальше для выбора Базы Данных:
Этой командой мы выбираем Базу Данных по идентификатору подключения link. Теперь, если загрузить с перезаписью (мы будем много раз обновлять скрипт на сервере, так что я об этом могу забывать говорить – это подразумевается ситуацией), то мы должны увидеть надпись о том, что никаких значений не получено (т.е. никаких ошибок быть не должно!!! Если ошибки все же есть – проверяйте введенные данные, правильность введенного пароля и т.д.)
Теперь давайте попробуем вывести какое-либо значение из нашей БД. Но на данный момент она пуста, поэтому идем в нашу панель управления (если дисконектнуло – входим под своим логин/паролем), выбираем phpMyAdmin -> Enter phpMyAdmin.
Выбираем нашу таблицу в левой колонке, а затем клацаем по вкладке SQL:
И печатаем запрос на добавление одной строки:
Текст запроса такой:
- Код: Выделить всё
INSERT INTO `result_table`(`name`, `score`) VALUES ('Ilyko96', '15')
Если ошибок в запросе нет, то сверху появится ответ:
Теперь, если мы нажмем вкладку [Browse] (там же где мы нажимали SQL), то мы увидим, что у нас теперь есть одна строчка, где в поле name лежит Ilyko96, а в поле score – 15 (те значения, которые мы ввели в запросе).
Что ж, теперь наша таблица не пуста и можно попробовать вывести эти значения при помощи нашего скрипта.
Вот такой блок кода я добавил, теперь попробую пояснить что к чему.
Во-первых, мы создаем запрос к нашей таблице для выбора той строки, в которой поле name равняется Ilyko96 (Это строчка 15 на скриншоте). В переменную $q1 записывается идентификатор этого запроса, чтобы в дальнейшем обработать результат.
Исходное выражение:
- Код: Выделить всё
$q1 = mysql_query("SELECT * FROM `result_table` WHERE `name`='Ilyko96'");
Во-вторых, мы проверяем кол-во полученных результатов (строчка №16). Для этого используется выражение mysql_num_rows(), которое возвращает кол-во выбранных строк. Если это кол-во численно равно 1 (оператор приравнивания в PHP-коде – “==” – двойное равно), то мы задаем ассоциативный массив (строка №17) (кстати, про массивы, чтобы понимать о чем речь, можно прочитать в моем туториале про массивы), где названия ключей – это названия полей, а значения – значения полей.
В-третьих, в строке №18 мы выводим значения полей name и score (обращаемся уже к обычному массиву), причем выводим через тире (опять же точка “.” – соединительный оператор строковых значений) и добавляем еще html-тэг “<br>”, чтобы перескочить на другую строку.
Загружаем на сервер и обновляем страничку в браузере:
Как видите, все работает просто замечательно: значения были успешно получены из БД, а вторая часть скрипта определила отсутствие передаваемых значений! Но это не конечная наша цель. Теперь давайте соорудим систему условий по проверке наличия передаваемого AJAX-объектом имени:
Итак, мы соединили блок проверки переданных данных и блок по работе с таблицами БД. В итоге схема получилась примерно следующая: Если мы получили значения от AJAX-объекта, то выбираем строчку, в которой name равен переданному от игры имени, если же количество таких строчек равно 1, то мы разделяем результат запроса в массив и выводим в формате: имя – результат, если же таких значений 0 или больше 1, то мы выводим сообщение о том, что такого пользователя нет.
Структура нашей таблицы построена таким образом, что двух одинаковых имен быть не может, поэтому единственно возможный случай, если кол-во строк НЕ РАВНО 1, это 0, а это значит, что такого пользователя еще нет.
Прошу обратить внимание на фигурные скобки! Это очень важный момент, который очень часто является причиной многочисленных ошибок!!!
И еще один момент: я не буду дублировать куски кода сюда, в целях экономии места (очень длинно получается), весь этот код показан на скриншотах и будет доступен в конце урока в отдельном файле script.php
Итак, если мы теперь загрузим скрипт на сервер, запустим наш проект и проиграем там, то при вводе имени Ilyko96 мы получим ожидаемый результат:
Как видно C2 отобразил еще и тэг <br>, который мы вставляли для того, чтобы разделить строчки вывода двух разных блоков кода.
Если же мы введем любое другое имя, то C2 выведет нам абракадабру:
Эта ошибка возникла из-за различия кодировок. Насколько я помню, C2 кодирует в UTF-8, а наш NotePad++ - в ANSI. Хотя, может быть, Вы уже выбрали другую кодировку, но я напишу как это сделать. Для «безболезненной» смены кодировки в нашем редакторе выбираем Кодировки -> Преобразовать в UTF-8:
Если теперь обновить на сервере скрипт и повторить вышеописанные действия, то все будет в порядке:
С кодировками разобрались. Теперь напишем код, для добавления новой строчки при условии, что такое имя еще не использовалось:
Вместо вывода сообщения о том, что такой строчки нет, мы создаем запрос к БД о записи в таблицу строчки с полями name и score, и кладем в них переданные AJAX-объектом значения (Текст запроса идентичен тому, что мы вводили в БД во вкладке SQL, за исключением того, что здесь мы создаем строку не со статичными значениями полей, а с переменными).
Загружаем, сохраняем, запускаем проект, проигрываем и вводим какое-нибудь другое имя, допустим, Test. Пока все работает правильно – идем в phpMyAdmin, чтобы проверить добавилась ли строка:
Все прекрасно работает! Но суть нашей таблицы рекордов в том, чтобы запоминать наилучший результат! Да и вообще выводить не только твой результат, а десяток лучших. Поэтому теперь поработаем в сторону «улучшения результата при более высоком переданном значинии».
Проверяем, больше ли полученное значение, чем записанное в БД, и если это так, то обновляем в строке, где поле name равно переданному значению имени, поле score со старого на полученное от AJAX-объекта. Вывод результата в этом месте делать пока не будем, потому что сейчас мы займемся тем, чтобы написать код по передаче сразу 10 лучших результатов. (Я предполагаю, что Вы сами догадались загрузить скрипт и проверить его действие в phpMyAdmin: действительно ли он обновляет значения или нет!)
Во-первых, я убрал выражение echo из последнего случая, где мы добавляем строку в таблицу. Соответственно, поскольку выражений после else стало 1 (перед этим было 2: запрос и echo), то можно убрать лишние фигурные скобки, чтобы не нагромождать код, что я собственно и сделал! (Голубая рамка).
Во-вторых, мы добавляем новый запрос, но, внимание, после закрывающей фигурной скобки проверки наличия передаваемых AJAX-объектом значений, т.е. после всего этого большого блока!!! Запрос несколько отличается от предыдущих. Мы выбираем все строки из таблицы result_table и сортируем их по полю score в порядке убывания (о последнем параметре говорит выражение DESC).
Ну а дальше простой скрипт, где в цикле while перебираются все (в нашем случае пары) комплекты полей для каждой строки, пока, собственно, они не закончатся. Далее в цикле стоит проверка переменной $i, которая выступает в роли счетчика, отсчитывающего 10 строк, после чего идет вывод сначала значения 0ого поля (имя), затем тире “-“, а затем значение 1ого поля (результат).
Вот результат работы нашего скрипта. Все работает на удивление правильно!
Кстати, если загрузить в браузере нашу страничку со скриптом, то можно увидеть те значения, которые передает наш скрипт. А если еще и поменять разделитель “|” на “<br>” (в C2 соответственно тоже поменять в выражении replace соответствующие параметры) , то на страничке в браузере эти строки будут располагаться друг под другом, т.е. можно будет смотреть таблицу результатов не только со страницы игры, но и со страницы скрипта.
Нам осталось сделать самый последний шаг: экспорт нашей игры к нам на сервер. Те, кто прочитал эту статью, в принципе, могут и сами догадаться, что нам надо сделать, но я все же поясню:
Во-первых, надо поменять название проекта, добавить имя создателя и в целом произвести настройки нашего проекта. Это делается в редакторе уровня в панели: Properties при помощи кнопки [View]:
Заполняем первые 3 поля, остальные можно и не трогать, хотя, если Вы знаете, за что они отвечают, то можете настроить под себя:
Теперь все готово к экспорту, поэтому смело жмем [Export project] в Ribbon-панели – вкладка [Home]:
В открывшемся окне выбираем самый первый пункт: HTML5 website:
Далее выбираем путь сохранения экспортированной игры, остальные параметры можно оставить в их изначальном положении:
Произойдет не слишком долгий процесс создания файлов игры, после чего появится окошко, где нам предложат перейти в папку с проектом, либо продолжить работу в C2. Теперь осталось сделать последнее: перенести наши файлы на сервер. Открываем FileZilla, подключаемся к нашему сайту, заходим в папку public_html.
И теперь, либо открываем в левом окошке расположение экспортированного проекта, либо сразу из проводника перетаскиваем в правое окошко ВСЕ экспортированные файлы и ждем, пока они туда загрузятся!
В итоге должен получиться следующий список файлов:
Теперь просто заходим на наш сайт (без всяких скриптов и прочего) и у нас запускается наша игра. Рекорды все сохранились (они ведь лежат в БД, а ее мы не трогали), и все условия выполняются правильно!
На этой прекрасной ноте, когда все работает превосходно, я и хочу закончить этот урок. Надеюсь у Вас, дорогие читатели, все получилось, и Вы все поняли. А если нет, то я всегда здесь: могу ответить на любые вопросы и помочь в любой (касательно C2 и этого туториала) проблеме!
Огромное спасибо за проявленное внимание и за то, что дочитали этот во многом сложный туториал до конца!!!
Удачи в игрострое!
Пробуем результат многочасовых мучений
Качаем исходные файлы
Онлайн_таблица_рекордов.zip- (16.95 КБ) Скачиваний: 1689
- Архив: 1) C2 - r123.2 Исходник примитивной игры; 2) script.php - исходник серверного скрипта
Друзья, огромное спасибо за Ваше внимание, я надеюсь все моменты этого урока были понятны и абсолютно все получилось! Если что-то не понятно или возникают какие-то проблемы (ошибки выскакивают или не получается зарегистрироваться), обращайтесь, я почти всегда здесь!
Поддержи проект!