Комментарии 43
В некотором смысле края после перемещения странно отображаются в FireFox и Chome (в других не проверял)
Результат 2 раза попробовал собрать, не получилось. Оба раза получалась несобираемая комбинация предложенная Ноем Чепменом — это спецом такой прикол сделан? :)
Нет. На самом деле я мало отдавал сил самому геймплею. Мне, как автору фреймворка, куда интереснее технологическая составляющая, потому кое-какие ошибки в алгоритмах игры и геймплее могут быть) И реализация таких вещей, как очки или корректная генерация, бывает, остаются за бортом. Если у кого будет желание довести игру до ума — буду рад)
Попробовал добавить исправление для генерации поля:
sua-manu.com/field.js
(Решение в лоб, так что не пинайте сильно;) )
sua-manu.com/field.js
(Решение в лоб, так что не пинайте сильно;) )
да, это несобираемые пятнашки :)
Хатеть приз
habrastorage.org/storage/9e93b10a/414ad2a2/735b859d/4a944d3f.png
Я не понимаю как вставлять изображения, хабр их просто отказывается отображать через img
Я не понимаю как вставлять изображения, хабр их просто отказывается отображать через img
Кармы мало для использования тегов. Раскрыл:
Вторая попытка habrastorage.org/storage/de0f1807/e3f71e61/8ad9ac8e/bc7b2db0.png с использованием F5 ^_^
Короче все тут работает :) просто надо слегка напречь свой мозг
Короче все тут работает :) просто надо слегка напречь свой мозг
Спасибо, я благодаря Вам узнал что это все таки были несобираемые комбинации а не мои кривые руки!
Я не устану высказывать вам благодарности за ваши посты. Спасибо!
Наш ответ «процессорам надому»! :)
Atom-то, кстати, развиваете?
Atom-то, кстати, развиваете?
Естественно, развиваю. Я в соседнем топике писал о том, что LibCanvas базируется на AtomJS. Когда надо — баги правятся быстро)
А нельзя буферизацию примитива, aka display list и некий глобальный clipRect зашить в сам libCanvas
В том смысле — а что будет если у меня две фишки анимируются в одной области?
Надо найти изменяемые области, найти все объекты в этой области, настроить правильный клипинг и отрисовать в нужной последовательности.
Руками это сделать не так чтобы просто :(
В том смысле — а что будет если у меня две фишки анимируются в одной области?
Надо найти изменяемые области, найти все объекты в этой области, настроить правильный клипинг и отрисовать в нужной последовательности.
Руками это сделать не так чтобы просто :(
Собрал и… и где поздравления? Система абсолютно никак не среагировала, что все расставлено правильно.
К канвасу отношения не имеет, а тестерам приятно!
К канвасу отношения не имеет, а тестерам приятно!
Неделя пятнашек на Хабре
В чём профит использования Canvas для данной задачи?
Обучение, высокое быстродействие, настраиваемый внешний вид.
Мне нравится аргумент обучение.
А по поводу быстродействия — у меня не плавные движения.
Думаю, обычный html отработал бы быстрее.
А по поводу быстродействия — у меня не плавные движения.
Думаю, обычный html отработал бы быстрее.
По поводу быстродействия и внешнего вида: а не лучше было бы сделать 1в1 тоже самое на CSS3 (градиенты+транзишены) + минимум яваскрипта, которому нужно только менять классы?
*задумался о реализации*
*задумался о реализации*
А вы попробуйте) Градиенты — это очень тугое место.
Просю :)
olostan.name/temp/fifteen.html (сорсы gist.github.com/954605 )
Как и хотелось — вся анимация — транзишенами. Градиенты — цсс (генерил на www.colorzilla.com/gradient-editor/ ). Прошу обратить внимание на плавный зум в хроме :)
Проверял работу в хроме и фф4.
Стоит сделать топик о том, как я делал это? :)
olostan.name/temp/fifteen.html (сорсы gist.github.com/954605 )
Как и хотелось — вся анимация — транзишенами. Градиенты — цсс (генерил на www.colorzilla.com/gradient-editor/ ). Прошу обратить внимание на плавный зум в хроме :)
Проверял работу в хроме и фф4.
Стоит сделать топик о том, как я делал это? :)
Хе, увлекся :)
Сделал сохранение состояние в хеше. Т.е. можно
1. передавать другим ссылки, типа «а ты можешь решить вот такой расклад?»
2. кнопки в браузере назад-вперед работают.
3. детект на победу
код написан «на коленке» (точнее gedit'ом) так что прошу сильно не придерется :)
Сделал сохранение состояние в хеше. Т.е. можно
1. передавать другим ссылки, типа «а ты можешь решить вот такой расклад?»
2. кнопки в браузере назад-вперед работают.
3. детект на победу
код написан «на коленке» (точнее gedit'ом) так что прошу сильно не придерется :)
Прикольно, в современных браузерах работает приятно, но я готов Вас огорчить)
Старые браузеры (например Fx3.6, Opera10.6) — работает некорректно (решение в топике работает корректно даже в Fx3.5). Но это не так важно и через два года будет уже неактуально, согласен)
Но основная проблема, которая вылезет только в реальном приложении и не отображается в тестовом примере — другая.
Restyle-reflow-repaint-restyle-reflow-repaint-restyle-reflow-repaint.
Производительность очень зависит от вёрстки
В то же время решение из топика вызывать только repaint.
Старые браузеры (например Fx3.6, Opera10.6) — работает некорректно (решение в топике работает корректно даже в Fx3.5). Но это не так важно и через два года будет уже неактуально, согласен)
Но основная проблема, которая вылезет только в реальном приложении и не отображается в тестовом примере — другая.
Restyle-reflow-repaint-restyle-reflow-repaint-restyle-reflow-repaint.
Производительность очень зависит от вёрстки
В то же время решение из топика вызывать только repaint.
Ну я делал без единого «закоса» для оптимизации — чисто как «пруф-оф-коцепт» идеи сделать то же самое на CSS3.
К примеру, вместо того, чтоб менять класс (как я сделал — из «col1» -> «col2» при перемещении из колонки 1 в 2) делать реальный здвиг (менять «left») и убрать live который там не нужен ваабще.
В общем оптимизировать там много чего, но идея использовать встроенные функции браузера для анимации имхо ничего так.
К примеру, вместо того, чтоб менять класс (как я сделал — из «col1» -> «col2» при перемещении из колонки 1 в 2) делать реальный здвиг (менять «left») и убрать live который там не нужен ваабще.
В общем оптимизировать там много чего, но идея использовать встроенные функции браузера для анимации имхо ничего так.
Ну дык, как ты не оптимизируй, всё-равно от restyle-reflow-repaint для передвижения элемента не избавишься) Сейчас то оно нормально работает и при слабой вёрстке будет нормально работать, но стоит сделать вёрстку такой, чтобы reflow занимал существенное время — fps сразу упадёт и проц будет загружен.
Мне почему-то кажется, что при большой загрузке канваса элементами для прорисовки загрузка будет не меньшей — ибо та же логика reflow будет происходить средствами самой библиотеки или кастомного кода.
В общем без дополнительных тестов-сравнений тут тяжело что-то говорить. Думаю моя реализация показывает что такое сделать возможно, и на данном примере работает как минимум не хуже при меньших затратах по времени для написания (во всяком случае именно анимации и прорисовки).
ПС. Под iOS (iPad2) немного фликает прорисовка в канвас-реализации, при чем все поле — может это как-то пофиксить можно?
В общем без дополнительных тестов-сравнений тут тяжело что-то говорить. Думаю моя реализация показывает что такое сделать возможно, и на данном примере работает как минимум не хуже при меньших затратах по времени для написания (во всяком случае именно анимации и прорисовки).
ПС. Под iOS (iPad2) немного фликает прорисовка в канвас-реализации, при чем все поле — может это как-то пофиксить можно?
думаю, это сделано в первую очередь для демонстрации и пиара libcanvas, автором которой является топикстартер:) Разумеется, есть много способов сделать пятнашки, но суть поста в том, что с помощью этой библиотеки, решить эту задачу можно быстро и просто.
Все эти затирания следов и отрисовка поверх напоминает мне первые программы на турбо паскале с использованием graph.tpu :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Пятнашки на LibCanvas