Создание мини-игры «Шкатулка» с помощью JS + CSS / Хабр

Привет!

Меня зовут Сергей, я фронтенд-разработчик отдела спецпроектов KTS. Наш отдел занимается разработкой веб-приложений для промокампаний.

Год назад перед нами встала задача: сделать игру-квест с диалогами, 360-панорамой, drag-n-drop, звуками и мини-играми.

В этой статье расскажу про последнюю часть: как сделать мини-игру со звуками с помощью react, styled-components, mobx и howler.

Надеюсь, материал будет полезен начинающим реактивным разработчикам.

Что будет в статье:

Правила
Создаем игровое поле. 12 шагов
Создаем вращение для блоков. 10 шагов
Реализуем анимацию вращения. 10 шагов
Создаем звуки. 3 шага
Заключение

1 — Правила

Мы имеем 12 блоков, 3 из которых уникальные. Уникальные блоки необходимо установить в нужные позиции.

Игровое поле поделено на 3 круга по 6 блоков, которые вращаются по часовой стрелке.

Блоки нарисуем с помощью абсолютного позиционирования, для анимации вращения нарисуем оверлей. Основные блоки на время вращения скроем.

2 — Создаем игровое поле. 12 шагов

Шаг 1. Для начала сделаем конфиг игры. Перечислим виды блоков — один обычный и три уникальных:

export enum BlocksEnum {
  regular = "regular",
  red = "red",
  blue = "blue",
  green = "green"
}

Шаг 2. Перечислим изображения блоков:

export const blocksImages: Record<BlocksEnum, string> = {
  [BlocksEnum.regular]: require("./img/block-regular.png"),
  [BlocksEnum.red]: require("./img/block-red.png"),
  [BlocksEnum.blue]: require("./img/block-blue.png"),
  [BlocksEnum.green]: require("./img/block-green.png")
};

Блоки будем хранить в виде массива, где индекс — это позиция блока на игровом поле, а значение — вид блока в этой позиции, BlocksEnum:

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

export enum CorrectEnum {
  red = "1",
  green = "7",
  blue = "9"
}

Шаг 5. Также перечислим, какие виды блоков должны находиться в соответствующих индексах:

export const correctIndexes: Record<CorrectEnum,  BlocksEnum> = {
  [CorrectEnum.red]:  BlocksEnum.red,
  [CorrectEnum.green]:  BlocksEnum.green,
  [CorrectEnum.blue]:  BlocksEnum.blue,
};

Далее при каждом вращении мы будем перебирать этот объект и по индексам CorrectEnum сравнивать с текущим массивом блоков. Для хранения состояний и логики будем использовать MobX. Он позволяет создавать локальное хранилище, или стор, и использовать его в нужном компоненте.

Само хранилище — обычный объект. Вся магия в том, что мы помечаем объекты, которые влияют на отображение компонента как наблюдаемые (observable), и делаем наблюдаемым сам компонент (observer).

Так различные сайд-эффекты не будут влиять на перерисовку компонента. Подробнее можно прочитать здесь.

Шаг 6. Создадим хранилище с методом перемешивания:

import { makeObservable, observable, action } from "mobx";

export class BoxStore {
  // будем хранить массив из 12 видов блоков (9 обычных и 3 уникальные)
  blocks: BlocksEnum[] = [];
  constructor() {
		makeObservable(this, {
      blocks: observable,
      isAnimation: observable,
      rotationIndex: observable,
      rotate: action.bound,
      shuffle: action.bound,
      setAnimation: action.bound,
    });
	  this.shuffle();
  }
	shuffle(): void {
    this.blocks = [
      ...new Array(9).fill(BlocksEnum.regular),
      BlocksEnum.red,
      BlocksEnum.blue,
      BlocksEnum.green
    ].sort(() => Math.random() - 0.5);
    // перемешиваем еще раз, если хотя бы один уникальный блок стоит на нужном месте
    if (this.isOneCorrect) {
      this.shuffle();
    }
  }
	get isOneCorrect(): boolean {
    return Object.keys(correctIndexes).some((index) =>
      this.isCorrectIndex(index)
    );
  }
	 isCorrectIndex(index: number | string): boolean {
    return correctIndexes[index] === this.blocks[index];
  }
}

Шаг 7. У нас будет родительский компонент, компонент блока и компонент с оверлеем для вращения. Поэтому создадим контекст, чтобы иметь доступ к хранилищу в каждом из этих компонентов:

import { createContext } from 'react';
export const BoxGameContext = createContext<BoxStore | null>(null);
export const useStore = <T>(context: React.Context<T | null>): T => {
  const data = useContext(context);
  if (!data) {
    throw new Error("Using store outside of context");
  }
  return data;
};

Шаг 8. Для абсолютного позиционирования нам понадобятся позиции блоков, поэтому опишем массив с ними:

export type PositionType = [number, number];
export const blocksPositions: PositionType[] = [
  [11.88, 22.93],
  /*…*/
];

Шаг 9. Теперь создадим основной React-компонент с игрой. Подключим к нему хранилище, пробежимся по массиву с позициями и нарисуем блоки:

import * as React from 'react';
import { observer } from 'mobx-react';

const Box: React.FC = () => {
	const [store] = React.useState(() => new BoxStore());
	return (
		/* Обернем игру в провайдер хранилища, 
    так он будет доступен в дочерних компонентах */
		<BoxGameContext.Provider value={store}>
			<BoxWrapper>
				{blocksPositions.map((position, i) => (
					<Block
						type={store[i]} // находим вид блока в этой позиции
						position={position}
						index={i}
						key={i}
					/>
				))}
			</BoxWrapper>
		</BoxGameContext.Provider>
	);
};

// Теперь рендером управляет MobX
export default observer(Box);

Шаг 10. Для отображения в браузере стилизуем BoxWrapper с помощью styled-components.

import styled from 'styled-components';

export const BoxWrapper = styled.div`
  background: url(${require(./img/box.jpg).default}) no-repeat center / contain;
  width: 69.7rem;
  height: 49rem;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;

Компонент Block выглядит так:

import { observer } from 'mobx-react';

export const generatePositionStyle = (position: PositionType) => ({
  top: position[0] + "rem",
  left: position[1] + "rem"
});

const Block: React.FC<Props> = ({ position, type, index }: BlockProps) => {
	const store = useStore(BoxGameContext);
	return (
		<BlockImg
			/* 
				Абсолютные позиции добавим в inline style, 
				чтобы избежать генерации множества css-классов 
				(количество позиций умножить на количество видов блоков) 
			*/
			style={generatePositionStyle(position)}
			type={type}
		/>
	);
};

export default observer(Block);

Шаг 11. Для блока и позиционирования оверлея с вращением нам понадобится радиус блока. Добавим его в конфиг:

export const BLOCK_RADIUS = 3.6;

Шаг 12. Стилизуем блок. Из конфига возьмем картинку по виду блока и радиус:

export const generateCicleStyle = (radius: number) => ({
  "border-radius": "50%",
  width: radius * 2 + "rem",
  height: radius * 2 + "rem"
});

export const BlockImg = styled.div<{
	type: BlocksEnum;
}>`
	position: absolute;
	${generateCicleStyle(BLOCK_RADIUS)};
	background: url(${(props) => blocksImages[props.type]}) no-repeat center / contain;
`;

У нас получилась заготовка внешнего вида. Теперь давайте вращать!

3 — Создаем вращение блоков. 10 шагов

Мы имеем три центральных блока. При нажатии на них соседние 6 вращаются по часовой стрелке.

Блоки мы храним в массиве, поэтому опишем последовательность индексов, в которых происходит вращение. П��и нажатии берем из хранилища вид блока по каждому индексу последовательности и меняем его с видом блока со следующим индексом.

Шаг 1. Перечислим индексы центральных блоков:

export enum RotationsEnum {
  topLeft = "4",
  topRight = "5",
  bottom = "8"
}

Шаг 2. Добавим метод в хранилище:

// 3 круга по 6 блоков
export const rotations: Record<RotationsEnum, number[]> = {
  [RotationsEnum.topLeft]: [0, 1, 5, 8, 7, 3],
  [RotationsEnum.topRight]: [1, 2, 6, 9, 8, 4],
  [RotationsEnum.bottom]: [4, 5, 9, 11, 10, 7]
};

Шаг 3. Добавим к индексам массив индексов вращения:

rotate(clickIndex: number): void {
	if (!rotations[clickIndex]) {
		return;
	}
	const blocks = [...this.blocks]; // создаем новый массов видов блоков
	const rotationsMap = rotations[clickIndex]; // берем массив индексов вращений
	// и перебираем его
	rotationsMap.forEach((rotationIndex: number, index: number) => {
		if (rotationsMap.length - 1 === index) {
			// меняем виды блоков по нулевому и последнему индексу вращения
			this.blocks[rotationsMap[0]] = blocks[rotationsMap[rotationsMap.length - 1]];
		} else {
			// меняем виды блоков по соседним индексам вращения
			this.blocks[rotationsMap[index + 1]] = blocks[rotationIndex];
		}
	});
}

Шаг 4. Проверяем, является ли этот блок вращающим, и вешаем store.rotate к элементу блока:

const isRotation = rotations[index];
/*…*/
<BlockImg
/*…*/
	onClick={isRotation  ?  ()  => store.rotate(index) : undefined}
/>

Шаг 5. Осталось добавить один геттер с проверкой правильных индексов, и основная логика готова:

get isCorrect(): boolean {
	return Object.keys(correctIndexes).every((block) =>
		this.isCorrectIndex(block)
	);
}

4 — Реализуем анимацию вращения. 10 шагов

Шаг 1. Напомню, пользователь нажимает на центральные блоки и тем самым вращает соседние. В хранилище добавим метод, меняющий индекс центрального блока:

isAnimation = false;
rotationIndex: number | null = null;
setAnimation(value: boolean, index?: number): void {
	this.isAnimation = value;
	this.rotationIndex = index || null;
}

Шаг 2. Добавим в конфиг длительность анимации:

export const ANIMATION_TIME = 500;

Шаг 3. Для обработки клика создадим функцию в компоненте <Block />:

const handleRotation = () => {
	if (store.isAnimation) {
		return;
	}
	store.setAnimation(true, index);
	setTimeout(() => {
		store.rotate(index);
		store.setAnimation(false);
	});
}

Шаг 4. Порядок блоков в хранилище изменяется только после анимации. На это время мы скроем блоки, которые участвуют в анимации, и нарисуем поверх новые. В Block.tsx добавим проверку:

const isHide = () => {
	if (!store.rotationIndex) {
		return false;
	}
	const rotationIndexes = rotations[store.rotationIndex];
	return Object.keys(rotationIndexes)
		.some((key) => rotationIndexes[key] === index);
};

Шаг 5. Обновим стиль блока:

export const BlockImg = styled.div<{
	/*…*/
	isHide?: boolean;
}>`
	/*…*/
	display: ${(props) => (props.isHide ? 'none' : 'block')};
`;

Шаг 6. Положим внутрь компонент-оверлей для ховера и анимации:

const withRotaionCircle = 
	isRotation && (!store.rotationIndex || store.rotationIndex === index);
<BlockImg
	/*…*/
	onClick={isRotation && !store.isCorrect ? handleRotation : undefined}
	isHide={isHide()}
	withRotaionCircle={withRotaionCircle}
>
	{withRotaionCircle && (
		<RotationCircle position={position} type={type} overlayIndex={index} />
	)}
</BlockImg>

Шаг 7. Добавим в конфиг угол поворота, радиус оверлея и смещение оверлея относительно центрального блока:

export const ROTATION_ANGLE = 360 / 6; // 6 блоков в круге
export const ROTATION_CIRCLE_RADIUS = 12.7; // радиус оверлея с анимацией

Шаг 8. Оверлей является дочерним элементом обычного блока, поэтому по умолчанию он позиционируется по верхнему левому краю родительского элемента. Чтобы выровнять оверлей по центру с родительским блоком, нужно найти разность половин их ширин и сдвинуть оверлей вверх и влево на эту разность. У нас как раз есть радиусы:

export const ROTATION_CIRCLE_SHIFT = ROTATION_CIRCLE_RADIUS - BLOCK_RADIUS;

Шаг 9. Создадим компонент RotationCircle:

const RotationCircle: React.FC<Props> = ({ position, type, index }: BlockProps) => {
	const store = React.useContext(BoxGameContext);
	const getPosition = (inCirclePosition: PositionType): PositionType => {
		return [
			inCirclePosition[0] - position[0] + ROTATION_CIRCLE_SHIFT,
			inCirclePosition[1] - position[1] + ROTATION_CIRCLE_SHIFT,
    ];
	};
	const rotate = store.isAnimation && store.rotationIndex === index;
	return (
		/* 
			Рисуем оверлей для вращающихся блоков
			Так как основные блоки на время анимации будут скрыты,
			будем рисовать временные блоки для анимации внутри оверлея
		*/
		<RotationCircleWrapper
			$rotate={store.isAnimation && store.rotationIndex === index}
			isCorrect={store.isCorrect}
		>
			{Object.keys(rotations[index]).map((rotationBlockIndex, i) => {
				// Проходимся по индексам вращений - рисуем блоки, которые будут вращаться
				const block = rotations[index][rotationBlockIndex];
				const blockPosition = getPosition(blocksPositions[block]);
				return (
					<BlockImg
						position={blockPosition}
						type={store.blocks[block]}
						key={i}
						$rotate={isRotate}
					/>
				);
			})}
			{/* Рисуем центральный блок */}
			<BlockImg
				position={getPosition(position)}
				type={type}
				isRotation
				$rotate={rotate}
			/>
		</RotationCircleWrapper>
	);
};

export default observer(RotationCircle);

Шаг 10. Стилизуем оверлей RotationCircleWrapper:

import styled, { css } from 'styled-components';

export const RotationCircleWrapper = styled.div<{
  $rotate: boolean;
  isCorrect: boolean;
}>`
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: rotate(0);
  will-change: transform, opacity;
  background: url(${require('./img/rotation-circle.svg').default}) no-repeat
    center / contain;
  ${generateCicleStyle(ROTATION_CIRCLE_RADIUS)}
  left: -${ROTATION_CIRCLE_SHIFT}rem;
  top: -${ROTATION_CIRCLE_SHIFT}rem;

  /* 
    Отключаем события для оверлея, фактически мы будем кликать на основной блок 
  */
  pointer-events: none;

  /* Переход для ховера */
  transition: opacity 0.2s linear;

  /* Активируем mixin в момент вращения */
  ${(props) => props.$rotate && rotationCircleMixin};

  /* Скрываем оверлей, когда головоломка решена */
  display: ${(props) => (props.isCorrect ? 'none' : 'block')};
`;

const rotationCircleMixin = css`
  transition: transform ${ANIMATION_TIME}ms linear;
  transform: rotate(${ROTATION_ANGLE}deg);
  opacity: 1;
`;

Внешний вид готов:

5 — Создаем звуки. 3 шага

Но какая игра без звуков? Они должны быть даже в мини-игре. Поэтому создадим аудиоконтроллер.

Для работы с аудио мы будем использовать Howler. Эта библиотека поддерживает аудиоконтексты для большинства браузеров, имеет большие возможности для управления воспроизведением и делает за нас множество низкоуровневой работы.

Шаг 1. Перечислим наши звуки:

export enum AudioEnum {
    boxRotate,
    boxOpened,
}

export const AUDIOS: Record<AudioEnum, HowlOptions> = {
  [AudioEnum.boxRotate]: {
    src: require('./sounds/box-rotate.mp3').default,
  },
  [AudioEnum.boxOpened]: {
    src: require('./sounds/box-opened.mp3').default,
  },
}

Шаг 2. Реализуем предзагрузку файлов и воспроизведение:

export class AudioController {
  audios: Partial<Record<AudioEnum, Howl>> = {};

	// в момент загрузки будем передавать массив ключей нужных звуков
  async preload(audios: AudioEnum[]): Promise<unknown> {
    const loadAudio = (key: AudioEnum) =>
      new Promise<void>((res) => {
        this.addAudio(key);
        const onLoad = () => res();
        this.audios[key]?.on("load", onLoad);
        this.audios[key]?.on("loaderror", onLoad);
        this.audios[key]?.load();
      });
    return Promise.all(audios.map(loadAudio));
  }

  addAudio(key: AudioEnum, audio?: HowlOptions): void {
    if (!(key in this.audios)) {
      this.audios[key] = new Howl(audio || AUDIOS[key]);
    }
  }

  play = (key: AudioEnum): Howl | null => {
    if (!(key in this.audios)) {
      this.addAudio(key);
    }
    const audio = this.audios[key];
    if (audio) {
      audio.play();
      return audio;
    }
    return null;
  };
}

Шаг 3. Добавим контроллер в наше хранилище:

export class BoxStore {
  /*...*/
  audioController = new AudioController();
  /*...*/
}

Теперь мы можем создать эффекты для аудио в компоненте <Box />.

Первый эффект выполнит предзагрузку звуков во время монтирования компонента, второй воспроизведет звук открытия шкатулки при решении:

React.useEffect(() => {
  store.audioController.preload([
    AudioEnum.boxOpened,
    AudioEnum.boxRotate,
  ]);
}, []);

React.useEffect(() => {
	if (store.isCorrect) {
		store.audioController.play(AudioEnum.boxOpened);
	}
}, [store.isCorrect]);

По клику в компоненте <Block /> будем воспроизводить звук вращения:

const handleRotation = () => {
    /*...*/
    store.audioController.play(AudioEnum.boxRotate);
    /*...*/
}

6 — Заключение

Добавим сообщение в <Box /> о решенной головоломке:

  <BoxWrapper>
    /*...*/
    {store.isCorrect && <Success>Try not. Do, or do not. There is no try.</Success>}
    /*...*/
  </BoxWrapper>

export const Success = styled.div`
  position: absolute;
  width: 100%;
  text-align: center;
  top: 1rem;
  font-size: 3rem;
  background: green;
  color: white;
`;

Шкатулка готова:

Готовый код лежит здесь.

Поиграть можно здесь.

Надеюсь, статья была интересной и полезной. Буду рад комментариям и советам по оптимизации.

В следующий раз расскажу, как сделать панораму на Three.js с кучей изображений, звуков и текста и не потеряться.

До встречи!

Другие статьи про frontend для начинающих:

Другие статьи про frontend для продвинутых:

Создание мини-игры «Шкатулка» с помощью JS + CSS