Как реализована анимация в игре 2048 на JavaScript?
ПрограммированиеИгрыJavascript
Демченко ВладиславРазработка на JavaScript
· 3,6 K
Вся анимация там сделана средствами css. Всего анимаций три:
- Появление нового блока
- Слияние двух блоков в один
- Перемещение блока
Анимация появления и слияния блоков сделана через масштабирование элемента:
@include keyframes(pop) {
0% {
@include transform(scale(0));
}
50% {
@include transform(scale(1.2));
}
100% {
@include transform(scale(1));
}
}Перемещение блока сделано через изменение его координат. В данной игре не используется canvas, каждый блок на игровой сетке — это обычный div с применёнными стилями. Позиционирование блока на сетке происходит через задание элементу определённого класса. Например, для помещения блока в нижний правый угол ему задаётся класс tile-position-4-4 со следующим содержимым:
transform: translate(363px, 363px);Эти классы сгенерированы автоматически через цикл с помощью SCSS (используется директива @for).
Ко всем блокам применено свойство transition:
position: absolute;
transition: 100ms ease-in-out;
transition-property: transform;Поэтому при изменении своих координат блок не перепрыгивает резко, а плавно скользит от одного состояния к другому.
Все упомянутые стили и классы находятся в файле main.scss
Для создания анимации в браузере есть две базовые возможности.
- Использование css в любом его проявлении.
- Использование тега canvas и взаимодействие с ним по средствам js.