Back

Storing Data

Okay, so if you read the discription of this tutorial you already know the basic outline of this portion of the ASCII game tutorial. When it comes to learning new programming languages I find it helpfull to start with trying to make an ASCII game, this is due to a couple of reasons; firstly, it combines a lot of the more simple programming concepts in a very step-by-step way that tests your knowlege one piece at a time. And secondly, it does not require any advanced knowlege of computer graphics.

We are going to start with making a class to hold all the data necessary for a tile in our game. This will include r, g, b, color and charactor, x, y position will be determined by the corrosponding position in the map array.

class ASCIIchar {
	constructor(){
		this.r = 0;
		this.g = 0;
		this.b = 0;
		this.c = 'x';
	}
}

The next step is making a map class which will hold a multidimentional array of ASCIIchar elements. This will make managing data later on much easier, and we will eventually be adding methods to edit the map more effectively.

var WIDTH = 30;
var HEIGHT = 30;

class ASCIImap {
	constructor(){
		this.asciiArray = new Array(WIDTH);
		for (var x = 0; x < WIDTH; x++){
			this.asciiArray[x] = new Array(HEIGHT);
		}
		for (var x = 0; x < WIDTH; x++){
			for (var y = 0; y < HEIGHT; y++){
				this.asciiArray[x][y] = new ASCIIchar;
			}
		}
	}
}

Thats all there is to creating the map. All we have to do now is make an instance of it. For this tutorial we will make a multdimentional array to hold the maps in the background, and a map to hold foreground data. This will provide you with the maximum degree of flexibility when creating your own projects, in the next section I will write about how to display a specific map in the background.

var foreground = new ASCIImap;

var currentMapX = 0;
var currentMapY = 0;

var mapsInXdirection = 10;
var mapsInYdirection = 10;

var maps = new Array(mapsInXdirection);
for (var x = 0; x < maps.length; x++){
	maps[x] = new Array(mapsInYdirection);
}
for (var x = 0; x < maps.length; x++){
	for (var y = 0; y < mapsInYdirection; y++){
		maps[x][y] = new ASCIImap;
	}
}

So, now we have an array of maps that is 10 by 10 but they are all initialized to being filled with black x's. Instaid of accessing the characters one by one we will write some functions within the ASCIImap class to edit the array more easily. These will include methods for primitive rectangles, and circles. The code shown below is to be copy pasted into the ASCIImap class.

drawRect(x, y, width, height, r, g, b, c){
	for(var x2 = x; x2 < x + width; x2++){
		for(var y2 = y; y2 < y + height; y2++){
			this.asciiArray[x2][y2].r = r;
			this.asciiArray[x2][y2].g = g;
			this.asciiArray[x2][y2].b = b;
			this.asciiArray[x2][y2].c = c;
		}
	}
}

drawCircle(x, y, radius, r, g, b, c){
	for(var x2 = x; x2 < x + radius; x2++){
		for(var y2 = y; y2 < y + radius; y2++){
			if (Math.sqrt((x*x) + (y*y)) <= radius){
				this.asciiArray[x2][y2].r = r;
				this.asciiArray[x2][y2].g = g;
				this.asciiArray[x2][y2].b = b;
				this.asciiArray[x2][y2].c = c;
			}
		}
	}
}

So that's all i'm going to do as far as editing the maps goes but you can add as many methods as you desire. The next and final part is preparing the data for updating and displaying. We will create a function that is called every frame that sets the foreground to the map. This will give the appearence of clearing the foreground and foreground objects like the charactor will override the background value without changing the map when we draw them later.

function clearForeground(){
	for(var x = 0; x < WIDTH; x++){
		for(var y = 0; y < HEIGHT; y++){
			foreground.asciiArray[x][y] = maps[currentMapX][currentMapY].asciiArray[x][y];
		}
	}
}

So thats it for this part. In the next section we will talk about updating and displaying, this is where we will create our mainloop and talk about a couple of ways we can draw to the screen.

Click here to go to the next part!