Battle System Tutorial by Radnen

From Spheriki

So you want to create a battle system, but lack the skills? Well, to be frank, if you do not have the skills, then you probably shouldn't be reading this tutorial. This tutorial is only designed for those who do have the skills but don't know where to start or what needs doing first.

Disclaimer: You will need to have your own graphics. All of the images I'm loading will not be included as a download, it may be wise to substitute the images, fonts and windows with your own. Also, this tutorial will teach you how to make a single 1 on 1 turn based battle system. Later we may get into other more advanced methods.

I am also not done with this tut, but never fear, it'll get done soon.

Player

Your game will need to have a hero. Someone with courage who can brave the foul and slay the evil. We will name this hero... bob.

var player = {
 name: "bob",
 level: 1,
 exp: 0,
 next: 80,
 atk: new Stat(5),
 def: new Stat(2),
 hp: new Stat(10),
 mp: new Stat(10),
 portrait: LoadImage('face.png'), // you'll need to specify your own.
}

I have added in a portrait image, remember, you may want to change it to a file you have, copying this won't help you any unless you actually do have a face.png in your graphics sub-folder.

notice the "new Stat()" value I added to the stats. Well, this is called adding a stat object. This object will hold the min and max stat value so it's easier to level them up or equip items that affect these stats.

function Stat(num)
{
 this.max = num;
 this.min = num;
}

Stat.prototype.hurtStat = function(num)
{
  this.min -= num;
  if (this.min < 0) this.min = 0;
}

Stat.prototype.healStat = function(num)
{
  this.min += num;
  if (this.min > this.max) this.min = this.max;
}

Stat.prototype.restoreStat = function()
{
 this.min = this.max;
}

Stat.prototype.increaseStat = function(num)
{
  this.max += num;
}

State.prototype.decreaseStat = function(num)
{
  this.max -= num;
}

That is the stat object. It has a few prototypes that'll allow you to modify these stats.

Enemy

Now, we can have an enemy. Since we have already made a stat object, we can use that in our enemy. Let's make a slime.

var Slime = {
 name: "Slime",
 hp: new Stat(5),
 mp: new Stat(5),
 atk: new Stat(2),
 def: new Stat(1),
 gold_drop: 10,
 exp_drop: 5,
 image: LoadImage('Slime.png'),
}

There, I added in an exp and gold drop for when you have won the battle. Each enemy will have their own values, so that's the reason why I included those in the slime enemy object. I have also made the enemy considerably weaker than the play so you can at least finish the fight, but if you want more of a challenge, you can always modify these values. I also added in an enemy image.

The Battle System

Now, we have a player and an enemy. Oh, and a stat object too. Now we just need to draw our images and display battle information. The battle should contain:

• A single enemy positioned at the middle width and 1/3 the height.
• A menu at the bottom left side of the screen.
  • attack
  • defend
  • item
  • spell
  • run/escape options.
• the menu shall spawn a sub-menu for items and spells to the right.
• you can see the players stats at the right side of the screen.
• you can see the players portrait next to the menu.
• you can see the enemies health above their head.

TIP: It may also help you to draw a sketch of the menu on paper or in a painting program.