Как стать автором
Обновить

Комментарии 43

В некотором смысле края после перемещения странно отображаются в FireFox и Chome (в других не проверял)
Простите, забыл пушнуть обновлённый код. Исправил)
Результат 2 раза попробовал собрать, не получилось. Оба раза получалась несобираемая комбинация предложенная Ноем Чепменом — это спецом такой прикол сделан? :)
Нет. На самом деле я мало отдавал сил самому геймплею. Мне, как автору фреймворка, куда интереснее технологическая составляющая, потому кое-какие ошибки в алгоритмах игры и геймплее могут быть) И реализация таких вещей, как очки или корректная генерация, бывает, остаются за бортом. Если у кого будет желание довести игру до ума — буду рад)
Попробовал добавить исправление для генерации поля:
sua-manu.com/field.js

(Решение в лоб, так что не пинайте сильно;) )
Жду пул-реквест ;)
да, это несобираемые пятнашки :)
Хатеть приз
Кармы мало для использования тегов. Раскрыл:

Спасибо, я благодаря Вам узнал что это все таки были несобираемые комбинации а не мои кривые руки!
Отлично, что сказать.
В своей реализации SwellFoop (которую недавно обсуждали с Вами) при использовании atom.js и libcanvas.js вышло бы гораздо меньше кода. Теперь точно переделаю, появился стимул :)
Будут вопросы — обязательно обращайтесь)
Я не устану высказывать вам благодарности за ваши посты. Спасибо!
Спасибо, приятно слышать)
Наш ответ «процессорам надому»! :)
Atom-то, кстати, развиваете?
А нельзя буферизацию примитива, aka display list и некий глобальный clipRect зашить в сам libCanvas
В том смысле — а что будет если у меня две фишки анимируются в одной области?
Надо найти изменяемые области, найти все объекты в этой области, настроить правильный клипинг и отрисовать в нужной последовательности.
Руками это сделать не так чтобы просто :(
Вообще не так тяжело. Необходимо придумать красивый интерфейс и можно сделать.
Когда изменяется какой-то объект — проверяем все другие объекты на пересечение object.shape, если найдены — еще и так далее.
Впринципе, штук 10 строчек кода. Я подумаю)
Собрал и… и где поздравления? Система абсолютно никак не среагировала, что все расставлено правильно.
К канвасу отношения не имеет, а тестерам приятно!
Неделя пятнашек на Хабре
Дык напокупали себе тёмных изданий Portal 2 :)
В чём профит использования Canvas для данной задачи?
Обучение, высокое быстродействие, настраиваемый внешний вид.
Мне нравится аргумент обучение.
А по поводу быстродействия — у меня не плавные движения.
Думаю, обычный html отработал бы быстрее.
А вы попробуйте))
пс. какой браузер?
хорошо, попробую :-)

Firefox 4.0.1, Ubuntu 11.04
ноутбук с двухядерным Celeron
По поводу быстродействия и внешнего вида: а не лучше было бы сделать 1в1 тоже самое на CSS3 (градиенты+транзишены) + минимум яваскрипта, которому нужно только менять классы?

*задумался о реализации*
А вы попробуйте) Градиенты — это очень тугое место.
Просю :)

olostan.name/temp/fifteen.html (сорсы gist.github.com/954605 )

Как и хотелось — вся анимация — транзишенами. Градиенты — цсс (генерил на www.colorzilla.com/gradient-editor/ ). Прошу обратить внимание на плавный зум в хроме :)

Проверял работу в хроме и фф4.

Стоит сделать топик о том, как я делал это? :)
Хе, увлекся :)

Сделал сохранение состояние в хеше. Т.е. можно

1. передавать другим ссылки, типа «а ты можешь решить вот такой расклад
2. кнопки в браузере назад-вперед работают.
3. детект на победу

код написан «на коленке» (точнее gedit'ом) так что прошу сильно не придерется :)
Прикольно, в современных браузерах работает приятно, но я готов Вас огорчить)

Старые браузеры (например Fx3.6, Opera10.6) — работает некорректно (решение в топике работает корректно даже в Fx3.5). Но это не так важно и через два года будет уже неактуально, согласен)

Но основная проблема, которая вылезет только в реальном приложении и не отображается в тестовом примере — другая.
Restyle-reflow-repaint-restyle-reflow-repaint-restyle-reflow-repaint.

Производительность очень зависит от вёрстки

В то же время решение из топика вызывать только repaint.
Ну я делал без единого «закоса» для оптимизации — чисто как «пруф-оф-коцепт» идеи сделать то же самое на CSS3.

К примеру, вместо того, чтоб менять класс (как я сделал — из «col1» -> «col2» при перемещении из колонки 1 в 2) делать реальный здвиг (менять «left») и убрать live который там не нужен ваабще.

В общем оптимизировать там много чего, но идея использовать встроенные функции браузера для анимации имхо ничего так.
Ну дык, как ты не оптимизируй, всё-равно от restyle-reflow-repaint для передвижения элемента не избавишься) Сейчас то оно нормально работает и при слабой вёрстке будет нормально работать, но стоит сделать вёрстку такой, чтобы reflow занимал существенное время — fps сразу упадёт и проц будет загружен.

Мне почему-то кажется, что при большой загрузке канваса элементами для прорисовки загрузка будет не меньшей — ибо та же логика reflow будет происходить средствами самой библиотеки или кастомного кода.

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

ПС. Под iOS (iPad2) немного фликает прорисовка в канвас-реализации, при чем все поле — может это как-то пофиксить можно?
Reflow будет независим от браузера. То есть когда что-то меняется в игре — не перерисовывается весь сайт.

Что значит «фликает»? У меня на Wildfire работает вменяемо, думаю, что iPad помощнее будет.
думаю, это сделано в первую очередь для демонстрации и пиара libcanvas, автором которой является топикстартер:) Разумеется, есть много способов сделать пятнашки, но суть поста в том, что с помощью этой библиотеки, решить эту задачу можно быстро и просто.
Все эти затирания следов и отрисовка поверх напоминает мне первые программы на турбо паскале с использованием graph.tpu :)
Ну, оно везде так, даже сейчас) Просто кое-где автоматизированно)
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории