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

Логика этого проста, как и в первом уроке, мы создадим свойство для нашего магазина, используя нашу функцию, но перед этим мы немного изменим код. На этот раз это будет свойство entity, которое будет хранить сетку со всеми комнатами, и используя это, мы поместим все внутри него.

let dungeon = createDungeon();
let firstStore = {
 entities: createEntities(dungeon) 
};

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

ReactDOM.render(
 <Dungeon   
    entities={firstStore.entities}
/>,
 document.getElementById(“container”)
);

Давайте начнем писать нашу функцию и определять наши объекты

const createEntities (gameMap, level = 1) => {
 //they are all arrays because we will use
// pop() with an (while array has length > 0) loop
 
 const bosses = [];
 const enemies = [];
 const exits = [];
 const potions = [];
 const weapons = [];
 const players = [];
}

Прежде чем заполнять наши массивы, я хочу сосредоточиться на том, как мы будем использовать их в нашей функции. Итак, нам нужно создать метод, который будет случайным образом размещать все сущности в ячейках этажа на игровой карте, и мы делаем это, используя forEach () метод.

Теперь, когда логика ясна, мы можем заполнить наши массивы.

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

Поскольку теперь у нас есть разные типы, мы также обновляем наш CSS.

Последнее, что мы пропускаем, — это включение режима тумана. Подход в этом случае будет очень простым: мы задаем нашему flex-контейнеру серый цвет фона, и, используя непрозрачность каждой ячейки и только что созданное свойство DistanceFromPlayer, мы создаем иллюзию туман.

И вуаля, наш код теперь закончен, надеюсь, вам понравился этот урок, в следующем мы начнем использовать Redux и заставим нашего игрока перемещаться по подземелью.

Часть 3 → ТУТ