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

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

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

План

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

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

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

1
2
3
4
5
6
7
8
9

<!-- Утки -->
<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.

1

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

@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. Правда есть тут один подводный камушек — полет утки — это анимация, а стили анимации имеют преимущество, поэтому просто задать, например:

1
2
3

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

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

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

1
2
3
4
5

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

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

Считаем очки

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

1
2
3

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

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

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

1
2
3

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

Итог

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

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