Темани Афиф продолжает удивлять. На этот раз он показывает по шагам, как на HTML и CSS сделать игру, которая работает с кнопками-стрелками на клавиатуре для передвижения персонажа по экрану. В демке Марио собирает монетки на время и уклоняется от гумб.
1. Стрелки меняют положение скроллбара в контейнере. То есть если у нас есть большой контейнер со скроллбарами, мы можем как-то реагировать на стрелки, если скроллбар двигается.
2. Свежее свойство
animation-timeline: scroll(neasert inline), scroll(nearest block); позволяет привязать анимацию к положению скролла. То, что нам нужно.3. Прячем сами скроллбары через
scrollbar-width: none;.4. Размечаем кифреймы по каждой оси, чтобы получить нужные нам позиции монеток. В нужных кадрах выставляем значения CSS-переменных в 1 как признак того, что та или иная монетка собрана.
5. Используем Style Queries
@container style(...), чтобы менять холст под значения переменных.6. Щедро намазываем прототип препроцессорами, чтобы не писать весь этот код руками. На сдачу получаем возможность использовать рандом для генерации нескольких уровней.
7. Так как игра на скроллбарах, управление мышкой получаем из коробки.
Жду, когда Doom запустят на HTML+CSS и таких вот хаках. Кажется, недолго осталось.
https://frontendmasters.com/blog/how-keyboard-navigation-works-in-a-css-game/
