Coding.Cookies

Building a Roguelike in Javascript - Part 7

Fri, 03 May 2013 00:30:00 EDT

This is the ninth post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the seventh part in Trystan's series. All the code for this part can be found at the part 7 tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js.

Our game currently has one simple level. In this post we are going to make our cave have a third dimension allowing our hero to venture deeper and deeper into the cave! I am going to take Trystan's approach of creating the entire world at once, allowing us to freely roam through the various levels without encountering loading screens / delays. This is going to be a long post as there is quite a lot to change, but hang in there - it will be worth it. I'd hate to finish a post without you have a working game, so I'm not going to split it into two parts.

Demo Link

The results after this post can be seen here

assets/tile.js

The first thing we are going to want to create is a tile which allows us to go up one level as well as a tile which allows us to go down a level. Traditionally, roguelikes use stairs for this, and represent stairs going up as < and similarly > for going down.

Game.Tile.stairsUpTile = new Game.Tile({
    character: '<',
    foreground: 'white',
    isWalkable: true
});
Game.Tile.stairsDownTile = new Game.Tile({
    character: '>',
    foreground: 'white',
    isWalkable: true
});

While we are here, we will also create a helper function which will return a list containing all 8 neighbors of a given tile. It will shuffle them using Array.prototype.randomize to prevent a bias, as or else we will always favor the top-left corner. Admittedly this may not be the best place for this code and if I find that there are too many coordinate helper functions I will move them to their own file.

Game.getNeighborPositions = function(x, y) {
    var tiles = [];
    // Generate all possible offsets
    for (var dX = -1; dX < 2; dX ++) {
        for (var dY = -1; dY < 2; dY++) {
            // Make sure it isn't the same tile
            if (dX == 0 && dY == 0) {
                continue;
            }
            tiles.push({x: x + dX, y: y + dY});
        }
    }
    return tiles.randomize();
}

assets/builder.js

As our map generation code is starting to get complicated, we are going to move all the generation code to this file. We will have a Builder object which will be responsible for generating all the tiles for a world. We can then use these tiles to create a Map object. When we generate our map, we are going to have two key variables. The first will be a 3D array representing the tile at each cell in the world. The second will be a 3D array assigning a region number to each cell in a world. Note that for both arrays, the depth will be the first dimension rather than the 3rd one as this will allow us to manipulate an entire depth layer at once.

We are going to split each individual Z level into a bunch of regions. A region is essentialy a grouping of tiles such that any tile in the region can reach all other tiles in the region without having to dig! Every non-walkable tile will have a region value of 0. All walkable tiles will have a region value starting at 1 designating which region they belong to. Here is an example map with the region numbers shown in red:

Let's start with our basic constructor:

Game.Builder = function(width, height, depth) {
    this._width = width;
    this._height = height;
    this._depth = depth;
    this._tiles = new Array(depth);
    this._regions = new Array(depth);
};

In order to build the tiles, we're going to create a helper function _generateLevel which consists of our old map generation code and generates a single level using ROT.Map.Cellular.

Game.Builder.prototype._generateLevel = function() {
    // Create the empty map
    var map = new Array(this._width);
    for (var w = 0; w < this._width; w++) {
        map[w] = new Array(this._height);
    }
    // Setup the cave generator
    var generator = new ROT.Map.Cellular(this._width, this._height);
    generator.randomize(0.5);
    var totalIterations = 3;
    // Iteratively smoothen the map
    for (var i = 0; i < totalIterations - 1; i++) {
        generator.create();
    }
    // Smoothen it one last time and then update our map
    generator.create(function(x,y,v) {
        if (v === 1) {
            map[x][y] = Game.Tile.floorTile;
        } else {
            map[x][y] = Game.Tile.wallTile;
        }
    });
    return map;
};

Using this function, we can now build our 3D tiles array! We are also going to want to create our 3D array of region numbers, starting out each cell as 0.

Game.Builder = function(width, height, depth) {
    // ...
    // Instantiate the arrays to be multi-dimension
    for (var z = 0; z < depth; z++) {
        // Create a new cave at each level
        this._tiles[z] = this._generateLevel();
        // Setup the regions array for each depth
        this._regions[z] = new Array(width);
        for (var x = 0; x < width; x++) {
            this._regions[z][x] = new Array(height);
            // Fill with zeroes
            for (var y = 0; y < height; y++) {
                this._regions[z][x][y] = 0;
            }
        }
    }
};

Now that we've got our arrays instantiated, we want to set up the regions for each depth level. In order to do this, we'll need a few helper methods. The first is going to be a method for filling the region that a certain tile belongs to using a flood fill technique. One way to visualize this is to suppose you had a water bucket and you dropped it on a particular tile - our approach then consists of simulating the water expanding out and covering all walkable tiles. Here is a great animation of this process to make things even more clear. Our function will accept a starting tile and a region number and spread out from there, changing the region of all tiles which should belong in the same region. It will return the number of tiles affected. Note that we will be flood filling in all eight directions, even though we only currently have 4-directional movement! We can easily extend our movement and I encourage you to do so as a challenge. We also create a helper function which makes sure a tile can actually be assigned a region.

Game.Builder.prototype._canFillRegion = function(x, y, z) {
    // Make sure the tile is within bounds
    if (x < 0 || y < 0 || z < 0 || x >= this._width ||
        y >= this._height || z >= this._depth) {
        return false;
    }
    // Make sure the tile does not already have a region
    if (this._regions[z][x][y] != 0) {
        return false;
    }
    // Make sure the tile is walkable
    return this._tiles[z][x][y].isWalkable();
}

Game.Builder.prototype._fillRegion = function(region, x, y, z) {
    var tilesFilled = 1;
    var tiles = [{x:x, y:y}];
    var tile;
    var neighbors;
    // Update the region of the original tile
    this._regions[z][x][y] = region;
    // Keep looping while we still have tiles to process
    while (tiles.length > 0) {
        tile = tiles.pop();
        // Get the neighbors of the tile
        neighbors = Game.getNeighborPositions(tile.x, tile.y);
        // Iterate through each neighbor, checking if we can use it to fill
        // and if so updating the region and adding it to our processing
        // list.
        while (neighbors.length > 0) {
            tile = neighbors.pop();
            if (this._canFillRegion(tile.x, tile.y, z)) {
                this._regions[z][tile.x][tile.y] = region;
                tiles.push(tile);
                tilesFilled++;
            }
        }

    }
    return tilesFilled;
}

In order to set up our map, we are going to iterate through each tile of each depth layer, and if it can be filled with a region, we try to fill it. If our region is too small (say 20 tiles or less were filled), then we are going to remove it by filling it with wall tiles. For the sake of simplicity when removing a region I will simply iterate through all tiles searching for tiles with a given region ID. While this may perform extra unnecessary lookups, it will keep the code much simpler.

// This removes all tiles at a given depth level with a region number.
// It fills the tiles with a wall tile.
Game.Builder.prototype._removeRegion = function(region, z) {
    for (var x = 0; x < this._width; x++) {
        for (var y = 0; y < this._height; y++) {
            if (this._regions[z][x][y] == region) {
                // Clear the region and set the tile to a wall tile
                this._regions[z][x][y] = 0;
                this._tiles[z][x][y] = Game.Tile.wallTile;
            }
        }
    }
}

// This sets up the regions for a given depth level.
Game.Builder.prototype._setupRegions = function(z) {
    var region = 1;
    var tilesFilled;
    // Iterate through all tiles searching for a tile that
    // can be used as the starting point for a flood fill
    for (var x = 0; x < this._width; x++) {
        for (var y = 0; y < this._height; y++) {
            if (this._canFillRegion(x, y, z)) {
                // Try to fill
                tilesFilled = this._fillRegion(region, x, y, z);
                // If it was too small, simply remove it
                if (tilesFilled <= 20) {
                    this._removeRegion(region, z);
                } else {
                    region++;
                }
            }
        }
    }
}

We are now going to connect the depth levels using their regions! For example if we have a region at level 1, we want to try to connect it to all regions that it overlaps with on the level below it. This will help us minimize the number of times where a player is actualy stuck, and so we could make digging have an actual cost in the future. To do this we first need to be able to find where two regions overlap, and then we iterate through each tiles and try to connect each region at most once with all other regions it overlaps. Again this code may not be the best performance-wise but, like Trystan says, as world generation only happens once it is acceptable.

// This fetches a list of points that overlap between one
// region at a given depth level and a region at a level beneath it.
Game.Builder.prototype._findRegionOverlaps = function(z, r1, r2) {
    var matches = [];
    // Iterate through all tiles, checking if they respect
    // the region constraints and are floor tiles. We check
    // that they are floor to make sure we don't try to
    // put two stairs on the same tile.
    for (var x = 0; x < this._width; x++) {
        for (var y = 0; y < this._height; y++) {
            if (this._tiles[z][x][y]  == Game.Tile.floorTile &&
                this._tiles[z+1][x][y] == Game.Tile.floorTile &&
                this._regions[z][x][y] == r1 &&
                this._regions[z+1][x][y] == r2) {
                matches.push({x: x, y: y});
            }
        }
    }
    // We shuffle the list of matches to prevent bias
    return matches.randomize();
}

// This tries to connect two regions by calculating 
// where they overlap and adding stairs
Game.Builder.prototype._connectRegions = function(z, r1, r2) {
    var overlap = this._findRegionOverlaps(z, r1, r2);
    // Make sure there was overlap
    if (overlap.length == 0) {
        return false;
    }
    // Select the first tile from the overlap and change it to stairs
    var point = overlap[0];
    this._tiles[z][point.x][point.y] = Game.Tile.stairsDownTile;
    this._tiles[z+1][point.x][point.y] = Game.Tile.stairsUpTile;
    return true;
}

// This tries to connect all regions for each depth level,
// starting from the top most depth level.
Game.Builder.prototype._connectAllRegions = function() {
    for (var z = 0; z < this._depth - 1; z++) {
        // Iterate through each tile, and if we haven't tried
        // to connect the region of that tile on both depth levels
        // then we try. We store connected properties as strings
        // for quick lookups.
        var connected = {};
        var key;
        for (var x = 0; x < this._width; x++) {
            for (var y = 0; y < this._height; y++) {
                key = this._regions[z][x][y] + ',' +
                      this._regions[z+1][x][y];
                if (this._tiles[z][x][y] == Game.Tile.floorTile &&
                    this._tiles[z+1][x][y] == Game.Tile.floorTile &&
                    !connected[key]) {
                    // Since both tiles are floors and we haven't 
                    // already connected the two regions, try now.
                    this._connectRegions(z, this._regions[z][x][y],
                        this._regions[z+1][x][y]);
                    connected[key] = true;
                }
            }
        }
    }
}

Now all we have to do is update the constructor!

Game.Builder = function(width, height, depth) {
    // ...
    for (var z = 0; z < this._depth; z++) {
        this._setupRegions(z);
    }
    this._connectAllRegions();
};

Finally we want to provide some simple getter methods to be able to access the generated data.

Game.Builder.prototype.getTiles = function () {
    return this._tiles;
}
Game.Builder.prototype.getDepth = function () {
    return this._depth;
}
Game.Builder.prototype.getWidth = function () {
    return this._width;
}
Game.Builder.prototype.getHeight = function () {
    return this._height;
}

assets/entity.js

Now that we've added a notion of depth, we must add a Z coordinate to each entity:

Game.Entity = function(properties) {
    // ...
    // Instantiate any properties from the passed object
    this._name = properties['name'] || '';
    this._x = properties['x'] || 0;
    this._y = properties['y'] || 0;
    this._z = properties['z'] || 0;
    this._map = null;
}
// ...
Game.Entity.prototype.setZ = function(z) {
    this._z = z;
}
// ...
Game.Entity.prototype.getZ = function() {
    return this._z;
}

We are also going to add a function which will allow us to simply update all 3 coordinates at once:

Game.Entity.prototype.setPosition = function(x, y, z) {
    this._x = x;
    this._y = y;
    this._z = z;
}

assets/map.js

This file will require some pretty substantial changes to keep track of the third dimension. First we have to change the constructor to keep track of the depth (and change how we get the width and height). We also add a simple getter.

Game.Map = function(tiles, player) {
    this._tiles = tiles;
    // cache dimensions
    this._depth = tiles.length
    this._width = tiles[0].length;
    this._height = tiles[0][0].length;
    // ...
}
Game.Map.prototype.getDepth = function() {
    return this._depth;
};

Now we need to update almost all our helper functions in order to have a third dimension. This is pretty tedious and so to save space I will simply give you the code for it, however feel free to ask for any clarifications in the comments.

// Gets the tile for a given coordinate set
Game.Map.prototype.getTile = function(x, y, z) {
    // Make sure we are inside the bounds. If we aren't, return
    // null tile.
    if (x < 0 || x >= this._width || y < 0 || y >= this._height ||
        z < 0 || z >= this._depth) {
        return Game.Tile.nullTile;
    } else {
        return this._tiles[z][x][y] || Game.Tile.nullTile;
    }
};

Game.Map.prototype.dig = function(x, y, z) {
    // If the tile is diggable, update it to a floor
    if (this.getTile(x, y, z).isDiggable()) {
        this._tiles[z][x][y] = Game.Tile.floorTile;
    }
}

Game.Map.prototype.isEmptyFloor = function(x, y, z) {
    // Check if the tile is floor and also has no entity
    return this.getTile(x, y, z) == Game.Tile.floorTile &&
           !this.getEntityAt(x, y, z);
}

// ...
Game.Map.prototype.getEntityAt = function(x, y, z){
    // Iterate through all entities searching for one with
    // matching position
    for (var i = 0; i < this._entities.length; i++) {
        if (this._entities[i].getX() == x && this._entities[i].getY() == y &&
            this._entities[i].getZ() == z) {
            return this._entities[i];
        }
    }
    return false;
}
Game.Map.prototype.getEntitiesWithinRadius = function(centerX, centerY,
                                                      centerZ, radius) {
    results = [];
    // Determine our bounds
    var leftX = centerX - radius;
    var rightX = centerX + radius;
    var topY = centerY - radius;
    var bottomY = centerY + radius;
    // Iterate through our entities, adding any which are within the bounds
    for (var i = 0; i < this._entities.length; i++) {
        if (this._entities[i].getX() >= leftX &&
            this._entities[i].getX() <= rightX && 
            this._entities[i].getY() >= topY &&
            this._entities[i].getY() <= bottomY &&
            this._entities[i].getZ() == centerZ) {
            results.push(this._entities[i]);
        }
    }
    return results;
}

Game.Map.prototype.addEntity = function(entity) {
    // Make sure the entity's position is within bounds
    if (entity.getX() < 0 || entity.getX() >= this._width ||
        entity.getY() < 0 || entity.getY() >= this._height ||
        entity.getZ() < 0 || entity.getZ() >= this._depth) {
        throw new Error('Adding entity out of bounds.');
    }
    // Update the entity's map
    entity.setMap(this);
    // Add the entity to the list of entities
    this._entities.push(entity);
    // Check if this entity is an actor, and if so add
    // them to the scheduler
    if (entity.hasMixin('Actor')) {
       this._scheduler.add(entity, true);
    }
}

We also have to modify our function which generates a random position. I am going to add an argument allowing us to specify what level we want to generate a random floor position on. Finally we can add an entity at a random position on a given level.

Game.Map.prototype.getRandomFloorPosition = function(z) {
    // Randomly generate a tile which is a floor
    var x, y;
    do {
        x = Math.floor(Math.random() * this._width);
        y = Math.floor(Math.random() * this._height);
    } while(!this.isEmptyFloor(x, y, z));
    return {x: x, y: y, z: z};
}

Game.Map.prototype.addEntityAtRandomPosition = function(entity, z) {
    var position = this.getRandomFloorPosition(z);
    entity.setX(position.x);
    entity.setY(position.y);
    entity.setZ(position.z);
    this.addEntity(entity);
}

We now update our constructor to fix the player on level 1 as well as to generate more fungus so that it spreads out evenly throughout the dungeon.

Game.Map = function(tiles, player) {
    // ...
    // add the player
    this.addEntityAtRandomPosition(player, 0);
    // add random fungi
    for (var z = 0; z < this._depth; z++) {
        for (var i = 0; i < 25; i++) {
            this.addEntityAtRandomPosition(new Game.Entity(Game.FungusTemplate), z);
        }
    }
}

assets/entities.js

We have to update some of our mixins which take location into consideration. The first one we will update is the movement mixin. While we are here we will also add some code to handle changing depth levels.

Game.Mixins.Moveable = {
    name: 'Moveable',
    tryMove: function(x, y, z, map) {
        var map = this.getMap();
        // Must use starting z
        var tile = map.getTile(x, y, this.getZ());
        var target = map.getEntityAt(x, y, this.getZ());
        // If our z level changed, check if we are on stair
        if (z < this.getZ()) {
            if (tile != Game.Tile.stairsUpTile) {
                Game.sendMessage(this, "You can't go up here!");
            } else {
                Game.sendMessage(this, "You ascend to level %d!", [z + 1]);
                this.setPosition(x, y, z);
            }
        } else if (z > this.getZ()) {
            if (tile != Game.Tile.stairsDownTile) {
                Game.sendMessage(this, "You can't go down here!");
            } else {
                this.setPosition(x, y, z);
                Game.sendMessage(this, "You descend to level %d!", [z + 1]);
            }
        // If an entity was present at the tile
        } else if (target) {
            // If we are an attacker, try to attack
            // the target
            if (this.hasMixin('Attacker')) {
                this.attack(target);
                return true;
            } else {
                // If not nothing we can do, but we can't 
                // move to the tile
                return false;
            }
        // Check if we can walk on the tile
        // and if so simply walk onto it
        } else if (tile.isWalkable()) {        
            // Update the entity's position
            this.setPosition(x, y, z);
            return true;
        // Check if the tile is diggable, and
        // if so try to dig it
        } else if (tile.isDiggable()) {
            map.dig(x, y, z);
            return true;
        }
        return false;
    }
}

As we changed our getEntitiesWithinRadius function, we also have to change our sendMessageNearby function:

Game.sendMessageNearby = function(map, centerX, centerY, centerZ, message, args) {
    // ...
    // Get the nearby entities
    entities = map.getEntitiesWithinRadius(centerX, centerY, centerZ, 5);
    // ...
}

Finally we have to update our FungusActor to place newly grown fungus at the right depth level as well as use the updated sendMessageNearby.

Game.Mixins.FungusActor = {
    // ...
    act: function() { 
                // ...
                if (xOffset != 0 || yOffset != 0) {
                    // Check if we can actually spawn at that location, and if so
                    // then we grow!
                    if (this.getMap().isEmptyFloor(this.getX() + xOffset,
                                                   this.getY() + yOffset,
                                                   this.getZ())) {
                        var entity = new Game.Entity(Game.FungusTemplate);
                        entity.setPosition(this.getX() + xOffset, 
                            this.getY() + yOffset, this.getZ());
                        this.getMap().addEntity(entity);
                        this._growthsRemaining--;
                        // Send a message nearby!
                        Game.sendMessageNearby(this.getMap(),
                            entity.getX(), entity.getY(), entity.getZ(),
                            'The fungus is spreading!');
                    }
                }
                // ...   
    }
}

assets/game.js

Before we can change the screen input handling, there is one small chnage we must make. Because we will be using the greater than and less than keys as our stairs keys, we must enable the 'keypress' event handler, as these are special keys and the character code can only be extracted from the key press data.

// Bind keyboard input events
bindEventToScreen('keydown');
//bindEventToScreen('keyup');
bindEventToScreen('keypress');

assets/screens.js

Now that we've done all this work for generating our map usng the builder, let's update our PlayScreen's enter function.

Game.Screen.playScreen = {
    _map: null,
    _player: null,
    enter: function() {
        // Create a map based on our size parameters
        var width = 100;
        var height = 48;
        var depth = 6;
        // Create our map from the tiles and player
        var tiles = new Game.Builder(width, height, depth).getTiles();
        this._player = new Game.Entity(Game.PlayerTemplate);
        this._map = new Game.Map(tiles, this._player);
        //this._map = new Game.Map(map, this._player);
        // Start the map's engine
        this._map.getEngine().start();
    },
    // ...
}

Now our rendering code also needs to be updated to make sure we only render at the player's Z level.

Game.Screen.playScreen = {
    // ...
    render: function(display) {
        // ...
        // Iterate through all visible map cells
        for (var x = topLeftX; x < topLeftX + screenWidth; x++) {
            for (var y = topLeftY; y < topLeftY + screenHeight; y++) {
                // Fetch the glyph for the tile and render it to the screen
                // at the offset position.
                var tile = this._map.getTile(x, y, this._player.getZ());
                // ...
            }
        }
        // Render the entities
        var entities = this._map.getEntities();
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            // Only render the entitiy if they would show up on the screen
            if (entity.getX() >= topLeftX && entity.getY() >= topLeftY &&
                entity.getX() < topLeftX + screenWidth &&
                entity.getY() < topLeftY + screenHeight &&
                entity.getZ() == this._player.getZ()) {
                // ...
            }
        }
        // ...
    }
    // ...
};

Lastly we have to update our input handling! We have to add the cases for the stairs keys as update the movement to take the 3rd dimension into consideration. I also fixed a small bug which caused a turn to be executed when no valid key was pressed. Note that I had to use String.fromCharCode to check if it was a stairs key as they require SHIFT and the Javascript key code always returned period or commma.

Game.Screen.playScreen = {
    // ...
    handleInput: function(inputType, inputData) {
        if (inputType === 'keydown') {
            // If enter is pressed, go to the win screen
            // If escape is pressed, go to lose screen
            if (inputData.keyCode === ROT.VK_RETURN) {
                Game.switchScreen(Game.Screen.winScreen);
            } else if (inputData.keyCode === ROT.VK_ESCAPE) {
                Game.switchScreen(Game.Screen.loseScreen);
            } else {
                // Movement
                if (inputData.keyCode === ROT.VK_LEFT) {
                    this.move(-1, 0, 0);
                } else if (inputData.keyCode === ROT.VK_RIGHT) {
                    this.move(1, 0, 0);
                } else if (inputData.keyCode === ROT.VK_UP) {
                    this.move(0, -1, 0);
                } else if (inputData.keyCode === ROT.VK_DOWN) {
                    this.move(0, 1, 0);
                } else {
                    // Not a valid key
                    return;
                }
                // Unlock the engine
                this._map.getEngine().unlock();
            }
        } else if (inputType === 'keypress') {
            var keyChar = String.fromCharCode(inputData.charCode);
            if (keyChar === '>') {
                this.move(0, 0, 1);
            } else if (keyChar === '<') {
                this.move(0, 0, -1);
            } else {
                // Not a valid key
                return;
            }
            // Unlock the engine
            this._map.getEngine().unlock();
        } 
    },
    move: function(dX, dY, dZ) {
        var newX = this._player.getX() + dX;
        var newY = this._player.getY() + dY;
        var newZ = this._player.getZ() + dZ;
        // Try to move to the new cell
        this._player.tryMove(newX, newY, newZ, this._map);
    }
}

assets/index.html

We are finally done! All we have to do now is update our scripts:

1
2
3

Conclusion

Our dungeon now spans across multiple levels! Our hero can now descend into the deepest and darkest parts of the cave and then come back up. I'm terribly sorry about the length of this post, but as I've mentioned before I'd hate to leave you with something that you couldn't play with. In the next post we will add a field of vision so that we only see our hero's immediate surroundings. This will be a great addition and will add a nice touch of atmosphere to our cave.

I hope you enjoyed this post! Remember that all the code for this part can be found at the part 7 tag of the jsrogue repository. As always please feel free to post any comments whether questions, clarifications or criticism!

Thanks for reading,

Dominic

Building a Roguelike in Javascript - Part 6

Tue, 30 Apr 2013 00:30:00 EDT

This is the eight post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the sixth part in Trystan's series. All the code for this part can be found at the part 6 tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js.

In the last post we introduced basic combat allowing our hero to whack down any pesky fungi by simply bumping into them. We're now going to make this combat system a bit more realistic, giving attack and defense stats to entities and adding a bit of a random factor to attack damage. As we play our game we're also going to want to know what's going on so we're going to add a simple way to show messages on the screen.

Demo Link

The results after this post can be seen here

Combat - assets/entities.js

Our combat system will work by giving a defense value to Destructible mixins as well as an attack value to Attacker mixins. We will calculate the difference between the two (attackValue - defenseValue) and if the result is greater than zero, randomly select a damage amount in the range [1, attackValue - defenseValue ]. If our defense value is greater than or equal to our attack value, than we only do a damage of 1.

We're going to update the Destructible mixin first. In the last post this mixin always had 1 HP. We will change this so that an entity starts out with a given level of health (maxHp) which can be passed in the template. We also add some getters for the health point stats.

Game.Mixins.Destructible = {
    name: 'Destructible',
    init: function(template) {
        this._maxHp = template['maxHp'] || 10;
        // We allow taking in health from the template incase we want
        // the entity to start with a different amount of HP than the 
        // max specified.
        this._hp = template['hp'] || this._maxHp;
    },
    getHp: function() {
        return this._hp;
    },
    getMaxHp: function() {
        return this._maxHp;
    },
    // ...
};

Now we want to add the defense value. This is going to be a function which all Destructible mixins will implement and will simply return an int. By doing it this way we can have all sorts of neat effects, such as an entity who can be in a defensive mode to get a defense bonus or a chest which gets harder to break the further in the game we are. To make our base destructible mixin more flexible, let's update our constructor to allow specifying a defense value in template. For now we'll make the default defense value function return 0.

Game.Mixins.Destructible = {
    // ...
    init: function(template) {
        // ...
        this._defenseValue = template['defenseValue'] || 0;
    },
    getDefenseValue: function() {
        return this._defenseValue;
    },
    // ...
};

Now to take care of the attacking mixin. We have a bit of refactoring to do from last post. We are going to rename SimpleAttacker to Attacker.

Game.Mixins.Attacker = {
    name: 'Attacker',
    groupName: 'Attacker',
    // ...
}

Now we want to add an attack value function to the Attacker mixin similar to the defense value. As the default defense value was 0, our default attack value will be 1. We also want to add an option to read the attack value from the template used to create the mixin.

Game.Mixins.Attacker = {
    // ...
    init: function(template) {
        this._attackValue = template['attackValue'] || 1;
    },
    getAttackValue: function() {
        return this._attackValue;
    },
    // ...
};

Finally we update the default attack method to calculate the damage using the formula we mentioned above.

Game.Mixins.Attacker = {
    // ...
    attack: function(target) {
        // If the target is destructible, calculate the damage
        // based on attack and defense value
        if (target.hasMixin('Destructible')) {
            var attack = this.getAttackValue();
            var defense = target.getDefenseValue();
            var max = Math.max(0, attack - defense);
            target.takeDamage(this, 1 + Math.floor(Math.random() * max));
        }
    }
}

Our combat system is now much more flexible and the aspect of randomness certainly makes it more interesting. Let's update our templates to give our player and fungus some stats. Our player will have a max HP of 40 for now and an attack value of 10. Our fungi will have the default defense value and 10 HP.

// Player template
Game.PlayerTemplate = {
    character: '@',
    foreground: 'white',
    maxHp: 40,
    attackValue: 10,
    mixins: [Game.Mixins.Moveable, Game.Mixins.PlayerActor,
             Game.Mixins.Attacker, Game.Mixins.Destructible]
}
// Fungus template
Game.FungusTemplate = {
    character: 'F',
    foreground: 'green',
    maxHp: 10,
    mixins: [Game.Mixins.FungusActor, Game.Mixins.Destructible]
}

Messaging - assets/entities.js

Now that we can hit our fungi with varying damage, we're going to want to know how much damage we're inflicting as well as when we sucesfully kill an enemy. To do this, we're going to want to be able to display messages on the screen. To keep in line with our mixin system, we are going to have a mixin for entities which can receive messages. Our player will have this mixin. As the entities take their turn, they will fill up the player's message queue. When the player's turn finally comes, we will display these messages on the screen. We will need a way to clear this message queue as well in order to make sure we don't show the same messages every single turn.

Let's create the MessageRecipient mixin. This will add an internal array of messages to the entity, and provide a method for receiving a message, which will be a string for now, as well methdods for fetching and clearing the messages.

Game.Mixins.MessageRecipient = {
    name: 'MessageRecipient',
    init: function(template) {
        this._messages = [];
    },
    receiveMessage: function(message) {
        this._messages.push(message);
    },
    getMessages: function() {
        return this._messages;
    },
    clearMessages: function() {
        this._messages = [];
    }
}

We are now going to want a function to send a message to an entity if it can receive them. As this will be primarily used in the entity code, we will place the function here for now, although I may move it in the future if I can think of a better place or if we start needing more advanced message processing. Our message sending function will specify the entity we wish to target as well as the message itself. To make message formatting simple, I will be using the fantastic sprintf.js library by Alexandru Marasteanu, which is currently at commit 2e852e4b7e. This will allow us to send messages like so:

Game.sendMessage(player, "You hit the %s for %d damage", [name, damage]);

To install this library you will want to download the sprintf.min.js file (this is at the right commit) and add it to the assets folder.

Let's define our sending function! This will take at least a recipient entity and a message as arguments, as well as an optional array of parameters to pass to vsprintf, which is a function similar to sprintf that accepts it's formatting arguments as an array. If our recipient entity has the MessageRecipient mixin, then we will send them the message!

Game.sendMessage = function(recipient, message, args) {
    // Make sure the recipient can receive the message 
    // before doing any work.
    if (recipient.hasMixin(Game.Mixins.MessageRecipient)) {
        // If args were passed, then we format the message, else
        // no formatting is necessary
        if (args) {
            message = vsprintf(message, args);
        }
        recipient.receiveMessage(message);
    }
}

Now we are all set up to send some messages! Before we do that, we have some small updates to do to our entity templates. We will start using the name property to give a textual name to our entities so that our message could say something along the lines of 'you hit the fungus' rather than 'you hit the F'. We will also make the player a message recipient!

// Player template
Game.PlayerTemplate = {
    character: '@',
    foreground: 'white',
    maxHp: 40,
    attackValue: 10,
    mixins: [Game.Mixins.Moveable, Game.Mixins.PlayerActor,
             Game.Mixins.Attacker, Game.Mixins.Destructible,
             Game.Mixins.MessageRecipient]
}
// Fungus template
Game.FungusTemplate = {
    name: 'fungus',
    character: 'F',
    foreground: 'green',
    maxHp: 10,
    mixins: [Game.Mixins.FungusActor, Game.Mixins.Destructible]
}

Now we're ready to add some messages! We want a message to appear when our hero attacks another entity as well as when damage is received in the future! So let's modify the Attacker mixin's attack function.

Game.Mixins.Attacker = {
    // ...
    attack: function(target) {
        // If the target is destructible, calculate the damage
        // based on attack and defense value
        if (target.hasMixin('Destructible')) {
            var attack = this.getAttackValue();
            var defense = target.getDefenseValue();
            var max = Math.max(0, attack - defense);
            var damage = 1 + Math.floor(Math.random() * max);

            Game.sendMessage(this, 'You strike the %s for %d damage!', 
                [target.getName(), damage]);
            Game.sendMessage(target, 'The %s strikes you for %d damage!', 
                [this.getName(), damage]);

            target.takeDamage(this, damage);
        }
    }
}

Another potential message we could want is when an entity is destroyed! Let's modify the Destructible mixin!

Game.Mixins.Destructible = {
    // ...
    takeDamage: function(attacker, damage) {
        this._hp -= damage;
        // If have 0 or less HP, then remove ourseles from the map
        if (this._hp <= 0) {
            Game.sendMessage(attacker, 'You kill the %s!', [this.getName()]);
            Game.sendMessage(this, 'You die!');
            this.getMap().removeEntity(this);
        }
    }
}

Our system seems pretty straightforward for direct entity to entity messaging! We may have cases where we wish to broadcast a message to all entities within a certain distance! In order to do this, we'll need to create some helper functions in our map class first!

assets/map.js

We currently only have methods for returning the entity at a given position! We are going to add a method which will return an array containing all entities which are within a given radial distance from the specified center X and Y position. An example of radial distance is:

Game.Map.prototype.getEntitiesWithinRadius = function(centerX, centerY, radius) {
    results = [];
    // Determine our bounds
    var leftX = centerX - radius;
    var rightX = centerX + radius;
    var topY = centerY - radius;
    var bottomY = centerY + radius;
    // Iterate through our entities, adding any which are within the bounds
    for (var i = 0; i < this._entities.length; i++) {
        if (this._entities[i].getX() >= leftX &&
            this._entities[i].getX() <= rightX && 
            this._entities[i].getY() >= topY &&
            this._entities[i].getY() <= bottomY) {
            results.push(this._entities[i]);
        }
    }
    return results;
}

assets/entities.js

We are now ready to make a function for sending a message to all entities near a location. This function will be similar to the sendMessage function we previously defined, except it allows us to specify a location rather than a recipient entity. We will send the message to all entities within a given radius from the location (radius is fixed at 5 for now).

Game.sendMessageNearby = function(map, centerX, centerY, message, args) {
    // If args were passed, then we format the message, else
    // no formatting is necessary
    if (args) {
        message = vsprintf(message, args);
    }
    // Get the nearby entities
    entities = map.getEntitiesWithinRadius(centerX, centerY, 5);
    // Iterate through nearby entities, sending the message if
    // they can receive it.
    for (var i = 0; i < entities.length; i++) {
        if (entities[i].hasMixin(Game.Mixins.MessageRecipient)) {
            entities[i].receiveMessage(message);
        }
    }
}

To make sure that this works, lets make it so that when a new fungus grows it will send a message to the entities nearby! This may not be the most efficient code, but it will serve our purposes just fine for now! We will update the FungusActor mixin!

Game.Mixins.FungusActor = {
    // ...
    act: function() { 
        // ...
                    if (this.getMap().isEmptyFloor(this.getX() + xOffset,
                                                   this.getY() + yOffset)) {
                        var entity = new Game.Entity(Game.FungusTemplate);
                        entity.setX(this.getX() + xOffset);
                        entity.setY(this.getY() + yOffset);
                        this.getMap().addEntity(entity);
                        this._growthsRemaining--;

                        // Send a message nearby!
                        Game.sendMessageNearby(this.getMap(),
                            entity.getX(), entity.getY(),
                            'The fungus is spreading!');
                    }
        // ...
    }
}

The last thing we're going to want to do in this file is make it so that it clears the messages after they have been rendered to the screen. While we haven't done the actual rendering yet, we know that it will be done when we call Game.refresh in the PlayerActor mixin. So after we do this call, let's clear our messages!

// Main player's actor mixin
Game.Mixins.PlayerActor = {
    name: 'PlayerActor',
    groupName: 'Actor',
    act: function() {
        // Re-render the screen
        Game.refresh();
        // Lock the engine and wait asynchronously
        // for the player to press a key.
        this.getMap().getEngine().lock();        
        // Clear the message queue
        this.clearMessages();
    }
}

assets/screens.js

Now that our messaging system is up and running, let's start rendering them to the screen! For now we will simply render them in the top left corner. We have to make sure to render them after rendering the map! This may not be the most elegant location for them, and we may move them to a centralized message box in the future (or as a challenge try and modify the code to do that now!) but for now this will do. Luckily we can use the drawText function to wrap text and determine how many lines the text spanned across. This will allow us to easily messages that are too long to fit on one line.

Game.Screen.playScreen = {
    // ...
    render: function(display) {
        // ...
        // Get the messages in the player's queue and render them
        var messages = this._player.getMessages();
        var messageY = 0;
        for (var i = 0; i < messages.length; i++) {
            // Draw each message, adding the number of lines
            messageY += display.drawText(
                0, 
                messageY,
                '%c{white}%b{black}' + messages[i]
            );
        }
    },
    // ...
};

Now your hero can go around attacking and killing fungus and seeing feedback right on the screen! One last change I want to make before I finish off this post is to show the player's stats on the last row of the screen.

Game.Screen.playScreen = {
    // ...
    render: function(display) {
        // ...
        // Render player HP 
        var stats = '%c{white}%b{black}';
        stats += vsprintf('HP: %d/%d ', [this._player.getHp(), this._player.getMaxHp()]);
        display.drawText(0, screenHeight, stats);
    },
    // ...
};

assets/game.js

As we want to reserve the last line of the display for rendering the stats, we are going to increase the size of the display by 1.

var Game =  {
    // ...
    init: function() {
        // Any necessary initialization will go here.
        this._display = new ROT.Display({width: this._screenWidth,
                                         height: this._screenHeight + 1})
        // ...
    }
    // ...
}

index.html

We have to update our scripts to include the sprintf.js library.

1
2
3

Conclusion

This post was pretty significant towards pushing our game closer to a real roguelike game! We now have a more robust combat system as well as a nice way of sending messages to the player! In the next post we will be making our cave have multiple levels, so stick around as it's going to be exciting!

I hope you enjoyed this post! Remember that all the code for this part can be found at the part 6 tag of the jsrogue repository. As always please feel free to post any comments whether questions, clarifications or criticism!

Thanks for reading,

Dominic

Next Part

Part 7 - Deeper Into the Cave

Building a Roguelike in Javascript - Part 5b

Tue, 23 Apr 2013 00:30:00 EDT

This is the seventh post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the fifth part in Trystan's series. All the code for this part can be found at the part 5b tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js.

Today we're going to make it so that we can interact with our fungi! We're going to add a basic attack system which will simply remove an entity when our player attacks it. For those unfamiliar with roguelikes, attacking is generally done by bumping into or moving into the entity we wish to attack. We're also going to make the fungus entity spread randomly over time, eventually taking over our cave unless our hero chooses to rise to the task and attack every fungus!

Demo Link

The results after this post can be seen here

assets/map.js

Before we can get started with our attack system, we need a way to actually remove an entity from the map. One special consideration to make is that we must also remove the entity from the scheduler if they were an actor. So you're going to want to add the following function:

Game.Map.prototype.removeEntity = function(entity) {
    // Find the entity in the list of entities if it is present
    for (var i = 0; i < this._entities.length; i++) {
        if (this._entities[i] == entity) {
            this._entities.splice(i, 1);
            break;
        }
    }
    // If the entity is an actor, remove them from the scheduler
    if (entity.hasMixin('Actor')) {
        this._scheduler.remove(entity);
    }
}

When we implement the fungi spreading, we're going to make it spread to an adjacent tile. In order to do this, we'll need to check whether a tile is an empty floor tile. As this will be a pretty common thing to check for, let's create a helper function which will do just that so we have a central place to add in features:

Game.Map.prototype.isEmptyFloor = function(x, y) {
    // Check if the tile is floor and also has no entity
    return this.getTile(x, y) == Game.Tile.floorTile &&
           !this.getEntityAt(x, y);
}

While we're here, let's go ahead and update our getRandomFloorPosition to make use of this function:

Game.Map.prototype.getRandomFloorPosition = function() {
    // Randomly generate a tile which is a floor
    var x, y;
    do {
        x = Math.floor(Math.random() * this._width);
        y = Math.floor(Math.random() * this._width);
    } while(!this.isEmptyFloor(x, y));
    return {x: x, y: y};
}

The last change we're going to want to make is to decrease the number of initial fungi. Because they will be spreading throughout the dungeon it will be much more apparent if we start with a small number. Feel free to play around with the number! We have to change:

Game.Map = function(tiles, player) {
    // ...
    // add random fungi
    for (var i = 0; i < 50; i++) {
        this.addEntityAtRandomPosition(new Game.Entity(Game.FungusTemplate));
    }
}

We're now ready to make it so we can hack away at these pesky growing fungi!

assets/entities.js

In order to implement our basic attacking system, we're going to have two mixins. The first wil be a mixin denoting an entity that is destructible. For now the most basic mixin will have a certain number of hit points and a takeDamage function. The takeDamage function will subtract the damage caused by an attacker, and if the hit points are 0 or below, remove that entity from the map. For now all Destructible entities will have 1 hit point.

Game.Mixins.Destructible = {
    name: 'Destructible',
    init: function() {
        this._hp = 1;
    },
    takeDamage: function(attacker, damage) {
        this._hp -= damage;
        // If have 0 or less HP, then remove ourseles from the map
        if (this._hp <= 0) {
            this.getMap().removeEntity(this);
        }
    }
}

The second will be some kind of Attacker mixin, which has a sole method attack. When an entity chooses to attack a target, we will call the attack method with the target. Similar to the Actor mixin we implemented last post, the Attacker mixin will also be a common group (using the groupName) and we'll create more specific ones when necessary, allowing us to come up with really cool ways of attacking. To keep it simple, if our target is destructible, we will damage the target by 1 HP, removing it from the map.

Game.Mixins.SimpleAttacker = {
    name: 'SimpleAttacker',
    groupName: 'Attacker',
    attack: function(target) {
        // Only remove the entity if they were attackable
        if (target.hasMixin('Destructible')) {
            target.takeDamage(this, 1);
        }
    }
}

Now we need to update our templates to include these mixins! We want to add a SimpleAttacker and Destructible to the player's template as in the future the player will be attackable. We also want to add Destructible to the fungi.

// Player template
Game.PlayerTemplate = {
    character: '@',
    foreground: 'white',
    mixins: [Game.Mixins.Moveable, Game.Mixins.PlayerActor,
             Game.Mixins.SimpleAttacker, Game.Mixins.Destructible]
}
// Fungus template
Game.FungusTemplate = {
    character: 'F',
    foreground: 'green',
    mixins: [Game.Mixins.FungusActor, Game.Mixins.Destructible]
}

So now we have our attacking mixins set up and put in place. However we have to change our Moveable as well in order to make it so that if there is an entity present at the cell we wish to move to, and we are an attacker, than try to attack the entity!

// Define our Moveable mixin
Game.Mixins.Moveable = {
    name: 'Moveable',
    tryMove: function(x, y, map) {
        var tile = map.getTile(x, y);
        var target = map.getEntityAt(x, y);
        // If an entity was present at the tile
        if (target) {
            // If we are an attacker, try to attack
            // the target
            if (this.hasMixin('Attacker')) {
                this.attack(target);
                return true;
            } else {
                // If not nothing we can do, but we can't 
                // move to the tile
                return false;
            }
        // Check if we can walk on the tile
        // and if so simply walk onto it
        } else if (tile.isWalkable()) {        
            // Update the entity's position
            this._x = x;
            this._y = y;
            return true;
        // Check if the tile is diggable, and
        // if so try to dig it
        } else if (tile.isDiggable()) {
            map.dig(x, y);
            return true;
        }
        return false;
    }
}

Our attacking system is now put in place! At this point you can go ahead and try it out! If everything went well you should be able to go up to a fungus on the map, walk into it and it will dissapear! In a few posts we'll turn this into a real attacking system with stats and health and all sorts of other goodies, but for it's pretty pleasing to see what we've already accomplished!

The next step is to implement the fungus growth. Recall last post that the scheduling system worked by calling the act method of entities turn by turn. We had created an actor mixin for the fungus, but it didn't do anything yet. As this is called every time the fungus has a turn, this seems like it could be the perfect place to put our spreading logic!

We want each fungus to be able to spread in one of the eight adjacent squares, however to make it interesting we don't want to do it every turn. Instead we are going to make it so that every turn the fungus has a fixed chance of growing. We're also going to want to limit the number of times a fungus can grow to let's say 5. Remember that mixins have an optional init function which can be called when the mixin is created to add state to the fungus. For now let's make it set up our state with a counter keeping trakc of how many times we can grow.

Game.Mixins.FungusActor = {
    name: 'FungusActor',
    groupName: 'Actor',
    init: function() {
        this._growthsRemaining = 5;
    },
    act: function() { 
    }
}

At every turn, if a fungus can still grow we use Math.random, which returns a number between 0.0 and 1.0, to determine if it should grow this turn. If so, then we generate the coordinates of a random adjacent square and check if we can grow to it. If we can, we will spawn a new fungus at that position and update our counters!

Game.Mixins.FungusActor = {
    name: 'FungusActor',
    groupName: 'Actor',
    init: function() {
        this._growthsRemaining = 5;
    },
    act: function() { 
        // Check if we are going to try growing this turn
        if (this._growthsRemaining > 0) {
            if (Math.random() <= 0.02) {
                // Generate the coordinates of a random adjacent square by
                // generating an offset between [-1, 0, 1] for both the x and
                // y directions. To do this, we generate a number from 0-2 and then
                // subtract 1.
                var xOffset = Math.floor(Math.random() * 3) - 1;
                var yOffset = Math.floor(Math.random() * 3) - 1;
                // Make sure we aren't trying to spawn on the same tile as us
                if (xOffset != 0 || yOffset != 0) {
                    // Check if we can actually spawn at that location, and if so
                    // then we grow!
                    if (this.getMap().isEmptyFloor(this.getX() + xOffset,
                                                   this.getY() + yOffset)) {
                        var entity = new Game.Entity(Game.FungusTemplate);
                        entity.setX(this.getX() + xOffset);
                        entity.setY(this.getY() + yOffset);
                        this.getMap().addEntity(entity);
                        this._growthsRemaining--;
                    }
                }
            }
        }
    }
}

assets/screens.js

We are now just about ready to watch our fungus growth! We're going to reduce the map size as the fungus growing rapidly gets out of hand and depending on your computer may make movement very sluggish. So I've shrunk the map down to 100 by 48:

Game.Screen.playScreen = {
    // ...
    enter: function() {  
        var map = [];
        // Create a map based on our size parameters
        var mapWidth = 100;
        var mapHeight = 48;
        // ...
    }
    // ...
}

Conclusion

We've now got a cave which gets overrun by fungus which our hero can then go and hack away with our simple attacking system! In the next post we are going to start focusing on real combat as well as giving some feedbak to the player through messages.

I hope you enjoyed this post and that you'll stick around for the next part! Remember that all the code for this part can be found at the part 5b tag of the jsrogue repository. Also please feel free to post any comments whether questions, clarifications or criticism!

Thanks for reading,

Dominic

Next Part

Part 6 - Combat and Messages

Building a Roguelike in Javascript - Part 5a

Mon, 22 Apr 2013 00:30:00 EDT

This is the sixth post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the fifth part in Trystan's series. All the code for this part can be found at the part 5a tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js however there seemed to be an error in the rot.min.js file included in the github repository (it was missing ROT.Scheduler.Simple) so I fetched it again from the same commit. You may need to do the same. It can be obtained here.

Today's going to be an exciting post! We are going to add more entities to our cave so that the player is not alone! This is going to be a pretty significant step towards populating our cave with a variety of terrifying monsters. To keep it simple our first monster will be a fungus. This fungus won't move for the moment and we can't currently walk through it, but in the next post it will spread over time and we'll be able to clear it by walking through it! I'm warning you ahead of time - this post is quite long, but builds some pretty fundamental stuff.

Demo Link

The results after this post can be seen here

assets/entity.js

Before we do anything, we're going to add an extra field to the Entity class. We want an entity to be associated with a map. Let's first update the constructor:

Game.Entity = function(properties) {
    // ...
    // Instantiate any properties from the passed object
    this._name = properties['name'] || '';
    this._x = properties['x'] || 0;
    this._y = properties['y'] || 0;
    this._map = null;
    // ...
}

Now we'll also want our standard getter and setter:

Game.Entity.prototype.setMap = function(map) {
    this._map = map;
}
Game.Entity.prototype.getMap = function() {
    return this._map;
}

We are also going to add a way to group together mixins which offer a common interface. Consider the Moveable mixin we added last post. Suppose you wanted to have a ghost entity which could move through any type of cell and a molerat entity which could dig and move at the same time. Rather than creating an extremely complex and general Moveable mixin, we'd like to create a bunch of simple ones and just note that they offer the same common functionality. Once this is done, we'd like to be able to check if a mixin implements a given interface without being specific (eg. is it moveable rather than is it a ghost's moveable mixin). To do this we will add an optional groupName to mixins which acts similar to the name property but mixins implementing the same interface should have the same groupName.

var PlayerMoveableMixin = {
    name: 'PlayerMoveable',
    groupName: 'Moveable',
    tryMove: function(x, y){...}
}
var MoleratMoveableMixin = {
    name: 'MoleratMoveable',
    groupName: 'Moveable',
    tryMove: function(x, y){...}
}
var GhostMoveableMixin = {
    name: 'GhostMoveable',
    groupName: 'Moveable',
    tryMove: function(x, y){...}
}

Ideally we'd like to be able to test both specifically for a given mixin by passing either the name or the mixin itself, as well as testing generally by passing the group name:

// Testing specifically
entity.hasMixin('GhostMoveable')
entity.hasMixin(GhostMoveableMixin)

// Testing generally 
entity.hasMixin('Moveable')

To implement this we must first update the constructor to keep track of the group names as well as the mixin names:

Game.Entity = function(properties) {
    // ...
    // Create an object which will keep track what mixins we have
    // attached to this entity based on the name property
    this._attachedMixins = {};
    // Create a similar object for groups
    this._attachedMixinGroups = {};
    // Setup the object's mixins
    var mixins = properties['mixins'] || [];
    for (var i = 0; i < mixins.length; i++) {
        // Copy over all properties from each mixin as long
        // as it's not the name or the init property. We
        // also make sure not to override a property that
        // already exists on the entity.
        for (var key in mixins[i]) {
            if (key != 'init' && key != 'name' && !this.hasOwnProperty(key)) {
                this[key] = mixins[i][key];
            }
        }
        // Add the name of this mixin to our attached mixins
        this._attachedMixins[mixins[i].name] = true;
        // If a group name is present, add it
        if (mixins[i].groupName) {
            this._attachedMixinGroups[mixins[i].groupName] = true;
        }
        // Finally call the init function if there is one
        if (mixins[i].init) {
            mixins[i].init.call(this, properties);
        }
    }
};

Finally we need to update the hasMixin function to check the group names as well if we are checking with a string:

Game.Entity.prototype.hasMixin = function(obj) {
    // Allow passing the mixin itself or the name / group name as a string
    if (typeof obj === 'object') {
        return this._attachedMixins[obj.name];
    } else {
        return this._attachedMixins[obj] || this._attachedMixinGroups[obj];
    }
}

assets/map.js

We now need a way to keep track of our entities on the map. All our entities presently on the map are going to be stored in a list. We are also going to be using the ROT.Engine and ROT.Scheduler to manage our entities and make them take turns in the appropriate order. This system will be very important later on when entities start having different speeds so we will put it in the base right away. Let's update the constructor to reflect this:

Game.Map = function(tiles) {
    // ...
    // create a list which will hold the entities
    this._entities = [];
    // create the engine and scheduler
    this._scheduler = new ROT.Scheduler.Simple();
    this._engine = new ROT.Engine(this._scheduler);
};

We now want to provide a way to get the engine as well as all the entities on the map. Finally we'll need to be able to check if there is an entity at a given position.

Game.Map.prototype.getEngine = function() {
    return this._engine;
}
Game.Map.prototype.getEntities = function() {
    return this._entities;
}
Game.Map.prototype.getEntityAt = function(x, y){
    // Iterate through all entities searching for one with
    // matching position
    for (var i = 0; i < this._entities.length; i++) {
        if (this._entities[i].getX() == x && this._entities[i].getY() == y) {
            return this._entities[i];
        }
    }
    return false;
}

Before we can actually add entities to our maps, we need to look at how the scheduler actually works!

Scheduling and the Game Loop

The scheduling engine has a queue of all the entities and gives them a turn one by one. We're currently using the Simple scheduler which simply gives the entities turns in the order they were added to the queue, and allows us to mark some entities as being re-added into the queue when their turn is complete. In the future we will use a more complicated scheduler which will allow us for some entities to act faster than others.

The ROT.Engine object takes care of interacting with the scheduler and is started using start. It extracts the next entity from the scheduler and calls the act function on that entity, so we will need to define this function for all our entities that we want to be dynamic. We are going to do this with our mixin system we developed in the last post! Because of the nature of roguelikes, when it is the player's turn we want to wait until the player presses a key before we process the next turn. However the engine is continually running and so we won't be able to interact with our game if we simply start the engine! So when it is the player's turn we must lock the engine in order to wait for a key press, unlocking it when we are done.

Just to clarify, let's consider the game loop. Up until now, our game loop has consisted of rendering the screen once and then waiting for input, processing said input and then re-rendering the screen. Our new game loop will be structured like this:

Process all turns until it is the player's turn
Render the screen and lock the engine
Wait for a player to press a key, process it and then unlock the engine
Go back to step 1

assets/game.js

In order to get set up for our new game loop, there are some things we need to change. First of all, we will make it so that the screen no longer automatically renders after we call the screen's handleInput. This means screens will have to make a call to rerender the screen whenever they want the screen to be updated. Remember that switching screens will automatically render the screen, so we don't have to change anything in the menu screen.

To do this, we have to edit the code for the bindEventToScreen function in Game.init:

var Game = {
    // ...
    init: function() {
        // ...
        var bindEventToScreen = function(event) {
            window.addEventListener(event, function(e) {
                // When an event is received, send it to the
                // screen if there is one
                if (game._currentScreen !== null) {
                    // Send the event type and data to the screen
                    game._currentScreen.handleInput(event, e);
                }
            });
        }
        // ...
    },
    // ...
}

We are now going to add a helper function called refresh which will clear the screen and render the current screen to our Game namespace.

var Game = {
    // ...
    refresh: function() {
        // Clear the screen
        this._display.clear();
        // Render the screen
        this._currentScreen.render(this._display);
    },
    // ...
}

Finally we're going to update the code of our switchScreen function to use this refresh helper function to make sure we always go through the same route for re-rendering the screen.

var Game = {
    // ...
    switchScreen: function(screen) {
        // If we had a screen before, notify it that we exited
        if (this._currentScreen !== null) {
            this._currentScreen.exit();
        }
        // Clear the display
        this.getDisplay().clear();
        // Update our current screen, notify it we entered
        // and then render it
        this._currentScreen = screen;
        if (!this._currentScreen !== null) {
            this._currentScreen.enter();
            this.refresh();
        }
    }
}

This now gives us more control over when we re-render the screen, and will allow us to same some rendering calls in the future! If we made it so that the screen would render after each time we handled input, than we would end up re-rendering screen twice - once after handling the input and another time after processing all the turns.

assets/entities.js

We will be creating Actor mixins which will have a sole method act. We will use the group name Actor for all our actor mixins to allow us to easily check if a given entity needs to be scheduled. Let's create our player's actor mixin first. As I mentioned before we need to refresh the screen as well as lock the engine when it is the player's turn.

// Main player's actor mixin
Game.Mixins.PlayerActor = {
    name: 'PlayerActor',
    groupName: 'Actor',
    act: function() {
        // Re-render the screen
        Game.refresh();
        // Lock the engine and wait asynchronously
        // for the player to press a key.
        this.getMap().getEngine().lock();        
    }
}

Now we have to add this mixin to our player's template!

Game.PlayerTemplate = {
    // ...
    mixins: [Game.Mixins.Moveable, Game.Mixins.PlayerActor]
}

We will also be creating an Actor mixin for the fungus. Notice that both actor mixins have the same group name!

Game.Mixins.FungusActor = {
    name: 'FungusActor',
    groupName: 'Actor',
    act: function() { }
}

We're going to create a template for our fungus entity! They will show us a F on the screen, but feel free to play around with the template and make it look however you like! It's your game after all!

Game.FungusTemplate = {
    character: 'F',
    foreground: 'green',
    mixins: [Game.Mixins.FungusActor]
}

Finally we're going to change our Moveable mixin to make it so that we can't walk through a tile if an entity is present at that tile.

Game.Mixins.Moveable = {
    name: 'Moveable',
    tryMove: function(x, y, map) {
        var tile = map.getTile(x, y);
        var target = map.getEntityAt(x, y);
        // If an entity was present at the tile, then we
        // can't move there
        if (target) {
            return false;
        // Check if we can walk on the tile
        // and if so simply walk onto it
        } else if (tile.isWalkable()) {        
            // Update the entity's position
            this._x = x;
            this._y = y;
            return true;
        // Check if the tile is diggable, and
        // if so try to dig it
        } else if (tile.isDiggable()) {
            map.dig(x, y);
            return true;
        }
        return false;
    }
}

assets/map.js

We haven't actually provided a way to add an entity to our map yet! We're going to create a base function which allows us to add an entity to our map. In our function, we check if the entity is an Actor (thanks to our improvement), and if so we add them to the scheduler as well! We'll also want a method which adds an entity at a random position.

Game.Map.prototype.addEntity = function(entity) {
    // Make sure the entity's position is within bounds
    if (entity.getX() < 0 || entity.getX() >= this._width ||
        entity.getY() < 0 || entity.getY() >= this._height) {
        throw new Error('Adding entity out of bounds.');
    }
    // Update the entity's map
    entity.setMap(this);
    // Add the entity to the list of entities
    this._entities.push(entity);
    // Check if this entity is an actor, and if so add
    // them to the scheduler
    if (entity.hasMixin('Actor')) {
       this._scheduler.add(entity, true);
    }
}

Game.Map.prototype.addEntityAtRandomPosition = function(entity) {
    var position = this.getRandomFloorPosition();
    entity.setX(position.x);
    entity.setY(position.y);
    this.addEntity(entity);
}

We now have a fix to make to our function which generates a random floor position! We need to also check that there is no entity already present at the location we generated!:

Game.Map.prototype.getRandomFloorPosition = function() {
    // Randomly generate a tile which is a floor
    var x, y;
    do {
        x = Math.floor(Math.random() * this._width);
        y = Math.floor(Math.random() * this._width);
    } while(this.getTile(x, y) != Game.Tile.floorTile ||
            this.getEntityAt(x, y));
    return {x: x, y: y};
}

The last part, and arguably the most important part, is that we must add our player entity as well as some fungus to the map! We will do this in the constructor before starting the engine, and in fact will modify the constructor to accept the player entity:

Game.Map = function(tiles, player) {
    this._tiles = tiles;
    // cache the width and height based
    // on the length of the dimensions of
    // the tiles array
    this._width = tiles.length;
    this._height = tiles[0].length;
    // create a list which will hold the entities
    this._entities = [];
    // create the engine and scheduler
    this._scheduler = new ROT.Scheduler.Simple();
    this._engine = new ROT.Engine(this._scheduler);
    // add the player
    this.addEntityAtRandomPosition(player);
    // add random fungi
    for (var i = 0; i < 1000; i++) {
        this.addEntityAtRandomPosition(new Game.Entity(Game.FungusTemplate));
    }
};

assets/screens.js

We now need to update the enter function of the playScreen to pass our player to the map, as well as to start the engine.

Game.Screen.playScreen = {
    // ...
    enter: function() {  
        // ...
        // Create our map from the tiles and player
        this._player = new Game.Entity(Game.PlayerTemplate);
        this._map = new Game.Map(map, this._player);
        // Start the map's engine
        this._map.getEngine().start();
    }
    // ...
}

We now need to change our rendering function to render all the map's entities as opposed to just the player. You're going to want to replace the player rendering with this snippet, which renders all visible entities:

Game.Screen.playScreen = {
    // ...
    render: function() {  
        // ...
        // Render the entities
        var entities = this._map.getEntities();
        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            // Only render the entitiy if they would show up on the screen
            if (entity.getX() >= topLeftX && entity.getY() >= topLeftY &&
                entity.getX() < topLeftX + screenWidth &&
                entity.getY() < topLeftY + screenHeight) {
                display.draw(
                    entity.getX() - topLeftX, 
                    entity.getY() - topLeftY,    
                    entity.getChar(), 
                    entity.getForeground(), 
                    entity.getBackground()
                );
            }
        }
    }
    // ...
}

And the last step is to make our handleInput function unlock the map engine!

Game.Screen.playScreen = {
    // ...
    handleInput: function(inputType, inputData) {
        if (inputType === 'keydown') {
            // If enter is pressed, go to the win screen
            // If escape is pressed, go to lose screen
            if (inputData.keyCode === ROT.VK_RETURN) {
                Game.switchScreen(Game.Screen.winScreen);
            } else if (inputData.keyCode === ROT.VK_ESCAPE) {
                Game.switchScreen(Game.Screen.loseScreen);
            } else {
                // Movement
                if (inputData.keyCode === ROT.VK_LEFT) {
                    this.move(-1, 0);
                } else if (inputData.keyCode === ROT.VK_RIGHT) {
                    this.move(1, 0);
                } else if (inputData.keyCode === ROT.VK_UP) {
                    this.move(0, -1);
                } else if (inputData.keyCode === ROT.VK_DOWN) {
                    this.move(0, 1);
                }
                // Unlock the engine
                this._map.getEngine().unlock();
            }
        }    
    },
    // ...
}

Conclusion

Our game is now actually starting to ressemble a real game! We can walk around a cave filled with fungi! We are also set up for having many entities on a given map, and our small adjustement to the mixin system has made it much easier to create simple but powerful mixins.

I hope you enjoyed this post and that you'll stick around for the next part! I'm sorry for the length of the last two posts, I will try to keep it down in the future. I'd just hate to finish off a post with something you couldn't use! Remember that all the code for this part can be found at the part 5a tag of the jsrogue repository. Also please feel free to post any comments whether questions, clarifications or criticism!

Thanks for reading,

Dominic

Next Part

Part 5b - Attacking Spreading Fungi

Building a Roguelike in Javascript - Part 4

Sat, 20 Apr 2013 22:30:00 EDT

This is the fifth post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the fourth part in Trystan's series. All the code for this part can be found at the part 4 tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js.

Now that we've got some interesting caves we want a hero so that we can play our game and explore the dark depths of the caves! In this post we'll lay down the foundation for the characters in the game (which we'll call entities) and by the end of it we'll use this system to add our player to the map. If you played around with the demo from the last post you may have noticed that the caves aren't always fully connected. We want our hero to start the game in a random part of the cave every time so we're going to need to make a way so that the player isn't stuck if they can't get to one part of the cave. Our hero will be able to dig through walls in the cave in order to avoid ever getting stuck. Once we add lighting to the game this is going to be a really neat part of the game as we will have to explore and dig through walls without knowing what's on the other side!

Demo Link

The results after this post can be seen here

assets/glyph.js

First things first we have a small bit of refactoring to do! In part 3a we introduced the Glyph type , which had a constructor that accepted 3 arguments (character, foreground and background). However this isn't very flexible and isn't taking advantage of the features in Javascript! We are going to change this so that it accepts a simple Javascript object such as:

{
    character: '@',
    foreground: 'white',
    background: 'black'
}

Why is this better? We are going to want to extend the Glyph later on for characters, items, and all sorts of fancy features. By passing a Javascript object to our constructor (and making sure it gets passed to the parent class as well) we can quickly instantiate objects with the right properties while providing defaults if a given property isn't there. This was inspired by a similar method used in The Royal Wedding, a fantastic open-source roguelike written using rot.js which I encourage you to check out. We simply have to update our constructor like so:

Game.Glyph = function(properties) {
    // Instantiate properties to default if they weren't passed
    properties = properties || {};
    this._char = properties['character'] || ' ';
    this._foreground = properties['foreground'] || 'white';
    this._background = properties['background'] || 'black';
};

assets/tile.js

As our constructor has changed we have to update the code where we created glyphs for our tiles to use a Javascript object. While we're in the tile file, we're also going to need to add some notion of whether a tile can be walked on as well as whether a tile can be dug through. In order to do this, we're going to make Game.Tile extend Game.Glyph and accept a Javascript object in the constructor as well! This will allow us to define tiles in a much simpler fashion:

Game.Tile.wallTile = new Game.Tile({
    character: '#',
    foreground: 'goldenrod',
    isDiggable: true
})

So let's go ahead and update that code:

Game.Tile = function(properties) {
    properties = properties || {};
    // Call the Glyph constructor with our properties
    Game.Glyph.call(this, properties);
    // Set up the properties. We use false by default.
    this._isWalkable = properties['isWalkable'] || false;
    this._isDiggable = properties['isDiggable'] || false;
};
// Make tiles inherit all the functionality from glyphs
Game.Tile.extend(Game.Glyph);

// Standard getters
Game.Tile.prototype.isWalkable = function() {
    return this._isWalkable;
}
Game.Tile.prototype.isDiggable = function() {
    return this._isDiggable;
}

Game.Tile.nullTile = new Game.Tile({})
Game.Tile.floorTile = new Game.Tile({
    character: '.',
    isWalkable: true
});
Game.Tile.wallTile = new Game.Tile({
    character: '#',
    foreground: 'goldenrod',
    isDiggable: true
});

Note that because we removed the getGlyph method (as it directly extends Glyph) we're going to have to fix up the rendering. This will be done later in the post so have no worries!

assets/entity.js

We are now ready to define an entity. In its most basic form, an entity is composed of a glyph as well as a position and a name (used in messages). It will be the base object for nearly everything that can be seen on the screen and can be interacted with. This is similar to Trystan's Creature class however we're going to try avoiding traditional inheritance and instead taking advantage of the powers of Javascript.

Because anything can be an entity, for example the hero, a potion on the ground, or a wildebeest, we're going to need some way of giving certain behaviors to different entities. For this we're going to use something similar to mixins which are small sets of functions and state that we can add to certain entities to give them certain behaviors. This was inspired by Steve Losh's Caves of Clojue approach. One example of a mixin defines an entity as moveable, giving it functions for moving and checking valid moves. Another example is defining an entity as a container of other entities. This could be used for an entity representing a chest, but could also be used for more strange things such as a chicken containing egg items.

For now we will first focus on creating a basic entity class which extends a glyph with a position and a name:

Game.Entity = function(properties) {
    properties = properties || {};
    // Call the glyph's construtor with our set of properties
    Game.Glyph.call(this, properties);
    // Instantiate any properties from the passed object
    this._name = properties['name'] || '';
    this._x = properties['x'] || 0;
    this._y = properties['y'] || 0;
}
// Make entities inherit all the functionality from glyphs
Game.Entity.extend(Game.Glyph);

Game.Entity.prototype.setName = function(name) {
    this._name = name;
}
Game.Entity.prototype.setX = function(x) {
    this._x = x;
}
Game.Entity.prototype.setY = function(y) {
    this._y = y;
}
Game.Entity.prototype.getName = function() {
    return this._name;
}
Game.Entity.prototype.getX = function() {
    return this._x;
}
Game.Entity.prototype.getY   = function() {
    return this._y;
}

A mixin will be a simple Javascript object which will be attached to each entity that chooses it. Note that we will set it up so that this can be used in the mixin objects to refer to the calling entity. Each mixin can have an init function which is called when we create a new entity and attach that mixin, and it will pass the same Javascript object to the init function that was used to create the entity (like the object used to create a Glyph above). A mixin must also have a name attribute which will be useful when we try to determine if a player has a given mixin. This is going to make our code base a bit more complicated, but I believe it will be very useful for us to easily assign bits and pieces of functionality to different entities. The whole reason we are doing this is so that we avoid rewriting code and to make sure we don't have objects bloated with functions and state they'll never use. Try to bear with me, and if there is anything unclear please post a comment and let me know! I'd be glad to help!

Here is an example of a mixin which would keep track of the number of hits an entity has made, just to give you an idea of how they will work. It will also give an example of adding state to the entity via the init function by storing a simple multiplier. You do not need to add this code anywhere, it is just an example of how we are going to use the system.

var HitCounter = {
    name: 'HitCounter',
    init: function(properties) {
        // Add state to the entity and read from the properties
        this._multiplier = properties['multiplier'] || 1;
        this._hits = 0;
    },
    incrementHit: function() {
        // Update state
        this._hits += this._multiplier;
    },
    getTotalHits: function() {
        return this._hits;
    }
}

Ideally we would like to specify what mixins an entity has when we create it via the Javascript object we pass. We will add a field called mixins containing an array of mixins which will be automatically attached to the entity. Once we attach a mixin to an entity, all the mixin functions are available directly from our entity! For example to create and use an entity which had the HitCounter mixin:

var e = new Game.Entity({
    character: '@',
    foreground: 'blue',
    x: 1,
    y: 3,
    name: 'Test Entity',
    mixins: [HitCounter],
    multiplier: 5
})

e.incrementHit();
e.incrementHit();
console.log(e.getTotalHits());

In order to do this we're going to modify our Entity constructor to process this array of mixins. Note that we will also store the name of each mixin we attached in an object so that we can quickly look up if an Entity has a given set of functionalities (similar to the instanceof keyword). So you're going to want to change the constructor to look like this:

Game.Entity = function(properties) {
    properties = properties || {};
    // Call the glyph's construtor with our set of properties
    Game.Glyph.call(this, properties);
    // Instantiate any properties from the passed object
    this._name = properties['name'] || '';
    this._x = properties['x'] || 0;
    this._y = properties['y'] || 0;
    // Create an object which will keep track what mixins we have
    // attached to this entity based on the name property
    this._attachedMixins = {};
    // Setup the object's mixins
    var mixins = properties['mixins'] || [];
    for (var i = 0; i < mixins.length; i++) {
        // Copy over all properties from each mixin as long
        // as it's not the name or the init property. We
        // also make sure not to override a property that
        // already exists on the entity.
        for (var key in mixins[i]) {
            if (key != 'init' && key != 'name' && !this.hasOwnProperty(key)) {
                this[key] = mixins[i][key];
            }
        }
        // Add the name of this mixin to our attached mixins
        this._attachedMixins[mixins[i].name] = true;
        // Finally call the init function if there is one
        if (mixins[i].init) {
            mixins[i].init.call(this, properties);
        }
    }
}

Finally we're going to add a method to the Entity class which allows us to check if a given entity has a given mixin. We're going to make it so we can either pass the mixin itself or just the name, and it'll check the _attachedMixins object in the entity:

Game.Entity.prototype.hasMixin = function(obj) {
    // Allow passing the mixin itself or the name as a string
    if (typeof obj === 'object') {
        return this._attachedMixins[obj.name];
    } else {
        return this._attachedMixins[name];
    }
}

Now that we've got our entity system all set up, we're ready to create our player! The only problem right now is that we have no functions in the Game.Map object for checking whether we can move and dig through a given tile. Let's go ahead and create that first!

assets/map.js

We simply want to add a function that digs at a given tile. We have to check that the tile is actually diggable, and if so we then convert it to a floor tile!

Game.Map.prototype.dig = function(x, y) {
    // If the tile is diggable, update it to a floor
    if (this.getTile(x, y).isDiggable()) {
        this._tiles[x][y] = Game.Tile.floorTile;
    }
}

As our player will start in a random position in the cave, we're going to add in a function which will generate a random position which has a floor tile:

Game.Map.prototype.getRandomFloorPosition = function() {
    // Randomly generate a tile which is a floor
    var x, y;
    do {
        x = Math.floor(Math.random() * this._width);
        y = Math.floor(Math.random() * this._width);
    } while(this.getTile(x, y) != Game.Tile.floorTile);
    return {x: x, y: y};
}

assets/entities.js

We are now ready to create our player and it's related mixins! The first thing we are going to do is create a mixin for moving. This mixin will simply have a tryMove function which accepts a position as well as the current map and tries to move in a given direction. If the entity cannot move through a tile but can dig, it will dig the tile instead. Finally the function will return true if there was a succesful action (moving or digging).

// Create our Mixins namespace
Game.Mixins = {};

// Define our Moveable mixin
Game.Mixins.Moveable = {
    name: 'Moveable',
    tryMove: function(x, y, map) {
        var tile = map.getTile(x, y);
        // Check if we can walk on the tile
        // and if so simply walk onto it
        if (tile.isWalkable()) {
            // Update the entity's position
            this._x = x;
            this._y = y;
            return true;
        // Check if the tile is diggable, and
        // if so try to dig it
        } else if (tile.isDiggable()) {
            map.dig(x, y);
            return true;
        }
        return false;
    }
}

We are now ready to define our player entity! For now we will simply make the Javascript object that is used to create the player a variable in the Game namespace but this will be refactored in a future entry as soon as we want to have multiple entities. This will also show how the raw Javascript objects can act as templates for entities that can be reused:

// Player template
Game.PlayerTemplate = {
    character: '@',
    foreground: 'white',
    background: 'black',
    mixins: [Game.Mixins.Moveable]
}

assets/screens.js

We are now ready to change our screen to work with our new Player! The first things we are going to do is remove the centerX/centerY properties and add a player property to the PlayScreen:

Game.Screen.playScreen = {
    _map: null,
    _player: null,
    enter: function() { 
        // ...
    }
    // ...
}

Now at the end of our enter function, after we create the map, we want to create our player based on our template and then position the hero inside the cave!

Game.Screen.playScreen = {
    // ...
    enter: function() { 
        // ...
        // Create our map from the tiles
        this._map = new Game.Map(map);
        // Create our player and set the position
        this._player = new Game.Entity(Game.PlayerTemplate);
        var position = this._map.getRandomFloorPosition();
        this._player.setX(position.x);
        this._player.setY(position.y);
    }
    // ...
}

Now we have to update our render function for two reasons. First we no longer need centerX/centerY and instead should use the player's position for determining the camera offsets as well as rendering the player! Secondly we have to change how tiles are rendered as tiles now extend glyphs!

Game.Screen.playScreen = {
   // ...
   render: function(display) {
        var screenWidth = Game.getScreenWidth();
        var screenHeight = Game.getScreenHeight();
        // Make sure the x-axis doesn't go to the left of the left bound
        var topLeftX = Math.max(0, this._player.getX() - (screenWidth / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftX = Math.min(topLeftX, this._map.getWidth() - screenWidth);
        // Make sure the y-axis doesn't above the top bound
        var topLeftY = Math.max(0, this._player.getY() - (screenHeight / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftY = Math.min(topLeftY, this._map.getHeight() - screenHeight);
        // Iterate through all visible map cells
        for (var x = topLeftX; x < topLeftX + screenWidth; x++) {
            for (var y = topLeftY; y < topLeftY + screenHeight; y++) {
                // Fetch the glyph for the tile and render it to the screen
                // at the offset position.
                var tile = this._map.getTile(x, y);
                display.draw(
                    x - topLeftX,
                    y - topLeftY,
                    tile.getChar(), 
                    tile.getForeground(), 
                    tile.getBackground())
            }
        }
        // Render the player
        display.draw(
            this._player.getX() - topLeftX, 
            this._player.getY() - topLeftY,    
            this._player.getChar(), 
            this._player.getForeground(), 
            this._player.getBackground()
        );
    },
    // ... 
}

1 Our last step is to change the move function to interact with our new entity and it's Moveable mixin! Recall that the move function accepts an offset in the x and y direction and so we should recalculate the new position based on these offsets and then call the tryMove method! Also note that the screen automatically re-renders when we handle input, so we don't have to worry about calling it ourselves!

Game.Screen.playScreen = {
    // ...
    move: function(dX, dY) {
        var newX = this._player.getX() + dX;
        var newY = this._player.getY() + dY;
        // Try to move to the new cell
        this._player.tryMove(newX, newY, this._map);
    }
}

index.html

We are almost done! We just have to add our new scripts!

1
2

Conclusion

We've now done a huge step! We now have a player who can dig around and move around the caves! We've also done something much more important though - we set up a general framework for pretty much every interactive entity on the screen! I'm hoping that this combination of mixins and Javascript objects will turn out to be very practical and I hope it also showed you just how neat Javascript can be. The system can easily be extended to do things such as allow mixin inheritance (for example having a Mixin which extends another Mixin), but for the sake of simplicity and shortness I will try to avoid overcomplicating it.

I hope you enjoyed this post and that you'll stick around for the next part! It's going to get very interesting, I promise you! Remember that all the code for this part can be found at the part 4 tag of the jsrogue repository. Also please feel free to post any comments whether questions, clarifications or criticism!

Thanks for reading,

Dominic

Next Part

Part 5a - Populating the Cave

Building a Roguelike in Javascript - Part 3b

Sun, 07 Apr 2013 13:00:00 EDT

This is the fourth post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the map scrolling segment of the third part in Trystan's series. All the code for this part can be found at the part 3b tag of the jsrogue repository. At the time of writing, I am still using the d4ea2ab commit for rot.js.

Just to quickly recap last post we created a cave and made it show up in our Play screen. This works really nicely and makes random caves every time we refresh the game, but we'd like to be able to have levels that are bigger than the screen! This is usually done by centering the screen on our player and only showing the nearby area! We don't have the notion of a player yet, and that will only be really implemented in the next post, but for now we'll want to center the screen at a given x and y position which can be moved around using the keys! By the end of this post we'll be generating huge caves and we'll be able to move around them and explore them!

Demo Link

The results after this post can be seen here

assets/game.js

Before we start, we're going to do a small bit of refactoring. Rather than hardcoding our screen size, we're going to store it as variables in the Game namespace which can be accessed globally. We're going to keep track of how wide and tall our screen is in cells:

var Game =  {
    _display: null,
    _currentScreen: null,
    _screenWidth: 80,
    _screenHeight: 24,
    //...
}

Now we have to modify our init function to use these variables rather than the hardcoded values:

init: function() {
    // Any necessary initialization will go here.
    this._display = new ROT.Display({width: this._screenWidth,
                                     height: this._screenHeight});
    // Create a helper function for binding to an event
    // and making it send it to the screen
    // ...
}

Finally, we want to create globally accessible functions, similar to getDisplay, which will allow other files (eg. inside our Screen objects) to get the width and height:

getDisplay: function() {
    return this._display;
},
getScreenWidth: function() {
    return this._screenWidth;
},
getScreenHeight: function() {
    return this._screenHeight;
},

This is a great little change to put in place early, and if we are consistent in using these functions elsewhere in our code, will allow us to change our screen size (think mobile!) without any headaches.

assets/screens.js

The first thing we want to do is create big maps! Let's change our map generating code in the PlayScreen's enter function so that we generate maps that are 500 cells wide and 500 cells tall:

Game.Screen.playScreen = {
    _map: null,
    enter: function() {  
        var map = [];
        // Create a map based on our size parameters
        var mapWidth = 500;
        var mapHeight = 500;
        for (var x = 0; x < mapWidth; x++) {
            // Create the nested array for the y values
            map.push([]);
            // Add all the tiles
            for (var y = 0; y < mapHeight; y++) {
                map[x].push(Game.Tile.nullTile);
            }
        }
        // Setup the map generator
        var generator = new ROT.Map.Cellular(mapWidth, mapHeight);
        generator.randomize(0.5);
        var totalIterations = 3;
        // Iteratively smoothen the map
        for (var i = 0; i < totalIterations - 1; i++) {
            generator.create();
        }
        // Smoothen it one last time and then update our map
        generator.create(function(x,y,v) {
            if (v === 1) {
                map[x][y] = Game.Tile.floorTile;
            } else {
                map[x][y] = Game.Tile.wallTile;
            }
        });
        // Create our map from the tiles
        this._map = new Game.Map(map);
    },
    //...
}

This will now generate big maps for us! However we can't render it all because it's bigger than the screen, so we're going to make it so that we only see part of the screen at once. As I mentioned above, we will keep track of where our cursor currently is on the screen using x and y coordinates, so we must add these as variables of the screen. Initially we are going to start at the top left corner of the map:

Game.Screen.playScreen = {
    _map: null,
    _centerX: 0,
    _centerY: 0,
    // ...
}

Now we'll want to be able to move our player in any direction. So for now, to keep things simple, we'll create a function allowing us to move in the x and y direction by a certain amount of cells. For example, if we want to move down by 2, it would be move(0, 2). If we want to move left by 1, it would be move(-1, 0). We also want to make sure the player stays in the bounds of the map, so we use Math.min and Math.max to make sure it says between 0 and the map width / height. Note that we have to subtract 1 from the map's width and height to get the real index of the last cell as arrays are 0-based.

Game.Screen.playScreen = {
    // ...
    move: function(dX, dY) {
        // Positive dX means movement right
        // negative means movement left
        // 0 means none
        this._centerX = Math.max(0,
            Math.min(this._map.getWidth() - 1, this._centerX + dX));
        // Positive dY means movement down
        // negative means movement up
        // 0 means none
        this._centerY = Math.max(0,
            Math.min(this._map.getHeight() - 1, this._centerY + dY));
    }
}

Now we're going to update our handleInput function so that we can actually move our player around using the arrow keys! As a small challenge, you should try to re-do this code so that it uses your preferred method of movement (WASD, HJKL, using the numpad, etc.). Remember that you can see all the key constants here (they all start with VK_).

Game.Screen.playScreen = {
    // ...
    handleInput: function(inputType, inputData) {
        if (inputType === 'keydown') {
            // If enter is pressed, go to the win screen
            // If escape is pressed, go to lose screen
            if (inputData.keyCode === ROT.VK_RETURN) {
                Game.switchScreen(Game.Screen.winScreen);
            } else if (inputData.keyCode === ROT.VK_ESCAPE) {
                Game.switchScreen(Game.Screen.loseScreen);
            }
            // Movement
            if (inputData.keyCode === ROT.VK_LEFT) {
                this.move(-1, 0);
            } else if (inputData.keyCode === ROT.VK_RIGHT) {
                this.move(1, 0);
            } else if (inputData.keyCode === ROT.VK_UP) {
                this.move(0, -1);
            } else if (inputData.keyCode === ROT.VK_DOWN) {
                this.move(0, 1);
            }
        }    
    },
    // ...
}

So now we have a cursor that can move around the screen! Great! But we haven't changed our rendering yet, so nothing actually looks different! We're going to rewrite our render function so that it matches our new scrolling system! The first thing we have to do is determine what cells to render. We already know how many cells wide and tall we need to render thanks to our refactoring we did at the beginning, but what cell will go in the left corner? A pretty common strategy for this is to center the screen based on where the player is. So we want our top corner to be one half of a screen's width to the left and one half of a screen's height up from our center x and y. There's also an extra consideration - what do we do when the player is less than half a screen's width away from the bound, for example if they are at x = 5 and the screen's width is 80? What we're going to do is stop scrolling if we can't fit half a screen on all sides of the player. So for the left and top bound, we want to make sure our top left corner is at a position of at least x = 0 and y = 0 (can't have negative positions!). For our right and bottom bound, we want to make sure our top left corner can still fit the entire screen. So let's write some code for determining the top left corner first! Note that because we are working with halfs of a screen, it's generally a good idea to make your screen width and height even numbers.

Game.Screen.playScreen = {
    // ...
    render: function(display) {
        var screenWidth = Game.getScreenWidth();
        var screenHeight = Game.getScreenHeight();
        // Make sure the x-axis doesn't go to the left of the left bound
        var topLeftX = Math.max(0, this._centerX - (screenWidth / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftX = Math.min(topLeftX, this._map.getWidth() - screenWidth);
        // Make sure the y-axis doesn't above the top bound
        var topLeftY = Math.max(0, this._centerY - (screenHeight / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftY = Math.min(topLeftY, this._map.getHeight() - screenHeight);
    }
    // ...
}

Now that we've figured out our top left cell, we can render the cells like we were doing before! We have to change the bounds of our for nested for loops which traverse the map so that we start at our top left cell and render one screen. We also have to make it so that when we draw a tile, we draw it relative to the top left cell (ie. render it at x - topLeftX rather than x).

// Iterate through all visible map cells
for (var x = topLeftX; x < topLeftX + screenWidth; x++) {
    for (var y = topLeftY; y < topLeftY + screenHeight; y++) {
        // Fetch the glyph for the tile and render it to the screen
        // at the offset position.
        var glyph = this._map.getTile(x, y).getGlyph();
        display.draw(
            x - topLeftX,
            y - topLeftY,
            glyph.getChar(), 
            glyph.getForeground(), 
            glyph.getBackground());
    }
}

Finally we can scroll around our map! However while we're modifying our rendering function, let's add a call after we render the map to render our cursor (represented by @). We have to offset the rendering position as we want to know where to render our cursor relative to the top left cell and not the 0,0 cell! Our render function should know look like:

Game.Screen.playScreen = {
    // ...
    render: function(display) {
        var screenWidth = Game.getScreenWidth();
        var screenHeight = Game.getScreenHeight();
        // Make sure the x-axis doesn't go to the left of the left bound
        var topLeftX = Math.max(0, this._centerX - (screenWidth / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftX = Math.min(topLeftX, this._map.getWidth() - screenWidth);
        // Make sure the y-axis doesn't above the top bound
        var topLeftY = Math.max(0, this._centerY - (screenHeight / 2));
        // Make sure we still have enough space to fit an entire game screen
        topLeftY = Math.min(topLeftY, this._map.getHeight() - screenHeight);
        // Iterate through all visible map cells
        for (var x = topLeftX; x < topLeftX + screenWidth; x++) {
            for (var y = topLeftY; y < topLeftY + screenHeight; y++) {
                // Fetch the glyph for the tile and render it to the screen
                // at the offset position.
                var glyph = this._map.getTile(x, y).getGlyph();
                display.draw(
                    x - topLeftX,
                    y - topLeftY,
                    glyph.getChar(), 
                    glyph.getForeground(), 
                    glyph.getBackground());
            }
        }
        // Render the cursor
        display.draw(
            this._centerX - topLeftX, 
            this._centerY - topLeftY,
            '@',
            'white',
            'black');
    },
    // ...
}

Now let's refresh our page! Look at that, there's our cursor in the top left! Now le's try to move it around... uh oh! It's not moving!

assets/game.js

You may recall from the Screen Management entry that the handleInput function gets called whenever an input event is received. However after we handle input, we don't actually re-render the screen! So even though our cursor is moving we don't actually see it moving! Let's rewrite our Game.init function to make sure we call render after we handle the input. Note that I've also commented out the keyup and keypress handlers for now as we're not using them.

var Game = {
    // ...
    init: function() {
        // Any necessary initialization will go here.
        this._display = new ROT.Display({width: this._screenWidth,
                                         height: this._screenHeight});
        // Create a helper function for binding to an event
        // and making it send it to the screen
        var game = this; // So that we don't lose this
        var bindEventToScreen = function(event) {
            window.addEventListener(event, function(e) {
                // When an event is received, send it to the
                // screen if there is one
                if (game._currentScreen !== null) {
                    // Send the event type and data to the screen
                    game._currentScreen.handleInput(event, e);
                    // Clear the screen
                    game._display.clear();
                    // Render the screen
                    game._currentScreen.render(game._display);
                }
            });
        }
        // Bind keyboard input events
        bindEventToScreen('keydown');
        //bindEventToScreen('keyup');
        //bindEventToScreen('keypress');
    },
    // ...
}

Note that we may refactor this code at some point in the future to only re-render the screen when it's required, but for now this will do!

Conclusion

We now have a cursor that lets us explore the caves! The next post will focus on converting this cursor to an actual player, and will be a big step up for our game. Play around with it, generating random caves and resizing the map as well.

Remember that all the code for this part can be found at the part 3b tag of the jsrogue repository. I hope you enjoyed this post and that you'll stick around for the next part!

Thanks for reading,

Dominic

Extra

In the last post, I mentioned there were a variety of map generators provided in rot.js. I just tought I would give you an example of using a different one if you wanted to play around with it. This little extra section will be changing the map generator to use ROT.Map.Uniform which generate maps more similar to games like Nethack. Note that for now the actual posts will be using the ROT.Map.Cellular generator. This is simply for fun!

In our assets/screens.js file in the enter function we used to generate our map like so:

enter: function() {
    // Create a map based on our size parameters
    var mapWidth = 500;
    var mapHeight = 500;
    // ...
    // Setup the map generator
    var generator = new ROT.Map.Cellular(mapWidth, mapHeight);
    generator.randomize(0.5);
    var totalIterations = 3;
    // Iteratively smoothen the map
    for (var i = 0; i < totalIterations - 1; i++) {
        generator.create();
    }
    // Smoothen it one last time and then update our map
    generator.create(function(x,y,v) {
        if (v === 1) {
            map[x][y] = Game.Tile.floorTile;
        } else {
            map[x][y] = Game.Tile.wallTile;
        }
    });
    // ...
}

We're now going to change this code! The first thing we are going to do is make the map smaller, as the generation tends to take much longer:

1 2	var mapWidth = 250; var mapHeight = 250;

The ROT.Map.Uniform generator is much simpler to use and only requires 1 iteration of create! We also pass a time limit in the options, as by default if the generation takes more than 1000 milliseconds it will simply generate null, so we increase it to 5000 milliseconds. Another change is that with this generator, 1 represents a wall and 0 represents a floor. We can then modify our generator code:

// Setup the map generator
var generator = new ROT.Map.Uniform(mapWidth, mapHeight, 
    {timeLimit: 5000});
// Smoothen it one last time and then update our map
generator.create(function(x,y,v) {
    if (v === 0) {
        map[x][y] = Game.Tile.floorTile;
    } else {
        map[x][y] = Game.Tile.wallTile;
    }
});

And there you have it! The map now looks more like a traditional roguelike:

Note that the code for this extra is not up on the Github, but if you have any questions feel free to post in the comments!

Next Part

Part 4 - A Hero Appears!

Building a Roguelike in Javascript - Part 3a

Fri, 05 Apr 2013 21:25:00 EDT

This is the third post in the Building a Roguelike in Javascript series. I recommend you start at the beginning unless you've been following along. This part corresponds to the map generation segment of the third part in Trystan's series. All the code for this part can be found at the part 3a tag of the jsrogue repository. At the time of writing, I have updated the rot.js version to the d4ea2ab commit, although there are no breaking changes in terms of what we've done.

Today we'll start working on our actual game! Roguelike games traditionally took place in a dark, monster-filled, multi-level dungeon, but we can let our imagination run free and build all sorts of environments! The great thing about using ASCII graphics is that you aren't limited by your graphical abilitites! No matter what you want to add, whether it be a tree, a dragon or a jetpack, all you have to do is decide what character and colors will represent it! For example ♠ may be a pine tree just like % may be a deadly two-headed dog. This is your game... have fun with it! If you want some inspiration and examples of how different games can look check out the background of the Dwarf Fortress page, these Dungeon Crawl screenshots and this screenshot of Rogue, the game that started it all.

To keep things simple and make sure we've got everything running properly we'll be keeping our environment simple in this post. We're going to build some nice caves for our hero to explore, plunder, and possibly stay in forever! For now our cave will be fairly simple and consist of walls, represented by #, and a simple floor, represented by a period. In this post we'll focus simply on building a map and drawing it on the screen, and in the next post we'll make it so we can scroll around the screen. Here's a small screenshot of what we'll have at the end of this post:

Demo Link

The results after this post can be seen here

assets/glyph.js

Almost everything in our game will be represented by some kind of glyph. If you are wondering what a glyph is, it is simply a combination of a character with a foreground and background color. Before we can do any kind of graphical work, we'll need to create a small class representing a glyph:

Game.Glyph = function(chr, foreground, background) {
    // Instantiate properties to default if they weren't passed
    this._char = chr || ' ';
    this._foreground = foreground || 'white';
    this._background = background || 'black';
};

// Create standard getters for glyphs
Game.Glyph.prototype.getChar = function(){ 
    return this._char; 
}
Game.Glyph.prototype.getBackground = function(){
    return this._background;
}
Game.Glyph.prototype.getForeground = function(){ 
    return this._foreground; 
}

As you can see a glyph simply wraps around a character, a foreground color, and a background color (with default values for all 3 properties). The properties can be fetched using getter methods.

assets/tile.js

Levels in ASCII games are usually described in terms of cells or tiles, where each character (for example our walls) represents a given cell. Each of these cells occupies the same width and height visually. A simple way to refer to the cells on a screen is to use 2D cartesian coordinates (x and y). In our case, we use the top left corner as the origin (x=0 and y=0). Therefore a given game level will contain a 2D array of tiles (with the first dimension representing the x and the second dimension representing the y). So what exactly is a tile? For now a tile simply contains a glyph, but in the future it will keep all sorts of useful information such as whether characters can walk on this tile and it will also describe how players can interact with the tile.

Game.Tile = function(glyph) {
    this._glyph = glyph;
};

Game.Tile.prototype.getGlyph = function() {
    return this._glyph;
};

Now we want to create different tiles for walls and floors. However because there is no differentiating between a wall in one cell and a wall in another, we can simply have a single instance of both tile types and pass that around! Note that we're also going to create a nullTile which will be returned whenever we try to access an out of bounds tiles. This will be useful as it will prevent us from having to do null checks all the time, and as mentioned by Trystan, follows the Null Object pattern.

1
2
3

Game.Tile.nullTile = new Game.Tile(new Game.Glyph());
Game.Tile.floorTile = new Game.Tile(new Game.Glyph('.'));
Game.Tile.wallTile = new Game.Tile(new Game.Glyph('#', 'goldenrod'));

assets/map.js

Now that we have the notion of a tile, we're ready to create our map! As mentioned before, our Map will simply contain a 2D array of tiles, and we use their index in the first and second dimension to represent the x and y coordinate respectively.

Game.Map = function(tiles) {
    this._tiles = tiles;
    // cache the width and height based
    // on the length of the dimensions of
    // the tiles array
    this._width = tiles.length;
    this._height = tiles[0].length;
};

// Standard getters
Game.Map.prototype.getWidth = function() {
    return this._width;
};
Game.Map.prototype.getHeight = function() {
    return this._height;
};

// Gets the tile for a given coordinate set
Game.Map.prototype.getTile = function(x, y) {
    // Make sure we are inside the bounds. If we aren't, return
    // null tile.
    if (x < 0 || x >= this._width || y < 0 || y >= this._height) {
        return Game.Tile.nullTile;
    } else {
        return this._tiles[x][y] || Game.Tile.nullTile;
    }
};

assets/screens.js

We're now ready to display our map! The map will get drawn when we are currently on the Play screen. It's a good idea to keep all the screen logic and data in the screen's class, so we will contain our map in the Play screen. To do this, we must add the _map property to PlayScreen:

Game.Screen.playScreen = {
    _map : null,
    // ...
}

For now let's make it so that a map is randomly generated whenever we enter the screen. There are many algorithms for generating a variety of random maps, such as caves, dungeons, wilderness, etc. A great source of algorithms for this is the RogueBasin articles section and the Procedural Content Wiki. RogueBasin is a great resource overall and I highly recommend you check it out. I've also written a post on generating random dungeons which I encourage you to check out if you are interested! Conveniently, the rot.js library provides a plethora of map generating algorithms in the ROT.Map namespace. They usually return an array of 1s and 0s which can then be mapped to a tile type.

To generate caves as shown in the picture above, we're going to use the ROT.Map.Cellular generator. It uses a strategy called cellular automata to carve out realistic looking caves! The first thing we're going to do is create our empty array of tiles. For now we will make our map the same size as the screen, although this will be refactored in the next part when we introduce scrolling maps. So let's update our enter function:

enter: function() {
    var map = [];
    for (var x = 0; x < 80; x++) {
        // Create the nested array for the y values
        map.push([]);
        // Add all the tiles
        for (var y = 0; y < 24; y++) {
            map[x].push(Game.Tile.nullTile);
        }
    }
    // ...
}

Now we're ready to generate our map! The first thing we have to do is create our instance of ROT.Map.Cellular and instantiate it with random values. The randomize function accepts the probability of a given cell starting out as a 1, so we use 0.5 to make it split equally:

1 2	var generator = new ROT.Map.Cellular(80, 24); generator.randomize(0.5);

Once we've randomized our map, we want to actually apply the map generation method. Because of the way the algorithm works, re-applying it will generate smoother and smoother maps. By smoother I mean the caves are larger, more consistently shaped and generally more connected. In order to iterate, we have to use the ROT.Map.Cellular.create method. Note that in order to update our own map, we have to pass a callback to the create function which accepts an x, y, and either a 1 or a 0 depending on the value that is generated. We only need to to pass this callback on our last application though as that is the only time we actually want to update our map. When updating our map, we will consider a value of 1 to be a floor and a value of 0 to be a wall in order to determine which tile type to use. Here is our completed enter function:

enter: function() {  
    var map = [];
    for (var x = 0; x < 80; x++) {
        // Create the nested array for the y values
        map.push([]);
        // Add all the tiles
        for (var y = 0; y < 24; y++) {
            map[x].push(Game.Tile.nullTile);
        }
    }
    // Setup the map generator
    var generator = new ROT.Map.Cellular(80, 24);
    generator.randomize(0.5);
    var totalIterations = 3;
    // Iteratively smoothen the map
    for (var i = 0; i < totalIterations - 1; i++) {
        generator.create();
    }
    // Smoothen it one last time and then update our map
    generator.create(function(x,y,v) {
        if (v === 1) {
            map[x][y] = Game.Tile.floorTile;
        } else {
            map[x][y] = Game.Tile.wallTile;
        }
    });
    // Create our map from the tiles
    this._map = new Game.Map(map);
},

All that's left to do is actually render our map! Can you guess what function we'll modify next? Because of how we set up our system, all we have to do is iterate through our map tiles and render the glyph!

render: function(display) {
    // Iterate through all map cells
    for (var x = 0; x < this._map.getWidth(); x++) {
        for (var y = 0; y < this._map.getHeight(); y++) {
            // Fetch the glyph for the tile and render it to the screen
            var glyph = this._map.getTile(x, y).getGlyph();
            display.draw(x, y,
                glyph.getChar(), 
                glyph.getForeground(), 
                glyph.getBackground());
        }
    }
},

index.html

We're all done! Now we can actually see our caves getting rendered, and each time we refresh our game it'll be a brand new cave. All we have to do is update our scripts:

Conclusion

Go ahead and load up your game and enjoy your hard work so far! Our next post will make it so that we can actually make maps larger than the screen and scroll around!

Remember that all the code for this part can be found at the part 3a tag of the jsrogue repository. I hope you enjoyed this post and that you'll stick around for the next part!

Thanks for reading,

Dominic

Next Part

Part 3b - Exploring Caves

Building a Roguelike in Javascript - Part 2

Wed, 03 Apr 2013 18:00:00 EDT

This is the second post in the Building a Roguelike in Javascript series. I recommend you start at the beginning. As I mentioned in the first post, I will try to match each post to a post in Trystan's series on creating a roguelike in Java. This part corresponds to the second part in Trystan's series. All the code for this part can be found at the part 2 tag of the jsrogue repository. At the time of writing, I am still using the 81a8eb0d6c commit of rot.js.

Before we get started, I just want to mention that I updated index.html to refer to a local copy of rot.js as opposed to the copy on Github in the case the breaking changes are implemented in the future. All you have to do is download rot.min.js, put it in your assets folder, and update the line:

In this post we will be introducing the notion of a screen to our game. A screen will represent the current state of the application, for example telling us if we are in the character creation menu or in the main game view. We want to be able to switch easily between screens, and each screen should be responsible for its own rendering and input processing. In order to do this, we will make a master Game object which will take care of containing the game's display as well as the current screen.

Demo Link

The results after this post can be seen here

assets/game.js

The first thing we wil want to do here is create a Game object which will wrap around a ROT.Display object:

var Game =  {
    _display: null,
    init: function() {
        // Any necessary initialization will go here.
        this._display = new ROT.Display({width: 80, height: 24});
    },
    getDisplay: function() {
        return this._display;
    }
}

We can now rewrite our window.onload function to simply invoke the init function to setup the game and then we can use getDisplay to add our display to the screen. With this in mind, we can now rewrite our assets/game.js like so:

var Game =  {
    _display: null,
    init: function() {
        // Any necessary initialization will go here.
        this._display = new ROT.Display({width: 80, height: 24});
    },
    getDisplay: function() {
        return this._display;
    }
}

window.onload = function() {
    // Check if rot.js can work on this browser
    if (!ROT.isSupported()) {
        alert("The rot.js library isn't supported by your browser.");
    } else {
        // Initialize the game
        Game.init();
        // Add the container to our HTML page
        document.body.appendChild(Game.getDisplay().getContainer());
    }
}

assets/screens.js

First we have to create this file! We're going to want to include this script in our index.html page:

1
2
3

This file will contain the code for the majority of our game screens. As I mentioned above, we want each screen to be in charge of its own rendering and input processing, so we're going to have to define a pretty standard interface for our screens. As we want to be able to switch screens, we may also want to do some processing when we enter or exit a given screen. This gives us the following rough interface:

enter : function()
exit : function()
render : function(display)
handleInput : function(inputType, inputData)

The handleInput function will take as an argument a string (being the type of input event, such as 'keydown' or 'keyup') as well as the key event. The render function will accept a ROT.Display object to render onto. Before we go ahead and create our screens, let's go ahead and add screen functionality to the Game object to make the connections more clear.

assets/game.js

The first thing we need to do is keep track of the current screen:

1 2	_display: null, _currentScreen: null,

Now we want to allow switching between screens. Essentialy when we switch screens, we want to call notify the old screen that we exited (if there was one) and then notify the new screen that we are entering it and render it. So we're going to add this function to our Game object:

switchScreen: function(screen) {
    // If we had a screen before, notify it that we exited
    if (this._currentScreen !== null) {
        this._currentScreen.exit();
    }
    // Clear the display
    this.getDisplay().clear();
    // Update our current screen, notify it we entered
    // and then render it
    this._currentScreen = screen;
    if (!this._currentScreen !== null) {
        this._currentScreen.enter();
        this._currentScreen.render(this._display);
    }
}

Finally, we want to dispatch all input events to the screen's handleInput function. As the logic is similar for keydown, keypress and keyup events, I'll create a small helper function just to facilitate this. We'll put this code in the Game.init function as we should bind to the events as soon as possible:

init: function() {
    // Any necessary initialization will go here.
    this._display = new ROT.Display({width: 80, height: 24});
    // Create a helper function for binding to an event
    // and making it send it to the screen
    var game = this; // So that we don't lose this
    var bindEventToScreen = function(event) {
        window.addEventListener(event, function(e) {
            // When an event is received, send it to the
            // screen if there is one
            if (game._currentScreen !== null) {
                // Send the event type and data to the screen
                game._currentScreen.handleInput(event, e);
            }
        });
    }
    // Bind keyboard input events
    bindEventToScreen('keydown');
    bindEventToScreen('keyup');
    bindEventToScreen('keypress');
}

Our Game object now fully supports screens!

assets/screens.js

We're now going to define our screens. To keep the spirit of Trystan's tutorial, we'll start with a Start screen which will prompt the user to press Enter. Once we've hit Enter, we're going to switch to a Play Screen. The Play screen will then prompt us to either hit Enter or Escape, bringing us to the Win or Lose screen respectively. In order to prevent polluting the global scope, we will create a Screen namespace under Game, and our screens will be accessible from there. Before we define the screens, I encourage you to check out the VK constants which correspond to a key obtainable from the keyCode member of our input data.

Game.Screen = {};

// Define our initial start screen
Game.Screen.startScreen = {
    enter: function() {    console.log("Entered start screen."); },
    exit: function() { console.log("Exited start screen."); },
    render: function(display) {
        // Render our prompt to the screen
        display.drawText(1,1, "%c{yellow}Javascript Roguelike");
        display.drawText(1,2, "Press [Enter] to start!");
    },
    handleInput: function(inputType, inputData) {
        // When [Enter] is pressed, go to the play screen
        if (inputType === 'keydown') {
            if (inputData.keyCode === ROT.VK_RETURN) {
                Game.switchScreen(Game.Screen.playScreen);
            }
        }
    }
}

// Define our playing screen
Game.Screen.playScreen = {
    enter: function() {    console.log("Entered play screen."); },
    exit: function() { console.log("Exited play screen."); },
    render: function(display) {
        display.drawText(3,5, "%c{red}%b{white}This game is so much fun!");
        display.drawText(4,6, "Press [Enter] to win, or [Esc] to lose!");
    },
    handleInput: function(inputType, inputData) {
        if (inputType === 'keydown') {
            // If enter is pressed, go to the win screen
            // If escape is pressed, go to lose screen
            if (inputData.keyCode === ROT.VK_RETURN) {
                Game.switchScreen(Game.Screen.winScreen);
            } else if (inputData.keyCode === ROT.VK_ESCAPE) {
                Game.switchScreen(Game.Screen.loseScreen);
            }
        }    
    }
}

// Define our winning screen
Game.Screen.winScreen = {
    enter: function() {    console.log("Entered win screen."); },
    exit: function() { console.log("Exited win screen."); },
    render: function(display) {
        // Render our prompt to the screen
        for (var i = 0; i < 22; i++) {
            // Generate random background colors
            var r = Math.round(Math.random() * 255);
            var g = Math.round(Math.random() * 255);
            var b = Math.round(Math.random() * 255);
            var background = ROT.Color.toRGB([r, g, b]);
            display.drawText(2, i + 1, "%b{" + background + "}You win!");
        }
    },
    handleInput: function(inputType, inputData) {
        // Nothing to do here      
    }
}

// Define our winning screen
Game.Screen.loseScreen = {
    enter: function() {    console.log("Entered lose screen."); },
    exit: function() { console.log("Exited lose screen."); },
    render: function(display) {
        // Render our prompt to the screen
        for (var i = 0; i < 22; i++) {
            display.drawText(2, i + 1, "%b{red}You lose! :(");
        }
    },
    handleInput: function(inputType, inputData) {
        // Nothing to do here      
    }
}

assets/game.js

We're almost done! The only thing we haven't done is define the screen we actually start on! All we have to do is call Game.switchScreen after we call Game.init to make sure we don't try to load the screen before our initialization is done:

window.onload = function() {
    // Check if rot.js can work on this browser
    if (!ROT.isSupported()) {
        alert("The rot.js library isn't supported by your browser.");
    } else {
        // Initialize the game
        Game.init();
        // Add the container to our HTML page
        document.body.appendChild(Game.getDisplay().getContainer());
        // Load the start screen
        Game.switchScreen(Game.Screen.startScreen);
    }
}

Conclusion

Everything should now be working fine! If you load up index.html, you should be able to play the game we've made so far and see a colorful win screen and depressing losing screen. The next few posts will be more exciting as we're actually going to start display game maps and characters on the screen, but this post was an important step towards structuring our game.

Remember that all the code for this part can be found at the part 2 tag of the jsrogue repository. I hope you enjoyed this post and that you'll stick around for the next part!

Thanks for reading,

Dominic

Next Part

Part 3a - Carving Caves

Building a Roguelike in Javascript - Part 1

Mon, 01 Apr 2013 20:00:00 EDT

As I've mentioned in the past, I've always enjoyed playing roguelike games such as NetHack, Dungeon Crawl Stone Soup and ADOM. If you've never played these games before I highly encourage you to check them out. The ASCII graphics may not be for everyone but the incredibly deep gameplay more than makes up for it.

I've tinkered on a few home-grown roguelikes in the past and it's always proved to be great fun. Inspired by the most recent 7DRLC, a competition where participants must make a roguelike in 7 days, I went on a search for blog posts regarding developing roguelikes. I found Trystan Spangler's great set of posts on creating a roguelike in Java and then a corresponding set of posts for Clojure by Steve Losh and decided to try my hand at making a set of posts for making one in Javascript. I hope to get through at least a good part of Trystan's series and will try my best to make each post match content-wise.

I will be using rot.js library developed by Ondrej Zara. At the moment of writing, the master branch is ponting to the 81a8eb0d6c commit of the library. If there is any breaking changes in future blog posts, I'll make sure to let you know! The most important file in this project is the rot.min.js file.

Just to make sure everything is up and running, this first post will consist of getting a Hello, World up and running! We will start with a very basic game structure. We'll create an HTML page called index.html and our code will be in a Javascript file under assets/game.js. Note that all the code for this part can be found at the part 1 tag of the jsrogue repository.

Demo Link

The results after this post can be seen here

index.html

This file will be our HTML skeleton and simply includes the rot.min.js from the master branch and the assets/game.js.



  
    </span>Javascript Roguelike<span class="nt">

assets/game.js

The first thing we'll want to do is make sure our browser supports the rot.js library. We do this when the page is done loading by using the isSupported function like so:

// Check if rot.js can work on this browser
if (!ROT.isSupported()) {
    alert("The rot.js library isn't supported by your browser.");
} else {
    // Good to go!
}

If our browser has all the necessary functionality for rot.js to function, we're good to go! For this first blog post I just want to get everything set up by getting a canvas up on the screen and using the library to print out Hello, world in a variety of colors. In later posts we will make our game more structured, but for now this will do. All the following code will go in the else branch. We first have to create a display, which will be 80 characters wide and 20 characters tall. Once we've created this display object, we must add it to our HTML page.

// Create a display 80 characters wide and 20 characters tall
var display = new ROT.Display({width:80, height:20});
var container = display.getContainer();
// Add the container to our HTML page
document.body.appendChild(container);

We've now got our display up and running! We will use the display.drawText function which accepts x and y coordinates as well as a string to print (and an optional width for wrapping). When printing using drawText, we add in color formatting strings to specify the foreground color of the text (using %c{name}%) and background color of the text (using %b{name}%}). In the name of the color we can put any valid CSS color. We will be using the Color library object to convert a color to an RGB specifier via the toRGB function. We're going to print 'Hello, world!' 15 times with the foreground getting lighter while the background gets darker. We put this code right after creating our display:

var foreground, background, colors;
for (var i = 0; i < 15; i++) {
    // Calculate the foreground color, getting progressively darker
    // and the background color, getting progressively lighter.
    foreground = ROT.Color.toRGB([255 - (i*20),
                                  255 - (i*20),
                                  255 - (i*20)]);
    background = ROT.Color.toRGB([i*20, i*20, i*20]);
    // Create the color format specifier.
    colors = "%c{" + foreground + "}%b{" + background + "}";
    // Draw the text at col 2 and row i
    display.drawText(2, i, colors + "Hello, world!");
}

If worked, you should see the following when you open index.html:

So the final code for game.js is:

window.onload = function() {
    // Check if rot.js can work on this browser
    if (!ROT.isSupported()) {
        alert("The rot.js library isn't supported by your browser.");
    } else {
        // Create a display 80 characters wide and 20 characters tall
        var display = new ROT.Display({width:80, height:20});
        var container = display.getContainer();
        // Add the container to our HTML page
        document.body.appendChild(container);
        var foreground, background, colors;
        for (var i = 0; i < 15; i++) {
            // Calculate the foreground color, getting progressively darker
            // and the background color, getting progressively lighter.
            foreground = ROT.Color.toRGB([255 - (i*20),
                                          255 - (i*20),
                                          255 - (i*20)]);
            background = ROT.Color.toRGB([i*20, i*20, i*20]);
            // Create the color format specifier.
            colors = "%c{" + foreground + "}%b{" + background + "}";
            // Draw the text two columns in and at the row specified
            // by i
            display.drawText(2, i, colors + "Hello, world!");
        }
    }
}

Conclusion

We've now got a small test application up and running with the rot.js library. All the code for this part can be found at the part 1 tag of the jsrogue repository. I hope you enjoyed this post and that you'll stick around for the next part!

Thanks for reading, Dominic.

Next Part

Part 2 - Screen Management

Consuming JSON APIs With Go

Thu, 21 Mar 2013 22:30:00 EDT

I've been wanting to play around with the Go programming language for a while now so I figured a blog post would be a great opportunity to do so. Today we'll be building Go functions which will interact with the JSON API for the HostIP service. This simple service offers location information for an IP address. The API documentation is located here. The complete code for this post is located as a gist on my Github. For the sake of simplicity, I will be requesting location data encoded in JSON. Here is a sample request and response:

Request: GET http://api.hostip.info/get_json.php?position=true&ip=198.252.206.16

Response:
{
    "country_name": "UNITED STATES",
    "country_code": "US",
    "city": "Cambridge, MA",
    "ip": "198.252.206.16",
    "lat": "42.3758",
    "lng": "-71.1187"
}

Note: The lat and lang field can sometimes return null, so we will have to take this into consideration when working with the data.

The first thing we will be doing is creating a generic function which sends a HTTP GET request and receives a response. For larger API clients you'd want to generalize this for any type of HTTP request but for the sake of simplicity and shortness we will stick to GETs. We will be using the net/http and the io/ioutil packages for sending HTTP requests and reading byte arrays respectively. We begin with these imports:

import (
    "io/ioutil"
    "net/http"
)

Our function will accept a URL as a string, create a HTTP client, send the request, and return the response (or any errors that may have occured along the way). Thus our function returns a pair (byte[], error). So our function shell will look like:

1
2
3

func getContent(url string) ([]byte, error) {
    // magic
}

First thing we will do is build a new request using the NewRequest function. If we encounter any error, we simply exit out of our function returning nil as our byte array and the error itself. We then make a new HTTP client and send off the request using Client.Do. The good thing about the Do function is that it can be generalized to any type of HTTP method.

// Build the request
req, err := http.NewRequest("GET", url, nil)
if err != nil {
    return nil, err
}

// Send the request via a client
client := &http.Client{}
resp, err := client.Do(req)
if err != nil {
    return nil, err
}

Now that we've actualy sent off our request we want to get our received content. Note that the HTTP Request type wraps the body in a ReadCloser, so once we've obtained our content it's important to close the body. To make sure we don't forget to do so, we defer a call to the close function right way by using the defer keyword. This special keyword allows us to delay the execution of the statement until we return from the function. That way we can defer our call right away to make sure we don't forget about it and then do all the processing we need within the function while knowing our stream will safely be closed afterwards. Once that's done, we simply read from the body into a byte array using ReadAll, which takes in a reader and reads until we hit an EOF (or an error). We finish off our method like so:

// This function fetch the content of a URL will return it as an
// array of bytes if retrieved successfully.
func getContent(url string) ([]byte, error) {
    // Build the request
    req, err := http.NewRequest("GET", url, nil)
    if err != nil {
      return nil, err
    }
    // Send the request via a client
    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
      return nil, err
    }
    // Defer the closing of the body
    defer resp.Body.Close()
    // Read the content into a byte array
    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
      return nil, err
    }
    // At this point we're done - simply return the bytes
    return body, nil
}

We now have an easy way to get the content from a webpage. If you want to test this out you can convert a byte array to a string like so:

content, err := getContent("http://www.codingcookies.com/")
if err != nil {
    // Uh-oh! 
} else {
    // Note that this will require you add fmt to your list of imports.
    fmt.Println(string(content))
}

At this point we're ready to convert our JSON into someting useful! We'll be creating an IpRecord type which will be loaded with all our data received. The encoding/json package makes this extremely easy so go ahead and add that to your imports:

import (
    "encoding/json"
    "io/ioutil"
    "net/http"
)

We now want to define our structure. We will be using the Unmarshal function to transform our JSON bytes into the appropriate structure. This function is extremely handy and takes care of mapping the fields in JSON objects to the corresponding named field in the structure. Note that the function first searches for fields in the structure with the exact same name (case sensitive) followed by fields with the same name but varying in case, so we aren't restricted by case. We can also tag a field in the stucture to map to a different named field in the JSON object. An example of this is the country_name JSON field, which we will map to a field in the structure named CountryName. So our basic structure will look like this:

type IpRecord struct {
    // These two fields use the json: tag to specify which field they map to
    CountryName string `json:"country_name"`
    CountryCode string `json:"country_code"`
    // These fields are mapped directly by name (note the different case)
    City string
    Ip   string
    // As these fields can be nullable, we use a pointer 
    // to a string rather than a string
    Lat *string
    Lng *string
}

As you can see, the structure matches the JSON object quite closely. The Unmarshal function accepts a byte array and a reference to the object which shall be filled with the JSON data (this is simplifying, it actually accepts an interface). Note that this function will return either nil if successful, else an error. We can combine this with our getContent function to make a function which accepts an IP in a string and will return the IpRecord for it:

// This function will attempt to get the IP record for
// a given IP. If no errors occur, it will return a pair
// of the record and nil. If it was not successful, it will
// return a pair of nil and the error.
func GetIpRecord(ip string) (*IpRecord, error) {
    // Fetch the JSON content for that given IP
    content, err := getContent(
      fmt.Sprintf("http://api.hostip.info/get_json.php?position=true&ip=%s", ip))
    if err != nil {
        // An error occurred while fetching the JSON
        return nil, err
    }
    // Fill the record with the data from the JSON
    var record IpRecord
    err = json.Unmarshal(content, &record)
    if err != nil {
        // An error occurred while converting our JSON to an object
        return nil, err
    }
return &record, err
}

And with this we are done! Feel free to play around it with it! Here's some example output (note that the memory address gets printed for latitude and longitude):

    // Note this example requires fmt in the list of imports
    record, _ := GetIpRecord("72.21.194.212")
    fmt.Printf("amazon.com information:\n%v\n", record)
    record, _  = GetIpRecord("74.125.131.141")
    fmt.Printf("golang.org information:\n%v\n", record)
    record, _  = GetIpRecord("108.162.195.222")
    fmt.Printf("codingcookies.com information:\n%v\n", record)

This will output:

stackoverflow.com information:
&{UNITED STATES US Cambridge, MA 198.252.206.16 0x122b0888 0x122b08d0}
hostip.info information:
&{NETHERLANDS NL Enschede 184.72.186.1 0x122b0b20 0x122b0b68}
codingcookies.com information:
&{(Unknown Country?) XX (Unknown City?) 108.162.195.222  }

As a challenge to your self, modify the GetIpRecord function to work so that when an empty string (or a null string) is passed, it will fetch your own IP information (hint: check the API documentation). Again all the code from this post is located on this gist.

I hope you enjoyed this post, thanks for reading!

Dominic