A Map making aid for D&D please

**Durakken** · 11-04-2015, 03:19 PM

The only real hard part is the factor of 100 thing depending on how you decide to create the rows cuz it requires a loop in a loop which newbies tend to find confusing or math which I'd have to look up how to do cuz I forget how represent that with logic and math.

Sent from my RCT6773W22B using Tapatalk

**Durakken** · 11-05-2015, 12:53 AM

My tablet is having issues v.v buy cheap things never lasts long and is recharging right now. I couldn't go to sleep for a bit and had nothing else to do so I threw this together.

So here's what you need to do to make it work.
make a new folder.
copy the below into a notepad file and save as whatever with the extension ".html". Make sure it is ".html" and not ".html.txt" which sometimes happens. You'll know because it will have a browser-ish icon rather than a text file icon. Save it in that new folder.

In that same folder and not in a subfolder put the various terrain tile images in there.
If you don't want to change them, just make sure you have them the same title as in the rules you gave and are ".gif"s.

The code will resize them to 16px across currently.

To change the file type or name just find it in the code and alter it to what you want it to be.
To change the 16px thing you need to remove only the following "width=16" and it will then load the images as whatever size the real image is...however you want consistency so I suggest changing the width number rather than removing it.

This is hardly the best, most efficient, or cleanest way of doing this, but it is a 100x100 terrain map grid that follows the forest rule set exclusively to create it.

HTML Code:

<html>
<body>
<table cellspacing="0" colspacing="0" cellpadding="0" border="0">
<tr>

<script>

var i = 0;
var rowcounter = 0;
var total = 10000;

while (i < total) {

	var die = Math.floor((Math.random() * 20) + 1);
	
	if(die >= 1 && die <= 2) {
		img = "plains.gif";
	} else if (die >= 3 && die <= 4) {
		img = "scrub.gif";
	} else if (die >= 5 && die <= 14) {
		img = "forest.gif";
	} else if (die == 15) {
		img = "rough.gif";
	} else if (die == 16) {
		img = "hills.gif";
	} else if (die == 17) {
		img = "mountains.gif";
	} else if (die == 18) {
		img = "marsh.gif";
	} else if (die == 19) {
		img = "pond.gif";
	} else if (die == 20) {
		img = "depression.gif";
	} else {
		img = "x.gif";
	}

	document.write("<td><img src=" +img+ " width=16 ></td>");
	
	if(rowcounter == 99) {
		if(i == 9999) {
			document.write("</tr>");
		} else {
			document.write("</tr><tr>");
		}
		rowcounter = 0;
	} else {
		rowcounter++;
	}
	
	i++;
}
</script>
</table>
</body>
</html>

**Devilin** · 11-13-2015, 03:56 PM

Oh cool, and I can make multiple folders, with multiple sizes and make as many of my own generators as I want just by adjusting those values. Thanks! I can't figure out where to find the words that create different stuff in Javascript so thats about all I can do. But its a start. I'll just make a few dozen slight variations of the script you made. One for each terrain type.

**Durakken** · 11-19-2015, 10:36 AM

Originally Posted by Devilin

I can't figure out where to find the words that create different stuff in Javascript so thats about all I can do.

What do you mean by "create different stuff"?

**Devilin** · 12-05-2015, 07:11 PM

The commands that have different effects? The key words that when inserted can change the formula?

**Durakken** · 12-05-2015, 09:04 PM

Let's try to explain then...

Math.random() = Math is an object that is library of commands in Javascript that most people use rather than make their own math stuffs. The dot is called a dot opperator which basically denotes a subset. For example Earth.NorthAmerica.NewYork.NewYorkCity. They () indicates that this subset thing is what is called a method or subfunction. This just means that it is running code from some place else, in this case random(). Methods basically take in variables and then spit out an answer.

Math.floor() and Math.random()... random() creates a random number, i'll save you on how thats done. floor() rounds the number down so that if you have 6.5 it will round to 6. round() would round to the nearest. ceiling() rounds to 6.

Variables = If you understand algebra you understand what these are. In programming you can have different types of variables though. The code "var rabbit = "Bugs"" for example means that I am declaring a variables named rabbit with the value of Bugs. So that if you had another variable, lets say, lastname = "Bunny" and then added them together like so "Name = rabbit + lastname" what would be in Name is "BugsBunny"

Some variable names are not allowed because they are key commands but those are easy to work around.

An if command says this
if(x > y) { bob};
this says if the formula in the parentheses is true then do what are in the brackets. The ; means this is the end of the line of code. It's needed in javascript, but not in all languages.
to extend this to what to do if false then you write...
if(x > y) { bob} else {dave};
The thing you see in the code above is what is called a nest if statement... if this then do that, but if not then if this do that, but if not do that. That is what those else if statements do.

The while(){} command is the same way as the if command While the formula is true do the things in the brackets

document.write() is referring to the object known as "the document" which is the webpage more or less and the method is saying you want to write to the document.
Inside the method when you are writing to the document in normal things you'd put there you put then in quotations. When you want to put a variable you have to have them not in quotes and add them in...for example

("The rabbit\'s name is " +rabbit)

That will give you "The rabbit's name is Bugs" on the page. The backslash is code to say that you want to nullify the meaning of this character in the code and instead write it. This is used to allow an apostrophe to be written to the page rather than treated as code.

The last thing you see which uses carrots is html. It's a separate markup language...but again, simple, that tells the page how to display what you've been given. In the above code i used something that is probably frowned upon, but meh. Basically what it is doing is creating a table... or a grid, and then starting table rows (<tr>) and then telling what is going in the cells (<td>) of the rows. In html we call those tags and every tag (despite me not doing so here) should be closed and you close via the same tags but written like this (</td>)

That covers just about everything in the code that is used. If I understand what you are saying you're having problems with either variables or the nested if structure. Hopefully with this explanation you should be able to understand and get what you want, but feel free to ask a specific thing or try to alter the code and post it. I'm sure I or someone else would be more than happy to look at and make it work... Sometimes it is easier to learn and communicate through just trying and then having it corrected.

Thread: A Map making aid for D&D please

Thread Tools

Display

Posting Permissions