Игра на голом 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);
}
Итог
Мои личные выводы:
- Современные технологии удивляют
- Если на хорошем уровне владеешь хоть одной технологией, уже можешь творить что-то интересное (так что хватит ныть, что ты всего лишь верстальщик)
- Сверстать игру можно
Ресурсы
Это всего-лишь концепт, можно еще много-чего доработать.
