title: Organize Js project files
body: <p>I am at a point into developing an html5 game (sailing towards 500 lines in my main.js) where I'd need to split the code in several parts. I have already grouped different vars and functions by pertinence and moved these blocks into, for instance, main.js - game.js - player.js - enemy.js, ecc... and made them execute in the right order from html as to 'recompose' the main file I am working on now, like it was before splitting it:</p>
  
  <pre><code>&lt;script src="main.js"&gt;&lt;/script&gt; 
  &lt;script src="game.js"&gt;&lt;/script&gt;  
  &lt;script src="player.js"&gt;&lt;/script&gt;  
  &lt;script src="enemy.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It would work fine but this way all the variables are be accessible from the console. I tried to wrap each individual script into a self-executing function to prevent this (as is my main.js at the moment), but this approach would make variables I need to be globally accessible to fall out of scope. So what's the best practice in this case? I am reading around a lot but every solution i find seems to be behind my js skills or too abstract for such a small project like mine. Could someone point at the right direction?</p>
  
  <p>Thank you.</p>