Дисклеймер: перевод статьи публикуется с одобрения оригинального автора

Поиграть можно тут (Chrome/Edge), исходный код здесь, текст статьи ниже.

На этой неделе я прочитал статью Брайана Брауна — "Я всё ещё продолжаю экспериментировать с чекбоксами". Там он рассказывал про свою библиотеку Checkboxland.

JavaScript-библиотека для отображения текста и анимаций на сетке из чекбоксов

Это довольно приятная библиотека. Её API и документация лучше некоторых библиотек, с которыми мне приходится иметь дело на работе. С её помощью можно рендерить текст, фигуры, изображения и видео. Есть низкоуровневое API. В ней есть всё, что надо. Брайан использовал Checkboxland для создания шикарных интерактивных анимаций.

Кто-то на Hacker News прокомментировал статью:

Я не думаю, что вы исчерпаете все возможности библиотеки, до тех пор пока не отренедерите с её помощью DOOM

После проверки, что Брайан ещё не взялся за реализацию этой идеи, я начал скрещивать Checkboxland и WebAssembly-порт DOOM Корнелиуса Дайкменна.

Корнелиус во всех деталях описывает процесс портирования DOOM в README. Я взял его порт за основу и написал glue-код для интеграции с Checkboxland.

В моём проекте DOOM запускается с помощью WebAssembly и рендерится в невидимый <canvas>. Я использую HTMLCanvasElement.captureStream() для его преобразования в MediaStream. Элемент <video> отображает MediaStream и передаётся методу renderVideo из Checkboxland. Я экспериментировал с разными пороговыми значениями, чтобы картинка получилась настолько чёткой, насколько это возможно. Одно из возможных улучшений — использовать что-то похожее на дизеринг.

Элемент <video> тоже можно было спрятать, но по моим наблюдениям пользователи не могли выйти из главного меню без посторонней помощи, если они не видели оригинальную картинку.

Наш экран — это сетка 160 на 100, состоящая из нативных чекбоксов. С более высоким разрешением FPS падал совсем низко. Изображение в начале статьи из ранней версии с разрешением 320x200.

const cbl = new Checkboxland({
  dimensions: "160x100",
  selector: "#checkboxes",
});

Стигматизированное CSS-свойство zoom используется для уменьшения размера чекбоксов. Использование transform: scale(x) приводило к худшей производительности и качеству картинки. К сожалению, это означает, что пользователи Firefox должны вручную уменьшить масштаб страницы.

Эта нестандартное свойство, и оно не находится в процессе стандартизации. Не используйте его на публичных сайтах — оно не будет работать у всех пользователей.

События нажатия клавиш форвардятся в скрытый <canvas>, чтобы избежать проблем с фокусом.

const forwardKey = (e, type) => {
  const ev = new KeyboardEvent(type, {
    key: e.key,
    keyCode: e.keyCode,
  });
  canvas.dispatchEvent(ev);
};

document.body.addEventListener("keydown", function (e) {
  forwardKey(e, "keydown");
});

document.body.addEventListener("keyup", function (e) {
  forwardKey(e, "keyup");
});

На время загрузки и компиляции WebAssembly-модуля на сетке отображается сообщение с помощью метода print:

После загрузки выводится сообщение о том, что нужно где-нибудь кликнуть, чтобы инициализировать <video>. После клика запускается игра!

Пока вы всё ещё тут, вы знали, что Билл Гейтс однажды поместил себя в DOOM, чтобы прорекламировать Windows 95?

Примечание переводчика: если вам понравися перевод, то вам скорее всего понравится мой телеграм-канал, где я публикую рецензии на статьи про веб-стандарты, производительность и т.п.