Console-like display in the browser?

I’ve been working for some time on a Roguelike in Javascript. One of the first things I had to do for my Roguelike, of course, was establish some sort of display routine. I could have gone with HTML5’s new <canvas> tag or something similar, but setting up a console-like environment for canvas can get a little involved. So instead, I established a way to use the browser’s native text rendering. Say hello to a simple Javascript class for console-like rendering in the browser: I call it display.js.

So, let’s take a look at the code required initialize a basic 80 by 25 console and draw a few characters with the display class:

// create a display for console-like rendering
display = new Display(new Vector2(80, 25), new Vector2(10, 35), true);

// let's draw the classic @ sign:
display.ch("@", new Vector2(10, 10));

// maybe fake a few walls
for(var x = 0; x<10; x++) {
display.ch("#", new Vector2(x, 0));
}

// let's put a green slime down, too
display.ch("j", new Vector2(15, 15), "green");

Okay, let’s step through this code really quickly. Before we begin, though, I’d like to note the Vector2 class I use here; it’s nothing more than a utility function I use to hold a position with X and Y values (you can grab a copy of it here). So, in the code, the first line initializes the console display. The first variable we pass in to this function call is the size of the display–I use 80 by 25 because that’s a standard console size, but these numbers could be anything you want. The second variable we pass in is the offset of the console from the rest of the page. The third variable we pass in is whether we want this display to open in a new window or not. If you set it to false, the display will simply be written to your HTML page. If it’s set to true, the console will open in a popup window.

The next line calls a function on our newly created console, namely ch. This allows you to display a character on the screen and takes a minimum of two and up to five parameters. In order, these are: the character to display, the position of that character, the color of the character, the opacity of the character, and the background color of the character. Only the character you want to write and the position of that character are required; the others are optional. The color variable accepts a few basic color names as well as hex values. The next few lines do nothing more than demonstrate the various applications of the ch function, which is the only function display.js makes use of.

In finis…

As you can see, the display class isn’t very advanced right now, but it’s been all I’ve needed so far. If you want to download the class, you can grab it here. Quick note, it does make use of jQuery, so make sure you include that in your project before you attempt to use it. As progress on my game continues, this library will likely be updated with more functions as I need them. Thanks for taking a look, and be sure to keep an eye on Hey Javascript for more updates in the near future! (hopefully, I’ll be posting some dungeon generation algorithms in Javascript soon)

3 thoughts on “Console-like display in the browser?”

  1. […] There have been, of course, plenty of articles written about field of vision, and there is in fact an excellent compendium of resources over at Roguebasin (you can check that out here). This is a problem that has been thoroughly solved many times, beginning with Rogue’s rudimentary solution (you can see all the tiles in the room you’re in, but nothing else is visible; when in corridors, only the corridor tiles next to you are visible). The thing is, only a few Javascript algorithms (if any) are available to calculate FOV. Since I’m writing a Roguelike and have of course come up with an algorithm of my own, I have decided to remedy this lack of JS algorithms by sharing mine with you. It’s nothing fancy, but does provide a rather nice gradient falloff, which works in tandem with the display.jslibrary that I previously posted. […]

  2. How’s your JavaScript Roguelike coming along. I just discovered Brogue and decided to create Yarl.js which stands for Yet Another Rogue-Like. The plan being to basically recreate Brogue in JS, or at least most of the game mechanics. It’s more a test case for putting JS through its paces for game development. I think a Roguelike in the spirit of Brogue would be a fair first test. Anyway, appreciate the articles and insight. Would certainly like to play your game and if avail. poke around in the code too.

    1. Well, I don’t really have anything to show at the moment as far as my game goes. All my source code got wiped a while ago and I didn’t have the inspiration to start it up again until recently. :( I’d love to see what you come up with for Yarl.js, though–it sounds really interesting!

Leave a Reply

Your email address will not be published. Required fields are marked *