O'Reilly logo

Professional HTML5 Mobile Game Development by Pascal Rettig

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required