Всем привет! В этом посте хотел бы поделиться опытом создания и развития сервиса для одной небезызвестной онлайн игры.
Жизнь в нем еще пока теплится, но, думаю, уже можно подвести окончательные итоги.
Об этой игре мне стало известно задолго до ее выхода, и я смог попасть в число первых бета-тестеров. От браузерной игры много не ждал, но интерес взял свое. Довольно быстро я нашел адекватное русскоязычное комьюнити и вступил в один из кланов.
Это пост про небольшую игру «Крестики-нолики», которая была написана в целях пополнения опыта программирования на JS. Здесь применяются canvas и DojoBase. Библиотека используется для работы с событиями и для нахождения элементов по id(это очень удобно). Сanvas используется для отрисовки игрового поля.
И сами «Крестики-нолики».
Читать полностью »
Недавно на TechCrunch появился любопытный обзор «еще одного конкурента Microsoft» от Steve O'Hear. И вряд ли он привлек бы мое внимание, если бы не Canvas, на котором, по утверждению автора, написан продукт. Canvas, который, как мне казалось, используется в основном только для игр и эффектов. Для тех, кому небезразлично развитие технологии HTML5 (и еще тех, кто ищет альтернативу MS), ниже привожу перевод статьи.
Читать полностью »
Несмотря на то, что HTML5 всё ещё находится в процессе разработки, он уже появляется в веб-интерфейсах. Одним из основных нововведений этой версии HTML стал элемент Canvas, который используется для отрисовки двухмерной графики. Например, всё, что вы видите и с чем взаимодействуете в игре MMORPG от компании Mozilla или старом-добром Command and Conquer, отрисовывается и обрабатывается с помощью Canvas. Самые изощрённые умы даже реализуют полноценные формы на Canvas. Или интерактивную модель солнечной системы.
Фреймворки для работы с этим элементом растут как грибы после дождя; про то, как начать программировать, используя Canvas, написано огромное количество статей. Но есть один пункт, о котором, по-видимому, из-за узкой специфики говорят редко и мало. Речь идёт о тестировании приложений на Canvas. В каком-то смысле оно становится проблемой для инженера по тестированию, который привык обращаться к элементам на странице по их css или xpath селекторам, а затем выполнять с объектом какие-то действия. С Canvas такой подход не работает, ведь DOM элемент один, а объектов в нём — много.
Под катом на примере автоматизации тестирования API Яндекс.Карт я расскажу вам о том, как мы решили эту проблему в Яндексе.
Читать полностью »
Здравствуйте. Не так давно на одном из веб-проектов, мне понадобилась возможность получить фото с веб-камеры. Через некоторое время, на другом проекте, появилась такая же необходимость, и опять же замаячил на горизонте третий проект, с похожей функциональностью. Дабы не ходить каждый раз на html5 Rocks, и смотреть, «как там и чего», решил написать плагин.
Собственно, в данной статье я хочу представить результат своего труда: html5-webcam-avatar — jquery плагин для создания аватарок с веб-камеры.
Перед Новым годом на хабре были опубликованы два топика (первый, второй) о создании «Солнечной системы» на HTML5 Canvas. Бегло прочитав их и изучив результаты профилирования я удивился тому что такая простенькая программа так неэффективно работает. Вооружившись Notepad++ решил проверить всё ли так плохо, написав свою реализацию.
ТЗ остаётся всё тем же. 12 планет, скорость вращений первой — 40 секунд, каждой последующей на 20 секунд дольше. Изначально планеты имеют случайное расположение на своих орбитах. У каждой планеты есть описание, которое отображается при наведении курсора на неё. При клике на планету она останавливается. Если курсор находиться над орбитой — подсветить её. Всё это должно работать в Opera 12+, IE9+, Chrome и FF.
— Я не хочу ничего читать, давай результат!
— Держи: жмякЧитать полностью »
После весеннего набега на Германию с попутным посещением CeBiT 2012 мы решили, что неплохо было бы уже выступить и на родных просторах. Примерно в это же время наш директор наткнулся на хабровский анонс TechCrunch Moscow, и мы дружно решили: «Конечно поедем!», тем более, что повод был достойный — запуск стабильной версии 7.0 и первый официальный релиз Teamlab Office.
Но сегодня не только о нас.
Читать полностью »
Здравствуйте, уважаемые Хаброюзеры! В своём дебютном посте, я хотел бы рассказать о такой замечательной и интересной штуке, как HTML5 Canvas, а точнее о функциях контекста, которые по моему мнению, освещены меньше всего — transform и rotate.
Когда я начинал свои эксперименты и копания в области новомодного канваса, в рунете была всего одна статья внятно объясняющая, как нужно вертеть рисунки на холсте. Более-менее понять смысл загадочного Java Script'a я смог только «полопатив» исходники Tululoo HTML5 Game Maker.
Читать полностью »
Огромную площадь 13 гигапикселов комикса xkcd Click and Drag можно использовать как карту для многопользовательской игры. Такая идея пришла github-пользователю n01se, и они вместе с Рэнделом Монро воплотили её в жизнь. В игре нет какой-то «цели», это просто техническая возможность путешествовать по карте одновременно с другими игроками, и общаться с ними.
Читать полностью »
HTML5 Canvas — элемент для работы с графикой. Почти все мы начинали с простых fillRect, strokeRect и clearRect, но затем мы переходили на использование Path и картинок, или брались за «тяжелые» библиотеки. Сегодня я расскажу простой способ упростить работу с Canvas элементом.
Читать полностью »
