Пятнашки на LibCanvas

[@ArtemSmirnov]

В некотором смысле края после перемещения странно отображаются в FireFox и Chome (в других не проверял)

[@TheShock]

Простите, забыл пушнуть обновлённый код. Исправил)

[@Bytexpert]

Результат 2 раза попробовал собрать, не получилось. Оба раза получалась несобираемая комбинация предложенная Ноем Чепменом — это спецом такой прикол сделан? :)

[@TheShock]

Нет. На самом деле я мало отдавал сил самому геймплею. Мне, как автору фреймворка, куда интереснее технологическая составляющая, потому кое-какие ошибки в алгоритмах игры и геймплее могут быть) И реализация таких вещей, как очки или корректная генерация, бывает, остаются за бортом. Если у кого будет желание довести игру до ума — буду рад)

[@Ogra]

Попробовал добавить исправление для генерации поля:
sua-manu.com/field.js

(Решение в лоб, так что не пинайте сильно;) )

[@TheShock]

Жду пул-реквест ;)

[@TheShock]

github.com/libcanvas/libcanvas.github.com

[@seewald]

да, это несобираемые пятнашки :)

[@k3NGuru]

Хатеть приз

[@k3NGuru]

habrastorage.org/storage/9e93b10a/414ad2a2/735b859d/4a944d3f.png

Я не понимаю как вставлять изображения, хабр их просто отказывается отображать через img

[@TheShock]

Кармы мало для использования тегов. Раскрыл:

[@k3NGuru]

Вторая попытка habrastorage.org/storage/de0f1807/e3f71e61/8ad9ac8e/bc7b2db0.png с использованием F5 ^_^

Короче все тут работает :) просто надо слегка напречь свой мозг

[@EugeniyPetrov]

Спасибо, я благодаря Вам узнал что это все таки были несобираемые комбинации а не мои кривые руки!

[@janitor]

Отлично, что сказать.
В своей реализации SwellFoop (которую недавно обсуждали с Вами) при использовании atom.js и libcanvas.js вышло бы гораздо меньше кода. Теперь точно переделаю, появился стимул :)

[@TheShock]

Будут вопросы — обязательно обращайтесь)

[@de_arnst]

Я не устану высказывать вам благодарности за ваши посты. Спасибо!

[@TheShock]

Спасибо, приятно слышать)

[@mark_ablov]

Наш ответ «процессорам надому»! :)
Atom-то, кстати, развиваете?

[@TheShock]

Естественно, развиваю. Я в соседнем топике писал о том, что LibCanvas базируется на AtomJS. Когда надо — баги правятся быстро)

[@kashey]

А нельзя буферизацию примитива, aka display list и некий глобальный clipRect зашить в сам libCanvas
В том смысле — а что будет если у меня две фишки анимируются в одной области?
Надо найти изменяемые области, найти все объекты в этой области, настроить правильный клипинг и отрисовать в нужной последовательности.
Руками это сделать не так чтобы просто :(

[@TheShock]

Вообще не так тяжело. Необходимо придумать красивый интерфейс и можно сделать.
Когда изменяется какой-то объект — проверяем все другие объекты на пересечение object.shape, если найдены — еще и так далее.
Впринципе, штук 10 строчек кода. Я подумаю)

[@qazwsx]

Собрал и… и где поздравления? Система абсолютно никак не среагировала, что все расставлено правильно.
К канвасу отношения не имеет, а тестерам приятно!

[@TheShock]

habrahabr.ru/blogs/canvas/118567/#comment_3866382

[@mr_avi]

Неделя пятнашек на Хабре

[@stryaponoff]

Дык напокупали себе тёмных изданий Portal 2 :)

[@javascript]

В чём профит использования Canvas для данной задачи?

[@TheShock]

Обучение, высокое быстродействие, настраиваемый внешний вид.

[@javascript]

Мне нравится аргумент обучение.
А по поводу быстродействия — у меня не плавные движения.
Думаю, обычный html отработал бы быстрее.

[@TheShock]

А вы попробуйте))
пс. какой браузер?

[@javascript]

хорошо, попробую :-)

Firefox 4.0.1, Ubuntu 11.04
ноутбук с двухядерным Celeron

[@AlexTikhonov]

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

*задумался о реализации*

[@TheShock]

А вы попробуйте) Градиенты — это очень тугое место.

[@AlexTikhonov]

Просю :)

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

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

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

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

[@AlexTikhonov]

Хе, увлекся :)

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

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

код написан «на коленке» (точнее gedit'ом) так что прошу сильно не придерется :)

[@TheShock]

Прикольно, в современных браузерах работает приятно, но я готов Вас огорчить)

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

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

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

В то же время решение из топика вызывать только repaint.

[@AlexTikhonov]

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

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

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

[@TheShock]

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

[@AlexTikhonov]

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

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

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

[@TheShock]

Reflow будет независим от браузера. То есть когда что-то меняется в игре — не перерисовывается весь сайт.

Что значит «фликает»? У меня на Wildfire работает вменяемо, думаю, что iPad помощнее будет.

[@Elegar]

думаю, это сделано в первую очередь для демонстрации и пиара libcanvas, автором которой является топикстартер:) Разумеется, есть много способов сделать пятнашки, но суть поста в том, что с помощью этой библиотеки, решить эту задачу можно быстро и просто.

[@Elegar]

Все эти затирания следов и отрисовка поверх напоминает мне первые программы на турбо паскале с использованием graph.tpu :)

[@TheShock]

Ну, оно везде так, даже сейчас) Просто кое-где автоматизированно)