Is there any way to split one main.js to few?

[swat0284]

hello, im new in JS, can i split my main.js file into:
player.js
gui.js
other.js
and how to comunicate betwene it?

[WombatTurkey]

Global Variable Scope http://www.w3schools.com/js/js_scope.asp

 

Is one way

[jfhs]

You can use JavaScript objects as namespaces or use a module system.

 

If you go the namespace route, you'll have one global object containing the parts of your application. Your gui.js file could then look like this for example:

if (typeof GAME === "undefined") {    var GAME = {};}GAME.gui = (function () {        // define some GUI functions here    function doSomeGuiStuff () {        GAME.other.doSomeStuff();        // ...    }        return {        // Put the functions you want to be "public" into this object:        doSomeGuiStuff: doSomeGuiStuff    };}());

This approach uses only one global variable (GAME) which is much better than having everything globally, but you always need to include your script files in the right order if one file depends on another file. This can get frustrating if your code gets bigger and you use more and more files. Therefore there are so-called module systems that help you with this, like require.js or using.js (disclaimer: this is my own library). In these libraries you either have a specific folder structure or a file that tells the module system where to find your modules. In using.js, you would include the using.js file and a file containing the script paths in your HTML file. The paths file can look like this:

// File "paths.js"(function () {        // This assumes you have using.js in your main directory    // and your scripts in a subfolder of the main directory    // called "js/"    var base = using.path + "js/";        using.modules.gui = base + "gui.js";    using.modules.player = base + "player.js";    using.modules.other = base + "other.js";    }());

// File "gui.js"using("other").define("gui", function (other) {        // Define your GUI functions here, using some stuff from the "other" module    function doGuiStuff () {        other.doSomeStuff();        // ...    }    return {        // Put all the functions you need to use somewhere else into this object:        doGuiStuff: doGuiStuff    };    });

If you're only developing a simple game, the namespace objects will suffice. For anything else you should probably read up on module systems. The important thing here is that you don't use global variables as advised in another answer because it can lead to hard-to-find bugs, especially in JavaScript.

[Jaskar]

You can use a singleton object, then manage all your game with it.