Pull to refresh

Новый взгляд на online Magic 8 Ball

HTML
image

Доброго времени суток, уважаемые хабравчане!

Да, сегодня речь снова пойдет о шарике из фильма «Трасса 60». Кто-то слышал о нем, кто-то видел, кто-то даже купил себе экземпляр и пользуется в своей профессиональной деятельности (куда уж без этого в IT-сфере?).
Но даже тех, кому данная тема успела набить оскомину, я прошу не отбрасывать с ходу эту публикацию. Мой шарик хранит в себе небольшую тайну…


Предыстория


Как это бывало, наверное, с каждым из вас, данная тема захватила меня внезапно и полностью. В один прекрасный весенний день я бороздил просторы рунета в поисках подарка для своего друга. Скорый день рождения не давал возможности плотно подумать над подарком, поэтому в ход пошли сувенирные сайты, на одном из которых я наткнулся на такой вот шарик. Интересная идея, подумал я, тем более, что друг мой PM, ему в работе вещь очень пригодится! Ввиду того, что покупка должна была быть совершена в интернет магазине, а кота в мешке покупать не хотелось, я пошел по просторам рунета еще дальше, изучая что же я собираюсь купить и стоит ли оно того. Картинки, видео, описания — меня интересовало все, даже нередкие online вариации подвергались пристальному просмотру.
И что же я обнаружил?
В наш век высоких технологий, HTML5 и прочих красивостей, все встреченные мною реализации не заходили дальше, чем смена надписи на статической картинке шарика по клику мыши…
Мысль пошла работать, идея хваталась за идею, а руки уже успели открыть любимый html/js-редактор и набирали скелет странички.

Что же получилось?


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

А где тайна?


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

Хоть бы подсказочку — внимание, спойлер


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


P.S.


Не подумайте, что я тут поднимаю тему сравнения браузеров, ничего такого, просто сухие факты.
На моем компьютере хорошую скорость работы удалось достичь только в браузере Google Chrome (у меня стоит версия 12).
В Firefox версии 3.6 солидно подтормаживает.
В IE 8 вовсе не работает, чего я впрочем и не ожидал, canvas там пока не реализовали.
Другие браузеры не пробовал, предоставляю это вам.
При включенной опции «Не отображать содержимое окна при перетаскивании» шарик капризничает и отказывается отвечать на вопросы

P.P.S.


А подарок другу я все-таки другой купил :)
Tags:html5javascriptcanvasmagicпринятие решенийшариктайна
Hubs: HTML
Total votes 49: ↑20 and ↓29 -9
Views656

Comments 47

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now

HTML-5 разработчик
from 80,000 to 100,000 ₽PiRL VenturesСанкт-ПетербургRemote job
JavaScript разработчик
from 180,000 ₽SportrecsМоскваRemote job
WordPress-разработчик / HTML-верстальщик
from 40,000 ₽FLUENTRUSSIAСанкт-ПетербургRemote job
JavaScript разработчик
from 100,000 to 200,000 ₽МТС КассаУльяновскRemote job