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.

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:

1
2
3
4
5
6

// Check if rot.js can work on this browserif(!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.

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:

window.onload=function(){// Check if rot.js can work on this browserif(!ROT.isSupported()){alert("The rot.js library isn't supported by your browser.");}else{// Create a display 80 characters wide and 20 characters tallvardisplay=newROT.Display({width:80,height:20});varcontainer=display.getContainer();// Add the container to our HTML pagedocument.body.appendChild(container);varforeground,background,colors;for(vari=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 idisplay.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!