I'm new to JS game programming. In the past, when coding games (in Java), I tend to make separate files for configuration and game data (maps, character stats, etc). This is for separation of code and data. How can I effectively implement this on JS?
EDIT: This is for browsers only.
In this answer I'm going to assume that your game is a web game, if it's a locally running game in a Node.JS wrapper or something similar then the answer would be a little different and I'll edit the answer.
To have a data file that is separate from the code that runs it you can create a JSON file and then load it from the code.
First let us define a file called classes.json that looks like this:
{ "classList":[{ "name": "Wizard", "health": 5 },{ "name": "Rogue", "health": 23 }] }
Now load the data file by requesting it from the site:
var request = new XMLHttpRequest();
request.addEventListener("load", function requestListener(){
//TADA! Now I have the class data.
var classes = JSON.parse(this.responseText);
var wizard = classes.classList[0];
var rogue = classes.classList[1];
});
request.open("GET", "http://www.userx01s-game.com/classes.json");
request.send();
Doing it this way also allows you to delay loading the classes information until it is absolutely necessary to have it, thus speeding the initial load of the game.
P.S. For more information about ajax requests you can check out https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
EDIT: Here I will also include an example of if you don't want to use AJAX and instead just want to have the data available upon initial page load.
First create a file called classes.js that looks like this:
var classList = [{ "name": "Wizard", "health": 5 },{ "name": "Rogue", "health": 23 }];
Then in your HTML you include this file like normal:
<html>
<head>
<script src="classes.js" ></script>
<script src="game.js" ></script>
</head>
</html>
Finally in your game use the data as a standard JavaScript object:
var wizard = classList[0];
var rogue = classList[1];
