Игра на голом HTML / CSS

Доброй ночи, хабраюзеры.
Сегодня речь пойдет о том, как создать игру не используя js и прочих скриптов. Только HTML / CSS, только хейткор.

Конечно же речь не идет (пока) о каких-то восхитительной сложности играх, но вы только вдумайтесь: никаких скриптов.

План

Создадим подобие всем известной игры Duck hunter, что там будет:

• Летающие утки
• В них можно стрелять
• За это начисляются очки

Для нашей разметки понадобится совсем немного

<!-- Утки -->
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">
<input type="checkbox" class="duck">

<!-- Очки -->
<div class="score"></div>

Собственно все.
Основная задумка как раз в том, что утки — это летающие чекбоксы, которые имеют два состояния: checked и не checked.
Да и стилизовать чекбоксы мы не можем, поэтому в разработку пойдут псевдоэлементы :before и :after.

background: url(../img/duck_light.png) no-repeat left center;

Заставим летать их с помощью css анимаций

Банальная анимация

@keyframes utkaFly {
        0%{
                left: 150%;
                top:10%;
        }
        25%{
                left: 80%;
                top:50%;
        }
        50%{
                left: 50%;
                top:30%;
        }
        75%{
                left: 30%;
                top:40%;
        }
        100%{
                left: -50%;
                top:10%;
        }
}

На этом первый пункт закончен, утки есть и они летают, ничего сложного.

Убей утку

Тк псевдоэлементы находятся внутри блоков-родителей, то клик по ним (псевдоэлементам) вызовет событие клика по чекбоксам. Таким образом, нам даже не понадобятся label'ы, чекбоксы изменят свое состояние на checked по клику на [type=checkbox]:before.

А когда мы кликаем по уткам? Правильно, когда стреляем в них. Соответственно, при попадании утка должна умереть, очки начислиться. Смерть утки обыграем селектором .duck:checked. Правда есть тут один подводный камушек — полет утки — это анимация, а стили анимации имеют преимущество, поэтому просто задать, например

left: -50%;
opacity: 0;
z-index: -5;

не получится.

Что может быть сильнее анимации (а плане приоритета)? Только другая анимация. Поэтому умершая утка будет позиционироваться с помощью анимации

@keyframes utkaDie {
        0%{
                left: -50%;
        }
}

Собственно отрицательное позиционирование утки нужно только для того, чтобы она больше не засоряла игровое пространство и нельзя было на нее случайно кликнуть, убрав у чекбокса состояние checked.

Считаем очки

К сожалению, css не позволяет напрямую вычислять количество элементов с определенным селектором на странице. Напомню, что нам нужно узнать количество «уток» в состоянии checked. Но есть функция counter-increment.
Свойство counter-increment увеличивает значение счетчика на единицу, имя которого мы укажем.

.duck:checked{
        counter-increment: score;
}

Запись выше означает, что каждый элемент, подходящий под селектор .duck:checked увеличивает наш счетчик score (название произвольное). Отметили чекбокс — счетчик увеличился, сняли отметку — тут же уменьшился.

Хорошо, некий внутренний счетчик есть, осталось отобразить его в качестве результата игры. Сделаем это, конечно же, с помощью css-свойства content

.score:after{
        content: counter(score);
}

Итог

Мои личные выводы:

1. Современные технологии удивляют
2. Если на хорошем уровне владеешь хоть одной технологией, уже можешь творить что-то интересное (так что хватит ныть, что ты всего лишь верстальщик)
3. Сверстать игру можно

Ресурсы

Это всего-лишь концепт, можно еще много-чего доработать.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.