HTML and CSS Reference
In-Depth Information
Chapter 13
Crafting a CSS3 RPG
What's in this chapter?
• Creating a scrolling tilemap
• Building an RPG
• Adding enemies and power-ups
Wrox.com Code Downloads for this Chapter
The
wrox.com
code downloads for this chapter are found at
www.wrox.com/rem-
title.cgi?isbn=9781118301326
on the Download Code tab. The code is in the chapter 13 download and individu-
ally named according to the names throughout the chapter.
Introduction
This chapter exercises the DOM-based code from Chapter 12 to build a simple a nethack-style RPG. This game
requires tiled background support, so the engine also adds a class in the next section called
DOMTileMap
, which
is designed just for that purpose.
Creating a Scrolling Tile Map
To build a nethack-style game, the engine needs to add a 2-D tile map to the game in an efficient manner. One na-
ive way to do this would be to just add an absolutely positioned sprite at each position. This does work; however,
as the map gets larger, it slows the browser down to a crawl. Instead, you want to create a single large sprite that
can be moved around as a unit and treated like a single element.
Understanding the Performance Problem
If you take a medium-sized map that might be 50 tiles tall by 50 tiles wide, this would result in 2,500 sprites,
each of which needs to be stepped every frame. In addition, every time you make a modification to an element,
the browser needs to repaint the container, resulting in a significant slowdown in frame rate from constantly up-
dating. If you don't create a more efficient mechanism of collision detection than looping over every potential
object, then every moving sprite would need to be tested in each iteration. All this would lead to exceedingly
small map sizes or horrible performance.
