Создавать игры так просто, и каждый может это сделать. Давайте создадим интерактивную игру на основе темы фильма SAW с использованием JavaScript, HTML и CSS. Мы не будем использовать элемент холста для создания игры. Мы будем использовать библиотеку JavaScript Propeller. Вы можете проверить мой предыдущий рассказ, чтобы узнать, как пользоваться библиотекой Propeller.

Вот демо игры, которую мы будем делать:

Если вы хотите поиграть в игру - нажмите здесь.

Как играть?

Просто щелкните или коснитесь области «Щелкните здесь, чтобы начать». Когда игра начинается, три канавки внутри круглого лезвия меняют свое положение случайным образом. У вас будет 10 секунд, чтобы совместить все бороздки с горизонтальными маркерами, как показано в демонстрации выше. Выровнять пазы можно в любом порядке.

Окончательная структура проекта

Начнем с HTML

Добавление стилей с помощью SCSS

Приведенные выше HTML и SCSS гарантируют, что все элементы расположены идеально для игры.

JavaScript

Для круглого лезвия снаружи мы постоянно вращаем его, чтобы игра выглядела красиво и круто.

const bladeRotation = new Propeller(edge, { inertia: 1, speed: 1 });

Когда игра начинается, для каждой круговой канавки мы назначаем случайную позицию и убеждаемся, что это не будет окончательная правильная позиция. Когда канавка вращается, она добавляет эффект свечения, если игрок поворачивает ее в правильное положение. Когда вращение прекращается, мы проверяем, все ли канавки в правильном положении или нет. Если все канавки выровнены в правильное положение, игрок выигрывает.

let circle1Rotation = customPropeller("circle-1");
let circle2Rotation = customPropeller("circle-2");
let circle3Rotation = customPropeller("circle-3");
function customPropeller(element) {
 let el = geid(element);
return new Propeller(el, {
  angle: getRandomAngle(10, 170),
  inertia: 0,
  speed: 1,
  step: 10,
  stepTransitionTime: 100,
  stepTransitionEasing: "Linear",
  onRotate: function () {
   /* Add a glowing effect if the circle is in correct position */
   if (this.angle % 360 == 0 || this.angle == 0) {
    addClass(el, "glow");
   }
   else {
    removeClass(el, "glow");
   }
  },
  onDragStop: function () {
   checkIfUnlocked(this, element);
  },
 });
}

Я рекомендую вам попробовать сыграть в игру и закончить ее менее чем за 10 секунд. Если вы хотите увидеть проект полностью, он доступен на GitHub. Не стесняйтесь изменять или создавать свою собственную версию, создав ее ветвь.

Все тексты на тему SAW были созданы с сайта https://fontmeme.com/saw-font. Большое спасибо Джону Вонгу за разработку и предоставление мне ресурсов для создания этой игры.