Monday, September 9, 2013

Adding Our Template Game File

Now we will add our own .js (JavaScript) file to our game project.  Go inside your text editor and create a new blank file.  Save it as tempGame.js  and place it in the same folder as example01.html and three.min.js so that all the files can "see" each other. 
Also make sure you save our new tempGame file as a .js extension.  This extension tells the browser that our file will add functionality to the webpage - in our case the game and graphics code.  There's one more line to add to our old HTML file now so that it can find our new .js file that we just created. 

Now copy the following line:
<script src="js/tempGame.js"></script> 
   

Open up the example01.html file in your text editor and paste it right below the "three.min.js"line.  The finished file should look like this:
<!DOCTYPE html>
<html>
   <head>
      <title> Hello World </title>
   </head>
   <body>
      Hello World! It Works!
      <script src="js/three.min.js"></script>
      <script src="js/tempGame.js"></script>        
   </body>
</html>


Save the updated example01.html file (it's ok to overwrite the old example01.html).  And don't worry that our tempGame.js file is blank at this time.  Do you remember how to test everything?  Right-Click example01.html and 'open with...' and choose Google Chrome.  Then click on Chrome's menu button in the upper-right-hand corner (a 3 horizontal line button).  Go to Tools-> JavaScript Console.  If you don't see any Errors in red color... Congratulations once again!  You have successfully created a .js shell where we will place our future game code.  If you see any errors, make sure you spelled the file names and extensions exactly like I did.  Also make sure all 3 files now (example01.html, three.min.js, and tempGame.js) are in the same folder so that they can all see each other.

 Next up, easy graphics set-up with Three.js, and then hang in there - in the post immediately after that, I promise we will start drawing 3D graphics inside the browser!