Creating a Game Loop: Give your players a reason to play

This entry is part 2 of 2 in the series Creating Simple Game Loops

So far, we’ve managed to get our little hero (O’Ranger) moving about the canvas (play area). What’s next?


In our previous post we spoke of zombies, and I think it is high time we start introducing some of those little blighters into the game.

To make it fair, the zombies are going to be slower than O’ranger, however, there’s going to be an increasing number of them to avoid as time goes on!

See the Pen The Zombies by Tom McQuillan (@BangEqual) on CodePen.dark

We have introduced a new variable zombies that will hold a reference to our zombies. We have also refactored the loop’s update() and render() functions. This is because Player now has an update and render method of it’s own!

We’ve added a new object Zombie() which we will use to create a bunch of them. Zombie also has it’s own update and render methods. In the init method, we call a new function buildZombies() which takes a number of zombies to build (in this example 16). buildZombies adds 16 zombies into the zombies array.

Now in the loop’s update and render method, we hand over updating and rendering control to the zombies and player. This’ll make it easier to separate the concerns for debugging later.

Currently, those zombies are absolutely harmless, they just wobble about.

Let’s change that!

I want the zombies to pick up the chase when O’ranger is within smelling distance.

See the Pen Chasing Zombies by Tom McQuillan (@BangEqual) on CodePen.dark

Series Navigation<< Creating a Game Loop: What it is and how it’s done

Leave a Reply

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