Публикация iFrame / HTML5 игры во ВКонтакте. Основы
Сразу давайте обозначимся: тема API ВК тут рассматриваться не будет, ее я затрону в будущих материалах, так как она довольно обширна и представляет хорошие возможности. В этой статье будет самая основная часть: написание игры и публикация ее в социальной сети, как запускаемое приложение.
Что потребуется для работы:
— Текстовый редактор (на ваш вкус)
— Любой браузер, поддерживающий HTML5
— Немного свободного времени
Часть 1. Игра на HTML
Думал, что можно использовать в качестве примера, пусть это будет та же игра, что и в видеоуроке про «Две шкатулки».
Суть ее проста: перед пользователем есть две шкатулки, кликом по любой из них либо прибавляется, либо отнимается значение «score».
Вся игра изнутри выглядит так: 
И ее файлы с комментариями:
onload=«startGame(Menu, 30)» означает, что игра будет запущена с игрового состояния Menu с частотой кадров в 30.
Код игры был написан мной давно на движке j2Ds.
Часть 2. Google Drive
После написания игры, ее отладки, тестирования, встает вопрос, о том, где же разместить игру. Основное правило ВКонтакте: игра должна быть размещена на внешнем ресурсе, и доступ к ней должен осуществляться с SSL (https://).
Бесплатных хостингов, дающих такую возможность, я не нашел. Но есть «Google Диск», который умеет воспроизводить пользовательские JS/HTML файлы. Здорово! Даже если ваша игра и задействует сервер, вы можете воспользоваться AJAX мостом к нему, настроив сервер и приложение должным образом, чтобы они могли нормально взаимодействовать. Из приложения вы можете коннектиться к любым серверам даже по простому http, внутрь iFrame ВК не лезет. Но клиент игры обязан быть доступен только через «https://»
Идем на ГД:
Вы можете создать тут любое количество папок и файлов, это не имеет никакого значения, главное — создайте папку, где будет храниться игра.
Если вы посмотрите на первый скриншот, со структурой файлов игры, то поймете, что нужно перенести все файлы в диск. Для этого есть специальная функция загрузки всей папки:
После откроется диалог выбора, я выбрал папку www (в которой лежит index.html) просто загрузил ее на сервер:
Как не сложно заметить, структура файлов такая же.
Следующее, что нужно сделать — это дать доступ папке, в которой лежит index.html.
В моем случае index.html находится в папке www, поэтому выходим на уровень назад и выделяем папку www и жмем на пиктограмму открытия доступа:
Включаем доступ по ссылке (вверху справа) и копируем ссылку для общего доступа:
Этим мы открыли доступ к нашей игре всем, кто загестрирован на google. В любом сервисе. Чтобы снять и это ограничение, переходим на вкладку «расширенные», и там активируем доступ для просмотра всем в интернете:
Теперь эту ссылку вставьте в любой текстовый редактор, будем ее модифицировать:
Ссылка выглядит так:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing
Теперь жирным я выделю то, что нам нужно, остальное можно удалить:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing
Удалив все НЕжирное, получим ссылку вида:
https://0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Дописываем после https:// путь к googledrive.com/host и получаем ссылку вида:
https://googledrive.com/host/0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Скопировав ссылку в браузер, откроется ваша игра. Откроется как обычная интернет страница в интернете, но по безопасному соединению.
Не теряйте модифицированную ссылку, она нам пригодится.
После того, как вы научились открывать вашу игру через Googledrive в браузере, переходим на сайт ВКонтакте в раздел приложения:
На этой странице скроллим в самый низ и выбираем «Разработчикам», откроется страница для девелоперов:
Тут жмем «Создать приложение» и заполняем вашими данными форму:
После заполнения ВК отправит вам смс для подтверждения, введя код подтверждения (бесплатный) вас перебросит в панель управления вашими приложениями. Там будет много разной информации, вы можете походить по вкладкам, по-нажимать, по-проверять:
Теперь важный момент: приложение пока доступно для запуска только вам, как создателю, другие его не видят. Чтобы оно стало видимым для всех нужно в графе «Состояние» выбрать соответствующий пункт.
Обратим внимание на строки для ввода iFrame адреса. Тут два поля. Первое поле — адрес http, второе — https. Лучше оба заполнить в формате https, так надежнее. Ту ссылку, что мы получили путем нехитрых модификаций вставляем в адрес и сохраняем данные. После сохранения данных, можно пробовать запустить игру:
Теперь, открывая пункт «Управление приложением» вы можете манипулировать вашей игрой, смотреть статистику и т.д.
Управлять же файлами самой игры можно просто: редактируете, их, к примеру, на локальной машине, и, как только все изменения отлажены, заменяете файлы на гугл диске в нужной папке. Повторно выставлять права и доступ не нужно, так как выставлены они для всей папки, ссылки менять тоже не нужно.
Пример получившегося приложения могу дать в ЛС.
На этом у меня всё. Работа с VK API уже есть и доступна в виде видеоуроков, которые тут публиковать не буду. Ранее за публикацию видео аккаунт был заблокирован.
HTML iframe: пример и особенности применения
Понятие и назначение «iframe»
Фреймы показали себя не с самой лучшей стороны, когда стандарт HTML предлагал вариант frame. Ситуация не намного стала лучше с появлением iframe. Браузеры и владельцы сайтов не слишком охотно соглашаются на отображение сторонней информации посредством таких элементов.
Вам будет интересно: Joomla или WordPress: что лучше, обзор, особенности, отзывы
Однако, есть достаточное количество применений, когда и разработчик веб-ресурса (или документа), и разработчик-потребитель этого ресурса в своем изделии заинтересованы друг в друге. Например, карты Google или видео с Youtube. Существуют и другие востребованные идеи: прогноз погоды, динамика курсов биржи, показания приборов, статистические данные.
Вам будет интересно: Устраняем ошибку Failed to initialize Battleye во всех играх
HTML «iframe»: пример условий для применения
Далеко не каждый сайт может быть отображен в iframe. Прежде чем планировать на своем сайте использование фрейма, разработчик должен согласовать это с владельцем веб-ресурса или документа, которые он собирается отобразить на своем сайте в том или ином виде. Например, видео с Youtube можно включить в тег фрейма, как показано ниже (была нажата правая кнопка мышки на видео сайта разработчика).
Рекурсия и фреймы: практический пример
Сомнительно, что iframe ожидает лучшая судьба чем frame. Развитие парсинга и актуальность информации, собранной по критериям, делают призрачными перспективы идеи отображения чужого контента в формате «как есть». Становится предпочтительнее формат «как надо».
Однако, сегодня идеально (и в порядке вещей) применять наработки Google и Youtube, а также погодных, политических, статистических, музыкальных, игровых и других ресурсов, рассчитанных на фреймовое или иное стороннее использование.
В примере выше есть три HTML «iframe» примера:
Код для «iframe» и стиль для этого примера показан ниже.
Фрейм не только статичен. Его контент отделен от контента страницы, на которой он размещен. Можно придумать способы обмена информацией между фактически различными ресурсами, но это из серии задач обмена информацией между различными доменами.
Далеко не каждый сайт согласен и далеко не каждый контент доступен. Вопрос не только в авторских правах. Повлиять на возможность отображения информации во фрейме может браузер, посетитель, разработчик ресурса или сервер, на котором этот ресурс размещен.
Собственный парсинг или сторонний контент
Что такое фреймы с точки зрения контента сайта? Это его дополнение. Разработчик делает веб-площадку для торговли титульными знаками Webmoney, и его решение разместить окошко с динамикой курсов валют разумно. Контент непосредственно от самой биржи перспективнее нежели парсинг и собственная разработка.
В любом случае, применение тега iframe есть, и оно востребовано в значительном спектре практических задач.
Что такое iframe
Мощный, но легкий в использовании
Сходства и различия и
Основное различие между и заключается в том, что обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube :
Видео явно на HTML странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей ( фреймов ), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.
Не переделывайте макеты на основе фреймов с помощью iframe
Удачное ( и ужасное ) применение
Существует несколько допустимых вариантов использования для создания HTML страницы:
А вот некоторые ужасные варианты использования :
Атрибуты iframe
| Название атрибута | Значение | Описание |
| sandbox | Allow-same-origin Allow-top-navigation Allow-forms Allow-scripts | Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу. |
| scrolling | yes no auto | Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS. |
| Name | название | Задает имя фрейма. |
| Align | left right top middle bottom | Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS. |
| frameborder | yes (или 1) no | Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS. |
| longdesc | URL | Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS. |
| marginwidth | пиксели | Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS. |
| src | URL | Определяет URL-адрес документа для отображения в IFRAME. |
| vspace | пиксели | Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS. |
| width | пиксели % | Определяет ширину фрейма на HTML странице. |
Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, подписки, лайки, дизлайки, отклики огромное вам спасибо!
Пожалуйста, оставляйте свои комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, подписки, лайки, дизлайки!
Пишем HTML5-игру за 20 минут, или введение в Phaser framework
Эта статья посвящена разработке стильных, модных и молодежных HTML5 приложений с помощью нового фреймворка Phaser. В ней описан процесс установки библиотеки и создание классической игры Pong.
Введение
Установка библиотеки и локального веб-сервера
Итак, начнем. Для запуска и тестирования приложений нам необходимо установить локальный веб-сервер. Все примеры из комплекта библиотеки используют PHP, поэтому и сервер нужен соответствующий. Я использовал MAMP для MacOS, для Windows подойдет отечественный Denwer или любой другой аналог.
После установки веб-сервера необходимо скачать последнюю версию Фазера c GitHub: https://github.com/photonstorm/phaser. В данный момент (13 октября 2013 года) рекомендую качать dev ветку, так как эта версия содержит в себе ряд очень полезных изменений по сравнению с основной, в том числе и больший объем документации. Для тех, кто не использует GitHub, доступна прямая ссылка на архив: https://github.com/photonstorm/phaser/archive/dev.zip.
Чтобы убедиться, что все настроено правильно, можно запустить небольшое приложение-пример Hello Phaser. Создайте папку hellophaser в директории вашего веб-сервера, предназначенной для сайтов, и скопируйте туда три файла из папки Docs/Hello Phaser:
Запустите свой любимый браузер и откройте URL со скопированными файлами (в моем случае http://localhost:8888/hellophaser/). Если все хорошо, вы увидите вращающийся симпатичный логотип, такой как на скриншоте ниже:
Разработка игры
Подготовка необходимых файлов
Теперь можно приступать к разработке нашей первой игры. Создайте для нее папку phaser-pong на вашем веб-сервере и скопируйте туда файл phaser.js из папки build с исходниками фреймворка. Также создайте в ней папку assets, где мы будем хранить все ресурсы, относящиеся к игре, и файл index.html (собственно, здесь и будет наша игра).
Скопируйте в папку assets изображения шарика, ракетки и фона. Можно взять следующие файлы (в качестве фона я взял звездное небо из примеров Фазера), а можно нарисовать что-то свое. Главное — это убедиться, что вы загружаете в игру нужные картинки с корректными именами и подходящими размерами. Также не стоит выбирать слишком большие изображения, с их отрисовкой могут возникнуть проблемы. Поэтому перед использованием фотографии своего кота уменьшите ее до, скажем, 480х640 (разрешение нашей игры), и все будет хорошо. 
В результате содержимое папки phaser-pong будет таким:
А в папке assets будет три картинки:
Создание главного объекта игры, загрузка ресурсов
Наконец-то все подготовительные этапы выполнены, и начинается собственно разработка. Откройте index.html и вставьте туда следующий код:
Откройте в браузере адрес новой игры (у меня это http://localhost:8888/phaser-pong/) и вы увидите ее окно с нарисованным фоном
Игровые объекты
Сейчас перейдем к самому интересному — наполним нашу игру логикой. После объявления переменной game и перед функцией preload() объявим объекты с ракетками игрока и компьютера, мячиком, а также укажем скорости их движения:
Для создания ракеток напишем функцию createBet(x, y) :
Метод создает спрайт с указанными координатами и добавляет его в игру. Поле anchor отвечает за точку отсчета координат спрайта, устанавливаем его по центру изображения ракетки. body содержит в себе элементы для работы с физикой. Здесь мы ограничиваем движение ракетки пределами игрового пространства, задаем силу «отскока» и указываем, что при столкновении с объектами ракетка не будет отлетать в сторону.
Добавим два вызова этой функции в create(), сразу после создания фона. Ракетки будут добавлены в игру после фонового изображения, поэтому мы будем их видеть на экране:
Аналогичным образом создадим шарик, дописав следующий код сразу после вызовов функции createBet() в create() :
В результате увидим, что в нашей игре появились две ракетки и мячик, пока неподвижные:
Логика
Картинка получилась симпатичной, но думаю, стоит ее слегка оживить.
Добавляем переменную, отвечающую за состояние шарика и функцию, которая будет его запускать:
Функция проверяет, что шарик еще не запущен, и в таком случае задает ему скорость с помощью поля velocity.
Вызов функции повесим на нажатие кнопки мышки, написав следующую строку в create():
Теперь клик мышкой запускает шарик, и он отскакивает от границ игры. Добавим движения и ракеткам, отредактировав функцию update() :
Вся суть игры заключается в отбивании шарика ракетками, поэтому нужно организовать проверку столкновений шарика с ракетками. К счастью, в Фазере уже есть соответствующий функционал, поэтому нам достаточно его использовать.
Допишем следующие три строки в конец update() :
Метод collide проверяет столкновение двух объектов (первые два параметра) и вызывает указанную в третьем функцию для выполнения каких-либо действий над столкнувшимися спрайтами. Эта функция выглядит так:
При столкновении шарик меняет направление своего движения в зависимости от того, на какую часть ракетки попадает.
Осталось только добавить проверку на пропущенный гол. Если кто-то его пропустил, ставим шарик в изначальную позицию по центру поля.
checkGoal() вызывается постоянно, поэтому копируем ее в конец update() :
Все! Открываем браузер, наслаждаемся фантастическим и современным геймплеем нашей игры, радуемся жизни и свежеприобретенным навыками программирования.
Заключение
Естественно, игре не хватает еще многого, как минимум подсчета очков и определения победителей. Но мне кажется, что для введения в разработку с Phaser достаточно показанных вещей. Движок поддерживает много других классных функций, которые я собираюсь показать на примере новой игры, чуть более сложной и непосредственно относящейся к Хабру, чтобы было интереснее.
Стей тьюнед.
В ходе разработки я активно использовал код из примера breakout.php. Кроме этого примера, в папке с Фазером есть и другие игры, поэтому тем, кому не терпится использовать новый фреймворк, рекомендую в первую очередь посмотреть на содержимое папки examples.
Update от 20.10.2013: fessnecro добавил частицы при столкновении шарика с ракетками и новые уровни, за что ему спасибо. Эти изменения находятся в основном бренче. Оригинальная версия, описанная в статье, находится в ветке gh-pages.
Iframe — что это за формат и для чего используется? А также что это означает в играх? Примеры
Когда человек начинает искать способы улучшения сайта, он обязательно натыкается на iframe. Но вот только однозначно сказать, стоит ли им пользоваться трудно.
Каждый в итоге решает сам, но для этого нужно знать что такое iframe и как им пользоваться.
Iframe — что это за формат и для чего используется?
По своей сути iframe – это плавающий фрейм.
Это отдельный html документ, который отображается в окне.
Но главная проблема такого подхода в том, что в таком случае сайт не контролирует информацию из окна. Это может привести к нежелательным последствиям.
Например, в этом окне может быть контент, предназначенный для лиц старше 18 лет. А это значит, что ваш сайт упадёт в поисковой выдаче.
Iframe нужен для того, чтобы вместе со страницей, фоном загружались и другие сайты.
И они будут видны без прокрутки или перехода.
Они же используются и в программах.
Чаще всего они нужны технической поддержке.
Он проверит на наличие технических ошибок в коде, а заодно покажет, если найдёт у вас iframe.
Чаще всего iframe используют для службы поддержки.
Это удобно, так как позволяет не загружать сразу всю информацию, а только нужную.
По этой же причине его используют в презентациях.
Очевидно, что часто его используют те, кто участвует в партнёрских программах.
Система рабочая, но, опять же, так можно рекламировать нежелательный контент, за который потом прилетит от поисковых систем.
Что такое айфрейм? — смотреть видео
Iframe — что это означает в играх?
Кстати, как можно было догадаться, эта система очень удобна для игр. Особенно в мобильных версиях сайтов.
Раньше при нажатии в тех же Одноклассниках, сайт перекидывал на URL разработчика.
Многие люди пугались и закрывали страницу.
А с iframe теперь пользователь остаётся там, где и должен был.
И владельцы сайтов с приложениями ничего не потеряли, ведь они всё равно вставляют ссылки в игры.
Заодно им не нужно будет ставить виджеты возврата на Одноклассники.
Iframe предлагает ещё ряд преимуществ.
Среди них, например, более удобная платёжная система.
Немногие пользователи рискнут поддержать разработчика на неизвестном сайте. А вот напрямую через социальные сети не так уж и страшно.
А главное – iframe позволяет более подробно изучать статистику.
И это может обеспечить настоящий прорыв в мобильных приложениях. Потому что разработчики смогут оценить, насколько пользователям нравится их игры.
На самом деле, статистики станет ещё больше.
В ближайшем будущем с помощью iframe можно будет собирать информацию не только об общем времени в игре, но и на конкретных участках.
Примеры Iframe
Самый простой пример – это комментарии из Вконтакте.
Многие сайты, на которых вы можете скачать файл, понимают, что регистрироваться там будет не такое большое количество пользователей.
Просто потому что скачать можно и без регистрации, а больше людям ничего и не нужно.
Поэтому разработчики добавляют панель комментариев из Вконтакте. Благодаря чему каждый сможет прокомментировать файл, не регистрируясь на сайте.
И, что важнее, каждый может ознакомиться с этими мнениями пользователей.
Ещё одной частой разновидностью являются игры. И речь не только о социальных сетях.
Есть специальные сайты, на которых много игр.
Так как все они собраны от разных производителей, удобнее вставить iframe.
Поэтому каждая игра будет открываться отдельно.
Так и пользователям будет удобнее, и страница будет грузиться не вечность, а намного меньше.
Ну и, конечно же, вы, наверное, видели плашки с рекламой. И иногда заметно, что она не является частью сайта.
Чаще всего к такой рекламе относятся персонажи и всплывающие окна.
Это удобно, так как не грузит сайт.
А ещё часто такое можно встретить во время обзора товаров.
Если вы искали какой-нибудь рейтинг, то часто замечали, что там есть ссылки на товары. И они ведут часто на самые популярные интернет-магазины.
В итоге пользователь узнаёт сразу же актуальную цену. И ему не нужно будет никуда уходить, отрываться от статьи, и автор будет всегда предлагать актуальную информацию о ценах.
Заключение
Iframe – это палка о двух концах.
С одной стороны, он снижает нагрузку с сайта, а заодно даёт много новых возможностей.
Но при этом URL, на который он ведёт, может содержать нецензурный контент. А это негативно сказывается на вашем месте в выдаче.
В играх iframe используется, чтобы не нужно было переходить на сайт разработчика.
Чаще всего такая проблема актуальна для мобильных устройств. Посетители просто пугаются незнакомых сайтов, поэтому закрывают их.
Чаще всего iframe используют при презентациях, а также службы технической поддержки.
Если грузить сразу всю информацию, то страница станет тяжёлой. А iframe поможет снизить нагрузку.
И да, они используются не только на сайтах, но и в приложениях для тех же целей.
P.S. А еще мы предоставляем услуги по продвижению ваших аккаунтов и групп в социальных сетях. Ознакомиться с ними вы сможете на этой странице
P.S.S. Чтобы написать данную статью, было потрачено много сил и времени. И если она принесла пользу вам, то возможно она принесет пользу и вашим друзьям.
Для этого нажмите и поделитесь с друзьями в социальных сетях. А для нас это будет лучшей благодарностью и мотивацией на будущее!
А хотите первыми узнавать об обновлениях? Подписывайтесь на новости блога
