I recently discovered rot.js, an awesome javascript library for creating roguelike games. I saw a couple tutorials for it online, though thought it would be useful for both myself and anyone else that wanted to learn how to use the library to create a tutorial series as the inaugural post series for my brand-spankin’ new blog.

You can check out the source code for the library itself over at Ondřej Žára’s github, look at the documentation for the library at his github.io site, or check out a complete copy of the tutorial code itself over at my own github page.

Setting up index.html

First up we’ll set up the index.html page so as to import both the library itself (rot.js) along with the game code (game.js). 

<!DOCTYPE html>
<html>
  <head>
    <title>rot.js Tutorial Roguelike</title>
  </head>
  <body>
    <script src="./rot.js"></script>
    <script src="./game.js"></script>
  </body>
</html>

Note that “./rot.js” and “./game.js” are relative paths that tell the browser to “look in the same folder that index.html is currently in for rot.js and game.js”.

Creating our game’s logic

Next up is game.js. Note that we’ll be refactoring both the game code and file structure in later tutorials, but for now will be leaving all of the game’s logic in this script.

First, we declare three parameter stores to hold our game’s options (just the width and height of the game window for the time being), a few colors using the ROT.Color.toRGB function, and a color combinations store, which we’ll leave empty for now.

// game.js

// Parameter stores
var gameOptions = {
	width: 50,
	height: 30
};

Note that each color needs to be set with the ROT.Color.toRGB function, which accepts an array of RGB values as its only parameter. For instance, we’d create blue by passing in [0,0,255]:

var blue = ROT.Color.toRGB([0,0,255])

I’ve only included colors we’ll be using in our initial Hello World application for now.

var colors = {
	white: ROT.Color.toRGB([255,255,255]),
	black: ROT.Color.toRGB([0,0,0]),
	red: ROT.Color.toRGB([255,0,0]),
	green: ROT.Color.toRGB([0,255,0]),
};

var colorCombos = {};

Next, we’ll be creating our helper functions that will create our game’s display, the display’s container, foreground/background colors, and text to append to the game display.

// Helper functions

var createDisplay = function(displayWidth, displayHeight) {
	return new ROT.Display({width: displayWidth, height: displayHeight});
};

var createContainer = function(displayObject) {
	return displayObject.getContainer();
};

Note that createColors accepts two ROT.Color.toRGB()-created colors as its parameters. Since we’ve already created several colors in the colors parameter stores, we can pass them to our helper function using dot notation:

var blueFGwhiteBG = createColors(colors.blue, colors.white);
var createColors = function(foregroundColor, backgroundColor) {
	return "%c{" + foregroundColor + "}%b{" + backgroundColor + "}";
};

var createText = function(colors, string) {
	return colors + string;
};

Finally, we declare our initialization function, which creates our game display (accessing the width and height parameters from our previously declared gameOptions parameter store), creates a container for our display, and appends the display to our index.html page.

// Game Setup
var init = function() {
	var display = createDisplay(gameOptions.width,gameOptions.height);
	var container = createContainer(display);
	document.body.appendChild(container);

	colorCombos.whiteBlack = createColors(colors.white, colors.black);
	colorCombos.greenRed = createColors(colors.green, colors.red);

	var title = createText(colorCombos.greenRed, "rot.js Tutorial");
	var greeting = createText(colorCombos.whiteBlack, "Hello, World!");
	display.drawText(0, 0, title);
	display.drawText(18, 14, greeting);
};

init();