React-Redux Dungeon Crawler -Part 2

Hello and welcome to part 2 of this series.In the previous tutorial we have created the grid and placed some random rooms. In this tutorial we will learn how to create the player, the fog, the items, the levels and the enemies.

The logic behind this is simple, like in the first tutorial we will create an property for our store making use of our function, but before we do that we change the code a little. This time it will be the entities property that will store the grid with all the rooms and using that, we will place everithing inside of it.

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

then, we will use this property so we can create the map inside of our component.More about this and the fog later.


Let’s begin writing our function and defining our entities

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 = [];

Before filling our arrays i want to focus on how we will make use of them in our function.So we need to create an method that will randomly place all the entities on to floor cells on the game map, and we do that using an forEach() method.

Now that the logic is clear we can fill our arrays.

Now let’s pass to the React part, since we have an entities prop we make use of it so we can render the new map and we add some console logs for ease of understanding.

Since now we have different types we update our CSS too.

The last thing we miss is enabling the fog mode.The aproach in this case will be very simple: we give our flex-container an grey background color, and using each Cell opacity and the newly created distanceFromPlayer property, we create the illusion of the fog.

Et voilà, our code now is finished,hope you enjoyed this tutorial, in the next one we will begin using Redux and make our player move around the dungeon.

Part 3 → HERE