How to Create RPGs in Your HTML5 Game - dummies

How to Create RPGs in Your HTML5 Game

By Andy Harris

The role-playing game (RPG) is one of the most enduring forms of gameplay. While role-playing games can work in many different ways for your HTML5 game, the general setup follows a familiar pattern. The user engages as a character with a set of basic characteristics. The player then collects objects and defeats enemies to eventually improve her performance, which leads to more difficult monsters.


Build the game’s base Character class

Begin by building a generic Character class that supports all the common characteristics, and you can then easily modify this class to build all the heroes and monsters you can imagine. The keys to any character class are the statistics used in combat and leveling. You can handle this a number of ways:

  • Name: While this may be obvious, the name is useful for reporting what is happening.

  • hp: Hit points. This is the amount of damage a character can take. If you have a lot of hit points, you can take a lot of damage.

  • hitPerc: This is the percentage of likelihood that a particular attack will hit. If the hitPerc is 50, attacks will land half the time. Higher values lead to more successful attacks.

  • damage: The damage modifier indicates how much damage will be done upon a successful hit. This value indicates how many six-sided dice will be rolled. (Using dice gives a more believable damage value than a straight random value. For example, rolling two six-sided dice will produce the values five through nine much more frequently than 2 or 12.)

  • defMod: This value is a defensive modifier. It’s used to simulate dexterity and the ability to dodge an attack. The defense modifier is used to make an opponent less likely to land a blow.

  • armor: Once an attack has landed, the armor value will absorb some of the damage. The larger the armor value, the harder it is to hurt the character.

The Character class holds all these values in properties, and it also contains two functions. The showStatus() function returns a string containing all the stats for the character. The fight() function manages a round of combat.

Here’s the code for the fight() method:

  tChar.fight = function(enemy){
   //assumes enemy is also based on Char
   hitPerc = (this.hitPerc - enemy.defMod) / 100;
   if (Math.random() < hitPerc){
    damage = 0;
    for (i = 0; i < this.damage; i++){
     damage += parseInt(Math.random() * 6);
    } // end for
    damage -= enemy.armor;
    enemy.hp -= damage;
    if (enemy.hp <= 0){
     alert( + " is dead!")
     document.location.href = ";
    } // end 'enemy dead' if
   } // end "hit" if
  } // end fight

Here’s how the fight() method works:

  1. Accept another character as a parameter.

    The fight() method expects an enemy class, which should also be a character (or something based on the Character class).

  2. Determine the hit percentage.

    Subtract the enemy’s defense modifier from the attacker’s hitPerc. This will give a value between 0 and 100. Divide this value by 100 to get a 0-1 float.

  3. Roll a random number.

    The Math.random() function returns a value between 0 and 1. Compare this to the calculated hitPerc to find out if there has been a hit.

  4. Roll the dice.

    Roll one six-sided die for each damage point, and add this value to a running total to determine how much damage is caused by this hit.

  5. Compensate for enemy armor.

    Subtract the armor value from the damage amount.

  6. Subtract damage from the enemy hp.

    Apply damage by subtracting it from hp.

  7. Check to see if the enemy is dead.

    If the hp goes below 0, the enemy is dead.

The combat model is designed to be simple and flexible. All the various pickups or level improvements can be boiled down to modifying small characteristics.

Game heroes

The hero is another extension of the Character class, but (as befits a hero) it has a bit more enhancement. The hero uses a sprite sheet animation. A GIMP file allows you to build custom characters by turning on and off various layers in GIMP.

The Hero class is much like the default Character. The main addition is the animation code. Here is a portion of that code:

 function Hero(){
  tHero = new Character("hero", "hero.png");
  tHero.loadAnimation(512, 256, 64, 64);
  tHero.renameCycles(new Array("up", "left", "down", "right"));
  //leave all stats at their default values
  tHero.pause = function(){
  }// end
  tHero.checkKeys = function(){
   if (keysDown[K_LEFT]){

The hero uses a predictive collision model to prevent walking into the orc. If a collision is noted, the hero simply backs up to the original spot before updating itself:

  tHero.checkCollision = function(){
   //predictive collision detection
   if (this.collidesWith(orc)){
    //back up and pause
    this.x -= this.dx;
    this.y -= this.dy;
  } // end checkCollision

If the hero collides with the orc, the fight() mechanism begins. This is actually quite simple:

 function fight(){
  heroStatus.innerHTML = hero.showStats();
  orcStatus.innerHTML = orc.showStats();
 } // end fight function

The fight() function has the hero attack the orc, and then the orc attacks the hero. After the round, each character’s statistics are displayed in the appropriate output.

How to improve the role-playing game

This game simply begs for improvements. There are many ways to take this particular example further:

  • Add more monsters. You can build an entire range of monsters. Note that each monster could simply be an image and the combat statistics.

  • Add an inventory. Allow the user to pick up various items. Each of the items will simply change a variable or two: making the player stronger, giving her more damage, or better defense against attack, for example.

  • Include a dungeon. Use some background graphics to add atmosphere. You can always use an array of blocks for barriers.

  • Add a tile-based dungeon. Of course, tile-based worlds and RPG combat are natural companions.