Онлайн таблица рекордов

Сообщение Онлайн таблица рекордов
» 28 мар 2013, 14:55

Друзья! Многие из Вас, наверняка, уже попробовали в действии плагин Scirra Arcade, который позволяет добавлять в игры такую функцию, как сохранение лучших результатов игроков для тех игр, которые публикуются на сайте http://www.scirra.com/arcade А как быть, если мы хотим добавить таблицу рекордов в игры, которые не будут публиковаться на Scirra Arcade?

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

Данный туториал выходит за тематические рамки нашего форума, поэтому читатели могут испытать некоторые сложности по ходу выполнения шагов, даже несмотря на то, что я старался учесть любую, даже самую малую деталь =) Однако все вопросы можете оставить здесь и любой момент я разъясню и найду ошибку, если таковая имеется :good2:







 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.









 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) Игра обрабатывает строку результатов и выдает игроку ее в виде таблицы

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









 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).

Если же произошла ошибка, пишем об этом в тексте.

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









 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].

В итоге должна получиться такая табличка:

Изображение

Если что-то не так, то можно поменять значения, нажав на зеленый карандашик.

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









 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-ую часть от разделенной строки. Исходная форумла:

Код: Выделить всё
"ТОП-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 КБ) Скачиваний: 1296
Архив: 1) C2 - r123.2 Исходник примитивной игры; 2) script.php - исходник серверного скрипта



Друзья, огромное спасибо за Ваше внимание, я надеюсь все моменты этого урока были понятны и абсолютно все получилось! Если что-то не понятно или возникают какие-то проблемы (ошибки выскакивают или не получается зарегистрироваться), обращайтесь, я почти всегда здесь! :good2:
Аватара пользователя

Игродел
Сообщений: 405
Я тут с 08 янв 2013, 17:46
Откуда: Мск