HTML and CSS Reference
In-Depth Information
if(!domTile) return;
if(this.shown[y][x]) return;
domTile.style.visibility = 'visible';
this.shown[y][x] = true;
},
hide: function(x,y) {
var domTile = this.getDom(x,y);
if(!domTile) return;
if(!this.shown[y][x]) return;
domTile.style.visibility = 'hidden';
this.shown[y][x] = false;
}
To keep the individual game code simpler, when a game calls any of the preceding tile manipulation routines,
the engine should fail silently if an invalid tile location is passed in. This allows the game to try to hide or show
tiles outside of the map without needing to do bounds checking. To facilitate this, the
validTile
checks a
passed in
x
and
y
location against the range of rows and columns passed in and returns
false
if the elements
are out of bounds.
This method is used by the
get
and
getDOM
methods to prevent indexing incorrectly into the
tiles
or
domTiles
array and causing an exception. The
set
method lets the game update the frame at a specific tile.
This can be used to do animation or change the state of the tile map (for example, when a door opens). The
show
and
hide
methods toggle the visibility of an individual square.
Building the RPG
With all the pieces in place, it's time to turn your attention to actually building the RPG that graces the title of
the chapter. The basic game plan is to load a text file that contains an ASCII map of a level, with monsters and
loot strewn about in various places, and turn that into a tile map and a set of sprites for the player to interact
with.
Creating the HTML File
The first step, as usual, is to create the necessary HTML wrapper file to hold the game. Create a new file called
rpg.html
and enter the code from
Listing 13-2
into it.
Listing 13-2:
The RPG wrapper file
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
<title>RPG</title>
<script src='jquery.min.js'></script>
