The Cannon Game
The Cannon Game gives the player control of a cannon in a world with
a tempting tower of books. The player’s job is to knock down the tower
in 60 seconds or less by ﬁring cannonballs at it. The temperature of the
cannon goes up every time it is ﬁred, and it cools down slowly afterwards.
The current temperature of the cannon barrel and the maximum temper-
ature reached so far are indicated on a temperature gauge (as shown in
Figure 7.1). If the cannon barrel is overstressed by heating it above the
maximum allowable temperature, then it will explode the next time it is
ﬁred. (See Figures 7.2–7.6.) The player controls the cannon using the
keyboard. Table 7.1 shows the keyboard bindings.
Although this 60-second minigame is very basic, it exhibits in rudi-
mentary form all of the required characteristics of a game, which are the
1. It has a virtual world.
2. The world has stuﬀ in it.
3. The player can interact with the stuﬀ.
4. The player can win.
5. The player can lose.
The “virtual world” is the screen space, the “stuﬀ” is the cannon and the
books, the “interaction” is ﬁring the cannon and knocking down the books,
the player “wins” when the books are knocked down and “loses” when the
cannon overheats. What’s not to like?
162 7 • The Cannon Game
The temperature gauge.
↑ Barrel up
↓ Barrel down
← Move left
→ Move right
Backspace Stop moving
The keys used in the Cannon Game.
The start of the cannon game.
7.1 • The Platform and the Tower 163
The cannon game is underway, the barrel is starting to heat up.
The tower of books is toppled.
164 7 • The Cannon Game
The tower has been vanquished.
This is what happens when you let the cannon overheat.
7.1 • The Platform and the Tower 165
The ledge is 512 × 62 pixels.
• 7.1 The Platform and the Tower
I began by taking the Getting Started app from Section 5.4 and stripping
out the code in NonPlayerObjects.cpp. We’ll replace it with code to
create the cannon and the tower of books.
I want a platform for the cannon to sit on. In my favorite image editing
I create a ledge that is half the width of the image in Physics
World units, and I see in Figure 7.7 that it is 62 pixels high, which is
RW2PW(62) in Physics World units. There’s no need to make it a sprite,
so I just paint it into the background image background.png,asshownin
Figure 7.8. This code gets added to function CreateWorldEdges to add the
corresponding edge to Physics World, as shown in Figure 7.9 (remembering
that it has already computed w, the world width in Physics World units):
const float lh = RW2PW(62);
shape. Set( b2Vec2(0, lh), b2Vec2(w/2, lh ));
edge - > CreateFixture (&shape , 0);
While we were a little cavalier about how we created the edge bodies for
the boundaries of our Physics World, it’s time we got a little more careful
about how we structure our code. We’re going to create the rest of the
physics bodies for our game in the following order:
1. Shape: b2Shape or any of the shapes derived from it, see Section 6.4.
2. Fixture: b2FixtureDef, see Section 6.5.2.
3. Body deﬁnition: b2BodyDef, see Section 6.5.3.
4. Body: b2Body, see Section 6.5.3.
I like to use either Gimp or paint.net, depending on the task. They are both Open
Source, and between them, I have all the functionality that a lowly programmer could
need, for free.
Get Introduction to Game Physics with Box2D now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.