HTML and CSS Reference
In-Depth Information
<canvas id="canvas" width="256" height="256" style="position: absolute; top:
50px; left: 50px;">
Your browser does not support the HTML 5 Canvas.
</canvas>
<canvas id="canvas2" width="32" height="32" style="position: absolute; top:
256px; left: 50px;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
In the rest of the chapter, we will look at creating a simple tile-based game using some
of the techniques first discussed in
Chapter 4
.
A Simple Tile-Based Game
Let's move from
Asteroids
to another classic game genre, the tile-based maze-chase
game. When you're discussing early tile-based games, undoubtedly
Pac-Man
enters the
conversation.
Pac-Man
was one of the first commercially successful tile-based games,
although it certainly was not the first of its kind. The maze-chase genre was actually
well covered by budding game developers before microcomputers were even thought
possible. Many minicomputer and mainframe tile-based games, such as
Daleks
, were
crafted in the '60s and '70s. In this section, we will create a simple turn-based maze-
chase game. Our game,
Micro Tank Maze
, will be based loosely on
Daleks
, but we will
use the tank sprites from
Chapter 4
.
Figure 9-10
is a screenshot from the finished game.
Micro Tank Maze Description
Micro Tank Maze
is a simple turn-based strategy game played on a 15×15 tile-based
grid. At the beginning of each game, the player (the green tank), 20 enemy tanks (the
blue tanks), 25 wall tiles, and a single goal tile (the phoenix) are randomly placed on
the grid. The rest of the grid is simply “road” tiles on which the tanks move. The player
is tasked with getting to the goal object without running into any walls or any of the
enemy tanks. On each turn, the player and all enemy tanks will move a single space
(tile) on the grid. Neither the player nor the enemy tanks can move off the grid edges.
If the player runs into a wall tile or an enemy tank, his game is over. If an enemy tank
runs into a wall or another tank, it is destroyed and removed from the game board. If
an enemy tank runs into the player tank, it and the player are destroyed. If the player
hits the goal tile without an enemy tank also hitting the tile on the same turn, the player
wins.
