A good example of me refining my code

July 6th, 2011

If you’ve been following my blog then you’ve seen, and hopefully completed, my 6 part HTML5 game tutorial. I’ve been working on it on and off, turning it into a more complete game. At the same time, I’ve been really trying to strengthen my JavaScript fundamentals. The more experienced you get at development, the more often you’ll look at old code and think “I can’t believe I did that, I would totally do it this way now.” In fact, I think if you look back on you old code and don’t want to improve it, you doing things wrong!

Here’s a pretty good example of how a developer gets better. In my original for the space shooter tutorial, I used two for loops to move the enemy ships around the canvas and it works just fine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function moveEnemies() {
 for (var i = 0; i < enemies.length; i++) {
   if (enemies[i][1] < height) {
     enemies[i][1] += enemies[i][4];
   } else if (enemies[i][1] > height - 1) {
     enemies[i][1] = -45;
   }
 }
}

function drawEnemies() {
 for (var i = 0; i < enemies.length; i++) {
   ctx.drawImage(enemy, enemies[i][0], enemies[i][1]);
 }
}

This isn’t bad code, it works just fine and since it’s not that complicated of a game, an extra for loop isn’t going to slow down the game all that much. But this can be improved so that we only need one for loop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function moveEnemies() {
 for (i in enemies) {
   if (enemies[i][1] < canvas.height) {
     drawEnemies(enemies[i][0],enemies[i][1]);
     enemies[i][1] += enemies[i][4];
   } else if (enemies[i][1] >= canvas.height) {
     enemies[i][1] = -45;
   }
 }
}

function drawEnemies(enemyX,enemyY) {
ctx.drawImage(enemy, enemies[i][0], enemies[i][1]);
}

The main difference is I’ve removed the for loop that was in the drawEnemies function. Instead of cycling through all the enemies in the enemies array twice, once in moveEnemies and once in drawEnemies, we just cycle through them in the moveEnemies function and call the drawEnemies function each time through the loop. Since the drawEnemies function is only one line, it uses less resources to call it every time through the loop than if we have to run two loops 30 times a second. It might not make a huge difference in this example but in a bigger and more complicated program, it might make a huge difference.

Another thing I’ve changed is the parameters of the for loop. The original looks like this:

1
for (var i = 0; i < enemies.length; i++)

And I’ve changed it to this:

1
for (i in enemies)

This does the exact same thing, do a loop for every item in the enemies array. But the difference is we save a few characters, which once again, won’t make a that big a difference in a smaller program, but in a larger and more complicated one, saving every byte you can matters.

Don’t think that you have to go back and fix everything that you’ve built but it’s a good idea to every once in a while take a look back so you can see how far you’ve come. And there’s nothing wrong with having a project that you keep going back to and improving more and more.

Leave a Reply

Your email address will not be published. Required fields are marked *