Для общего интереса и личного самоудовлетворения на свет появилась веб-версия телеигры "КУБ" под эгоистичным названием "Smart Square" (умный квадрат). Умный, потому что побороть его очень трудно, а квадрат, потому что самый настоящий квадрат.

ИГРАТЬ

Мысль о создании игры пришла мне в голову как зубная боль - неожиданно и очень навязчиво. По телевизору ведь играют - я тоже так хочу. А когда есть идея и необходимые знания, надо с чего-то начинать.

НАЧИНАЕМ

Оказалось, что описание всех заданий телеигры "КУБ" в интернете есть как на русском, так и на английском - отличный бонус со старта. Вот только не все задания возможно реализовать на практике опираясь на тот рюкзачок знаний, что висит за спиной.
"Не все" - меня устроило.
Откинул уровни, завязанные на шарах и трехмерном пространстве, а так же уровни, пройти которые можно используя дебагер браузера - и список изрядно похудел

Первая партия умно-квадратных заданий получилась вот такой:

01. Anomaly (Аномалия)
02. Avoid (Избежание)
03. Calculate (Подсчёт)
04. Chase (Погоня)
05. Code (Код)
06. Perimeter (Периметр)
07. Exact (Точность)
08. Duplicate (Дубликат)
09. Equalise (Равенство)
10. Hit Rate (Нажатие)
11. Vertical Drop (Вертикальное падение)
12. Trail (След)
13. Totalise (Суммирование)
14. Pathfinder (Следопыт)
15. Metronome (Метроном)
16. Memory Flash (Мгновенная память)
17. Configuration (Конфигурация)
18. Identify (Идентификация)
19. Memorise (Запоминание)
20. Reaction (Реакция)
21. Succession (Очерёдность)
22. Grid (Сетка)

Первая - потаму, что не последняя.
Почва готова, но нужно рыть глубже.

ВНЕШНИЙ ВИД

Оформления оригинала игры "КУБ" выполнено на высшем уровне: это и агрессивный красный, и вращающаяся сцена, и бездушный бас выдающий указания и отправляющий неудачников домой. Все замечательно, но я решил пойти совсем в другом направлении и все что у на осталось общее - это прямой угол.

Очень много изображений было бы использовано для оформления необходимых мне страниц, но храни Господи CSS3 с его возможностями. Решено! Чистый CSS! И никаких изображений!

НАВИГАЦИЯ

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

ФУНКЦИОНАЛ

Что, зачем и куда, а потом снова зачем и снова куда.
Легкий мозговой штурм в обнимку с чашкой кофе породили некий алгоритм работы моей сайт-игры:

1. Начинаем игру;
2. Генерируем случайный уровень из общей коллекции уровней;
3. Играем
3.1 Выиграли
3.1.1 Увеличиваем счетчик пройденных игр
3.1.2 Возвращаемся к п.2
3.2 Проиграли
3.2.1 Уменьшаем счетчик жизней
3.2.2 Возвращаемся к п.2
4. Если результат достигнут
4.1 То даем возможность занести свои данные на доску почета
4.2 Возвращаемся в исходное состояние
5. Если жизни закончились
5.1 Возвращаемся в исходное состояние
6. Общая статистика по играм

Все это реально сделать используя только javascript, кроме статистики и доски почета. Для реализации этих двух возможностей понадобится работа с файлам или БД, а значит придется использовать язык PHP.

Я не программист PHP даже и близко. Но разве это может остановить фанатика своего дела. Меня лично нет! И да здравствует Google.

Подготовка завершена и пришло время кодинга.
Работа "внеклассная", а значит и время на неё нужно было выделять из домашних резервов, которых на самом деле "кукиш с маслом".

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

ПРАВИЛА

У вас есть 9 жизней, чтобы преодолеть 7 испытаний.
Выполняете задание, переходите к следующему. И так до тех пор пока не выполните все 7.

Если же вы провалили задание, то теряете 1 жизнь и начинаете выполнять это задание заново.
Каждый раз, когда вы начинаете играть, уровень генерируется с новыми вариантами испытаний. Поэтому выполняя одно и тоже задание несколько раз вам не станет проще его пройти.

Теряя последнюю жизнь вы покидаете текущую игру и возвращаетесь на стартовую позицию.

Ловкость, скорость, внимание, память, мгновенная память, реакция, и седьмое чувство вам понадобятся для того чтобы дойти до конца.
И если вы все же обладаете всеми этими качествами на высоте, то сможете оставить свое имя и ссылку на свою страницу на доске почёта Smart Square.

ИДЕИ

Игра будет пополняться разными сложными и интересными уровнями.
И если у вас есть собственные идеи для заданий, то пожалуйста, присылайте мне их на почту Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. и возможно вы станете соавтором игры Smart Square.

liLanding - jQuery Landing Navigation или навигация по лендингу

Плагин liLanding обеспечивает плавную навигацию по информационным блокам лендинга, а также подсвечивает ссылки в меню, соответствующие видимым блокам

Пример работы на JSFIDDLE

BUG FIX

04.12.13 Добавлены функции обратного вызова "show" и "hide"

Подключаемые файлы

Инициализация плагина

<script>
$(window).load(function(){
  $('.landingMenu').liLanding();
})
</script>

Структура HTML

    

        
landing link 1
        
landing link 2
        
landing link 3
        
landing link 4
        
landing link 5
    

    1


    2


    3


    4


    5

События

show( linkEl, landingItem )

Срабатывает, когда один из блоков лендинга появляется в условно видимой зоне

hide( linkEl, landingItem )

Срабатывает, когда один из блоков лендинга скрылся за пределами условно видимой зоны

Пример кода с обратным вызовом

<script>
$(window).load(function(){
  $('.landingMenu').liLanding({
    show: function (linkEl, landingItem) {},
    hide: function (linkEl, landingItem) {}  
  });
})
</script>

Mobo Generator - это удобный сервис для веб-разработчиков, который позволяет сгенерировать CSS и HTML код иконок мобильных операторов. Сервис развивается и сейчас уже имеет базу операторов таких стран как Украина, Россия, Белоруссия, Казахстан и Молдова.
C нашим сервисом верстка контактных телефонов займет у вас времени меньше, чем Google тратит на загрузку своей главной страницы

Плагин liEqualizer - это графический псевдо эквалайзер, который создает очень реалистичную иллюзию реального эквалайзера.
Эквалайзер liEqualizer очень легко оформить под любой дизайн сайта или аудио-плеера. Внешний вид эквалайзера очень гибкий: вы можете устанавливать количество колонок и строк псевдо эквалайзера, частоту такта, а также управлять его работой с помощью методов "start" и "stop"

Плагин liHarmonica - это лучший среди своих аналогов плагин для реализации раздвигающегося (раздвижного) многоуровневого меню на jquery.
Меню liHarmonica поддерживает бесконечный уровень вложенности пунктов, что резко выделяет его на фоне других меню с эффектом «accordion».
Благадаря гибкому CSS меню может принимать абсолютно разный внешний вид, от простого маркерованного списка до многоуровневого дереева.