How to make a simple maze game: Part 3, Rendering the Game Board

Since the last post just focused on one major function, I thought I would do the same today. You’ve seen this function called in the first two posts, it renders the game board. The first thing it does is clear all of the cells in the game board, that is it removes all the children of “stage” which is the div that holds all of the elements of the game play part of the game – characters, items in the game like gold coins or monkeys, the player.

// THIS FUNCTION DRAWS THE GAME ;

function render() {
    //Clear the stage of img cells
    //from the previous turn

    if (stage.hasChildNodes()) {
        for (var i = 0; i < rows * columns; i++) {
            stage.removeChild(stage.firstChild);
        }
    }

    //Render the game by looping through the map arrays
    for (var row = 0; row < rows; row++) {
        for (var column = 0; column < columns; column++) {
            //Create a img tag called cell
            var cell = document.createElement("img");

            //Set it's CSS class to "cell"
            cell.setAttribute("class", "cell");

            //Add the img tag to the <div id="stage"> tag
            stage.appendChild(cell);

This sets up two loops, one nested inside the other, so for every row, for every column within the row, we are going to create a new image element. We are going to give that img a class of  ‘cell’ and add it to the stage div, essentially building the game cell by cell. Below, we are going to find the  correct image file for a cell based on the value assigned to the number in the map in the first post. So, if the second column in the fourth row has a value of 0 (which it does), that value was set to be “inside” so when I come to this cell it is going to have the src for the image, that is the picture displayed, be inside.png.  If the cell has the value of 5 (=monkey) then it will show the image for the monkey.

Now, I really did not have to set the values for 0 – 7 to be anything. I could have just used the numbers, but as you can see here, it is pretty easy to remember that in the case of a monkey it should be the monkey image as opposed to “What did 5 represent?”

            //Find the correct image for this map cell
            switch (map[row][column]) {
                case inside:
                    cell.src = "aztech_pyramid_art/inside.png";
                    break;

                case squash:
                    cell.src = "aztech_pyramid_art/squash.png";
                    break;

                case rock:
                    cell.src = "aztech_pyramid_art/rock.png";
                    break;

                case head_dress:
                    cell.src = "aztech_pyramid_art/head_dress.png";
                    break;

                case monkey:
                    cell.src = "aztech_pyramid_art/monkey.png";
                    break;
                case goldcoin:
                    cell.src = "aztech_pyramid_art/coin.png";
                    break;
                case air:
                    cell.src = "aztech_pyramid_art/air.png";
                    break;
                case feather:
                    cell.src = "aztech_pyramid_art/feather.png";
                    break;
            }

            //Add the player from the gameObjects array
            switch (gameObjects[row][column]) {
                case player:
                    cell.src = "aztech_pyramid_art/player_idle_right.png";
                    break;
            }

The top position for the new cell is going to be the number of rows times the size of each cell + “px” .So, if this is in the third row, since the cells are 90px squares it is going to be 270p pixels from the top. Note that only one size value is used because these are squares so row height and column width are the same. The left position for the cell is the number of the column, times cell size + px.

            //Position the cell
            cell.style.top = row * size + "px";
            cell.style.left = column * size + "px";
        }
    }

This gives the initial points for wealth and health.

    output.innerHTML = gameMessage;
    output.innerHTML = "Wealth: " + gold + ", Health: " + health;
}

Every time the game board is redrawn by calling the render function, all of the cells and the game message with the points will be updated.

Maria (our CEO) thinks these posts are a waste of time because people who buy games for their kids are too busy taking their kids to soccer practice, softball and dance class to read blogs on coding games.

Prove her wrong by buying our games. 

or one of our cool shirts – great for wearing while coding.