van an nguyen

Splitting the game into several JavaScript files

Splitting the game into several JavaScript files

Introduction

JSBin is a great tool for sharing code, for experimenting, etc. But as soon as the size of your project increases, you’ll find that the tool is not suited for developing large systems. 

In order to keep working on this game framework, we recommend that you modularize the project and split the JavaScript code into several JavaScript files:

    • Review the different functions and isolate those that have no dependence on the framework. Obviously, the sprite utility functions, the collision detection functions, and the ball constructor function can be separated from the game framework, and could easily be reused in other projects. Key and mouse listeners also can be isolated, gamepad code too…
    • Look at what you could change to reduce dependencies: add a parameter in order to make a function independent from global variables, for example.
    • In the end, try to limit the game.js file to the core of the game framework (init function, mainloop, game states, score, levels), and separate the rest into functional groupings, eg utils.js, sprites.js, collision.js, listeners.js, etc.

Let’s do this together!

Start with a simple structure

First, create a game.html file that contains the actual HTML code:

game.html:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Nearly a real game</title>
  6.  <!– External JS libs –>
  7.  src=“https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.25/howler.min.js&#8221;>
  8.  <!– CSS files for your game –>
  9.  <link rel=”stylesheet” href=”css/game.css”>
  10. <!– Include here all game JS files–>
  11.  http://js/game.js
  12. </head>
  13. <body>
  14. <canvas id=“myCanvas” width=“400” height=“400”></canvas>
  15. </body>
  16. </html>

Here is the game.css file (very simple):

  1. canvas {
  2.    border: 1px solid black;
  3. }

If you remember all the way back to the HTML5.0 course, a development project structure was proposed to help you organise multiple files by directory and sub-directories (“folders” if you are an MS-Windows user). So let’s take the JavaScript code from the last JSBin example, save it to a file called game.js, and locate it in a subdirectory js under the directory where the game.html file is located. Similarly we’ll keep the CSS file in a css subdirectory:

first game structure

Try the game: open the game.html file in your browser. If the game does not work, open devtools, look at the console, fix the errors, try again, etc. You may have to do this several times when you split your files and encounter errors.

Isolate the ball function constructor

Put the Ball constructor function in a js/ball.js file, include it in the game.html file, and try the game: oops, it doesn’t work! Let’s open the console:

Ball.js:

  1. // constructor function for balls
  2. function Ball(x, y, angle, v, diameter) {
  3.    …
  4.     this.draw = function () {
  5.        ctx.save();
  6.        …
  7.     };
  8.     this.move = function () {
  9.       …
  10.       this.x += calcDistanceToMove(delta, incX);
  11.       this.y += calcDistanceToMove(delta, incY);
  12.     };
  13. }

We need to isolate the time based animation functions into a separate file

Hmmm… the calcDistanceToMove function is used here, but is defined in the game.js file, inside the GF object and will certainly raise an error… Also, the ctx variable should be added as a parameter to the draw method, otherwise it won’t be recognized… 

Just for fun, let’s try the game without fixing this, and look at the devtools console:

error the function calcDistToMove not found in ball.js

Aha! The calcDistanceToMove function is indeed used by the Ball constructor in ball.js at line 27 (it moves the ball using time-based animation). If you look carefully, you will see that it’s also used for moving the monster, etc. In fact, there are parts in the game framework related to time-based animation. Let’s move them all into a timeBasedAnim.js file!!

Fix: extract the utility functions related to time-based animation and add a ctx parameter to the draw method of ball.js. Don’t forget to add it in game.js where ball.draw() is called. The call should be now ball.draw(ctx); instead of ball.draw() without any parameter.

timeBasedAnim.js:

  1. var delta, oldTime = 0;
  3. function timer(currentTime) {
  4.    var delta = currentTime – oldTime;
  5.    oldTime = currentTime;
  6.    return delta;
  7. }
  9. var calcDistanceToMove = function (delta, speed) {
  10.    //console.log(“#delta = ” + delta + ” speed = ” + speed);
  11.    return (speed * delta) / 1000;
  12. };

Isolate the part that counts the number of frames per second

We need to add a small initFPS function for creating the <div> that displays the FPS value… this function will be called from the GF.start()method. There was code in this start method that has been moved into the initFPS function we created and added into the fps.js file.

fps.js:

  1. // vars for counting frames/s, used by the measureFPS function
  2. var frameCount = 0;
  3. var lastTime;
  4. var fpsContainer;
  5. var fps;
  7. var initFPSCounter = function() {
  8.    // adds a div for displaying the fps value
  9.    fpsContainer = document.createElement(‘div’);
  10.    document.body.appendChild(fpsContainer);
  11. }
  13. var measureFPS = function (newTime) {
  15.    // test for the very first invocation
  16.    if (lastTime === undefined) {
  17.       lastTime = newTime;
  18.       return;
  19.    }
  21.    //calculate the difference between last & current frame
  22.    var diffTime = newTime – lastTime;
  24.    if (diffTime >= 1000) {
  25.       fps = frameCount;
  26.       frameCount = 0;
  27.       lastTime = newTime;
  28.    }
  30.    //and display it in an element we appended to the
  31.    // document in the start() function
  32.    fpsContainer.innerHTML = ‘FPS: ‘ + fps;
  33.    frameCount++;
  34. };

At this stage, the structure looks like this:

Game structure

Let’s continue and isolate the event listeners

Now, consider the code that creates the listeners, can we move it from the GF.start() method into a listeners.js file? We’ll have to pass the canvas as an extra parameter (to resolve a dependency) and we also move the getMousePos method into there. 

listeners.js:

  1. function addListeners(inputStates, canvas) {
  2.    //add the listener to the main, window object, and update the states
  3.    window.addEventListener(‘keydown’, function (event) {
  4.       if (event.keyCode === 37) {
  5.          inputStates.left = true;
  6.       } else if (event.keyCode === 38) {
  7.          inputStates.up = true;
  8.       } …
  9.    }, false);
  11.    //if the key is released, change the states object
  12.    window.addEventListener(‘keyup’, function (event) {
  13.       …
  14.    }, false);
  16.    // Mouse event listeners
  17.    canvas.addEventListener(‘mousemove’, function (evt) {
  18.       inputStates.mousePos = getMousePos(evt, canvas);
  19.    }, false);
  20. …
  21. }
  23. function getMousePos(evt, canvas) {
  24.    …
  25. }

Isolate the collision tests

Following the same idea, let’s put these into a collisions.js file:

  1. // We can add the other collision functions seen in the
  2. // course here…
  4. // Collisions between rectangle and circle
  5. function circRectsOverlap(x0, y0, w0, h0, cx, cy, r) {
  6.    …
  7. }
  9. function testCollisionWithWalls(ball, w, h) {
  10.    …
  11. }

We added the width and height of the canvas as parameters to the testCollisionWithWalls function to resolve dependencies. The other collision functions (circle-circle and rectangle-rectangle) presented during the course, could be put into this file as well.

Final downloadable version and conclusion

After all that, we reach this tidy structure:

final game structure in files

Final game.html file:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>Nearly a real game</title>
  6. <link rel=“stylesheet” href=“css/game.css”>
  7.  src=“https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.25/howler.min.js&#8221;>
  8. <!– Include here all JS files –>
  9.  src=“js/game.js”>
  10.  src=“js/ball.js”>
  11.  src=“js/timeBasedAnim.js”>
  12.  src=“js/fps.js”>
  13.  src=“js/listeners.js”>
  14.  src=“js/collisions.js”>
  15. </head>
  16. <body>
  17. <canvas id=“myCanvas” width=“400” height=“400”></canvas>
  18. </body>
  19. </html>

We could go further by defining a monster.js file, turning all the code related to the monster/player into a well-formed object, with draw and move methods, etc. There are many potential improvements you could make. JavaScript experts are welcome to make a much fancier version of this little game 🙂

Download the zip for this version, just open the game.html file in your browser!

Our intent this week was to show you the primary techniques/approaches for dealing with animation, interactions, collisions, managing with game states, etc. 

The quizzes for this week are not so important. We’re keen to see you write your own game – you can freely re-use the examples presented during lectures and modify them, improve the code structure, playability, add sounds, better graphics, more levels, etc. We like to give points for style and flair, but most especially because we’ve been (pleasantly) surprised!

Leave a comment