HTML *

В этой статье я рассмотрю такие приемы как:

• Пересечение габаритов объектов
• Принадлежность точки полигону

И рассмотрим пример реализации механики игры «Астероиды».

Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.

В этот прекрасный, ничем не отличающийся от остальных день (если не брать в расчёт тот факт, что холодная погода разбила в осколки все мечтания о хотя бы паре тёплых дней в этом году что бы поездить на велосипеде), у меня выдалось хорошее настроение. И хорошее оно даже несмотря на то, что я отчаялся ставить хакинтош на свой ноут, и пришёл к неутешительной мысли, что если я хочу хоть что-то написать под iOS, то мне надо копить на продукцию фирмы Эппл. Но собственно пост не об этом, а о небольшой жизни крохотной игрушки, которую мы с вами и попытаемся создать. Честно говоря, в добрые времена я не так уж и много играл в предка нашего творения (которого ещё и не существует), но определённые теплые воспоминания ещё остались в моём сердце. Итак… Танки! Танчики! БатлТанкс! БатлСити!
Писать будем на JavaScript с выводом на canvas.

Я хотел бы поделиться прототипом игры, созданным всего за несколько часов. Надеюсь, что он вдохновит нескольких из вас! В индустрии однопользовательских браузерных игр, кажется, очень не хватает воображения и умения рассказывать истории, хотя, возможно, я просто не заметил таких игр ;), но мне не хватает таких игр, как Grim Fandango.

Ниже приведен скриншот из демонстрации, состоящей из нескольких узлов DOM, представляющих составные части главного героя, птиц и сцену. Большинство анимаций осуществляется CSS-переходами/анимациями, некоторые из которых являются динамическими и используют библиотеку move.js.

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


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

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

Разработчики выпускают всё больше игр на HTML5 вполне достойного качества (достаточно упомянуть, например, Monster Dash, Angry Birds или SONAR), и это только начало. Настоящий прорыв ожидается, когда выйдет браузер Chrome 14 с Native Client, что откроет дорогу для браузерных игр совершенно нового качества, с 3D и прочими наворотами.

Некоторые уже всерьёз смотрят на HTML5 как на полноценную игровую платформу. Специально для них организована конференция New Game — судя по всему, первая в мире конференция разработчиков HTML5-игр. Она пройдёт 1-2 ноября 2011 г. в Сан-Франциско, регистрация уже открыта. Ничего удивительного, что одним из главных спонсоров конференции стала компания Google. Она также отправит туда нескольких докладчиков, которые расскажут о WebGL. Кроме Google, доклады об использовании и оптимизации WebGL, Canvas и JavaScript прочитают представители Mozilla, Opera, Bocoup, GameSalad, Moblyng и другие.

via Google Code

Одним из нововведений HTML5 стала возможность редактировать часть страницы прямо в браузере. Эта фича получила название content editable. Она работает во всех современных браузерах. Чтобы сделать часть страницы редактируемой, нужно поставить тегу атрибут contenteditable="true". Под тегом может стоять практически всё: текст с форматированием, картинки, списки и даже flash-ролики. Но пользователь может добавлять толко текст, остольное он может только удалять. В этом посте я покажу пример использования content editable на веб-сайте.

Здравствуйте, Хабражители!

В этом топике я покажу как создать простой графический редактор для iPhone. Статья написана максимально понятно, поэтому даже новичку не будет сложности разобраться. Более того, я расскажу:

• об особенностях событий touch-устройств;
• об особенностях верстки для мобильных девайсов;
• почему для создания нормальной «рисовалки» нужно использовать несколько холстов;
• что такое clickjacking и зачем я использовал этот хак в своей рисовалке;
• о всех трудностях и некоторых мелочах, с которыми я столкнулся в процессе разработки;

Больше — под катом

Ранее в этом году WHATWG выпустили издание для веб-разработчиков из спецификации HTML5. Теперь, чтобы не отстать, HTML Working Group W3C опубликовали проект с более читабельной спецификацией HTML5: Edition for Web Authors
W3C версия написана более технически, чем версия WHATWG, но по крайней мере вы можете прочитать HTML5 спецификацию без заметок о соответствии критериям браузеров.

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



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

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

Уже хорошо известно, что HTML5 станет составной частью Windows 8. Причем среди разработчиков .NET некоторое время назад возникло беспокойство относительно их дальнейшей судьбы, поскольку Microsoft уделяла слишком большое внимание HTML5, а традиционный стек .NET-технологий оставался в тени; правда, позднее софтверный гигант успокоил взволнованных программистов, уверив, что .NET-платформа никуда не исчезнет.

На днях стало известно о новых планах Microsoft по интеграции HTML5 в новый офисный пакет Office 15. Источником сведений послужила вакансия, опубликованная редмондской корпорацией 19 июля, из которой следует, что, подобно тому как в 1993 году разработчики получили возможность создавать программы на Visual Basic для Office, теперь новая версия оффисного пакета также получит возможность расширения своих возможностей за счет усилий сторонних разработчиков на HTML5 и JavaScript. В частности в тексте вакансии отмечается, что благодаря использованию новой web-ориентированной технологии станет возможным разрабатывать клиент-серверные приложения, интегрировать их с облачным Office 365 и (или) SharePoint — другими словами, привносить в обычное десктопное приложение все преимущества облачных технологий. Любопытно, что опыт соискателя для этой вакансии в области JQuery, Dojo и других JavaScript-библиотек признается положительным моментом.

Visual Basic останется составной частью Office 15, так как вопрос интеграции с VBA тоже будет засчитан кандидату в плюс.
[Источник]

Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

Adobe сегодня выпустила новый инструмент Adobe Edge (public preview), который предназначен для создания простого анимированного контента на открытых стандартах: HTML5, JavaScript и CSS3. Предполагается, что для растущего числа мобильных устройств HTML5 более приемлем, чем Flash. В первую очередь для мобильного рынка и создан новый редактор. Впрочем, никто не мешает делать с его помощью любую веб-анимацию HTML5, а в будущем — HTML5-игры и другие приложения.

Adobe Edge призван удачно дополнить Flash и сохранить позиции Adobe как лидера на рынке ПО для веб-дизайна. Эта компания заявляет, что давно продвигает технологии HTML, в качестве примеров можно привести такие продукты как Dreamweaver, Illustrator, Digital Publishing Suite и недавно вышедший Flash-to-HTML5 конвертер Wallaby.

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

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

Если вам интересно изучить разработку игр на HTML5/JavaScript, можете посмотреть на Бесконечного Mario на HTML5 (временно не работает: привышен лимит у хостера; зеркало).

Игра является клоном этого проекта Minecraft: уровни генерируются до бесконечности, только там игра была на Java (тоже с исходниками), а здесь переписана на HTML5.

Гладкая игра без тормозов и хорошо читаемый код. Правда, есть некоторые глюки, например, фоновая музыка играет вроде только в Firefox 4.

Если жизней не хватает, можете добавить через JS-консоль браузера:

Mario.MarioCharacter.Lives += 1024

Исходники на github: github.com/robertkleffner/mariohtml5

В июне Андреас Гал (Andreas Gal) с коллегами из Mozilla представили движок pdf.js для отображения PDF средствами HTML5/JavaScript. В первоначальной версии он работал неидеально, но разработчики всерьёз взялись за дело и буквально каждый день добавляли функционал: рендеринг графики, GUI и др. Но самое главное, что реализована динамическая загрузка шрифтов TrueType и кардинально улучшена загрузка шрифтов PostScript Type 1.

В итоге, сейчас Андреас Гал решил, что первый тест пройден и pdf.js попиксельно точно* отображает тестовый документ (демо).

Теперь pdf.js присвоен номер версии 0.2 и поставлена новая задача: отрендерить официальные спецификации PDF 1.7 (документ содержит 1310 страниц, файл 31 МБ).

^{*На самом деле «идеальный» рендеринг достигается только в сборке Firefox Nightly под Windows 7 (c рендерингом шрифтов через Direct2D и DirectWrite), в остальных — близкий к идеалу или не очень близкий, в зависимости от браузера и ОС.}

Андреас Гал (Andreas Gal) с коллегами из Mozilla разработали первый нормальный движок pdf.js для отображения PDF средствами HTML5/JavaScript (демо).

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

Внедрение в браузер нативных или open-source плагинов тоже нельзя назвать идеальным решением, потому что это потенциальная брешь в безопасности.

Microsoft наконец-то огласила результаты конкурса HTML5 приложений dev:unplugged с задержкой на 2 с половиной недели от первоначальных сроков. А ведь я чуть ли не каждый час обновлял браузер начиная с 23-его мая в надежде узнать результаты =) но статья не об этом…

Наш проект браузерной стратегии The Fate of Nation получил место среди «Honorable Mentions». Топовых победителей можно посмотреть на сайте конкурса.

По поводу окончания конкурса хочу немного рассказать про нашу игру, историю ее создания, особенности браузерных игр, ботов, «мультоводство» и о наших планах на будущее.

У элемента input в HTML 5 появился атрибут multiple, с помощью которого мы можем выбрать для загрузки несколько файлов. Этот атрибут принимает только одно значение «multiple», в живую будет выглядеть так:

<input type="file" multiple="multiple" name="files[]" />

Обратите внимание на name, мы явно в нем указали, что это массив.

Сразу появляется вопрос, какой браузер это новшество не понимает, ответ легко предсказуем, это семейство Internet Explorer. Начиная с 9 версии и ниже, они не поддерживают этот функционал и просто проигнорируют атрибут, искренне надеюсь что в финальной 10 версии они это поправят.
Кроме того что, мы дали пользователям загрузить сразу много файлов, мы должны позаботиться о них, и дать им возможность загрузит именно те файлы которые нам необходимы. И тут на помощь приходит еще один новый атрибут accept. Который принимает "MIME Media Types".

<input type="file" multiple="multiple" name="files[]" accept="image" />

Когда на конференции Google I/O показали Angry Birds на HTML5, в потоке радости мало кто обратил внимание, что игра на самом деле требует наличия Flash. Спрашивается, почему? Ведь игра написана на Google Web Toolkit (GWT) и для обработки звука использует библиотеку GWT-voices.

Появились размышления, что таким образом разработчик постарался блокировать игру для пользователей iOS (они покупают её за деньги в App Store). Из лагеря Microsoft высказались в том смысле, что Google умышленно оптимизировал игру под свой «глючный» и «нестандартный» Chrome, тогда как IE гораздо лучше поддерживает <Audio> и не экспериментирует с функциями, которые ещё не утверждены.

На самом деле причины немного другие, и главная из них в том, что HTML5 <Audio> пока что не подходит для использования в играх или профессиональных аудиоприложениях.