#2 Building a JavaScript & HTML Browser RPG: Game grid

In this post, the third installment in the series, we’ll continue from last time by filling our game-board with tiny DOM squares, which will serve as tiles in our browser game.

I see many tutorials serving their game through the <canvas> element, which I suppose makes it easier to utilize the magic and flexibility of JavaScript — but for this game, we will serve our game directly in the browsers DOM elements!

Let us begin.

Will populate your .board-container element with <tile> elements

You’ll also need to change your CSS:

Appearance of the game tile. Notice the hover effect for interactiveness.

In an earlier post, we already specified the styling for the .board-container class. We furthermore want to make that class display:flex; to allow the tiles to be stacked by row. I’m also adding a justify-content: center; for good measure.

Above code should result in the layout below.

Our HTML RPG so far. Notice the greenyellow color on the top-right of our game-board, indicated a mouse-hover.

We have now populated our .board-container with <tile> elements. While this is not an “official” DOM element, we don’t really care. They could’ve been <div> elements with a .tile class, but I thought it would be cooler with <tile>s.

Currently our .board-container doesnt handle overflow that well, letting the grid, well, overflow into the other containers. Though this is only relevant in the occasion of a window resize, this could be fixed by possibly setting the .tile width and height to a more responsive format, perhaps 4% or similar. We could also implement an eventListener for resizing the window, but that will be another post.

Next post we will begin implementing a player unit as well as movement.