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>
    <script src='underscore.js'></script>
    <script src='quintus.js'></script>
    <script src='quintus_input.js'></script>
    <script src='quintus_sprites.js'></script>
    <script src='quintus_scenes.js'></script>
    <script src='quintus_dom.js'></script>
    <script src='rpg.js'></script>
    <style>
      * { padding:0px; margin:0px; }
      #quintus { background-color:black; }
    </style>
  </head>
  <body>
  </body>
</html>

As before, this file is almost completely empty except for a few reset styles and the script tags to load the game.

Setting Up the Game

To start the game, set up a basic structure for the game that sets up the window and loads some art assets.

Rather than reinvent the wheel for a nethack (also ...

Get Professional HTML5 Mobile Game Development 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.

Start your free trial