!-- Header-->
Home Blog

Battle Card JavaScript

Battle Card Game Dev > JavaScript Datasets > Battle Card JavaScript

Card Constructor

The Card constructor defines what a card is. The parts of a battle card include:


image (file name)

skillArray: an array of skill points
{Intelligence, stregth, dex, spirituality, brutaility, diplomacy}

alignment: (0) - lawful || (1) - unlawful

You may want to check out my full lesson on JavaScript objects, constructors and arrays.

Mouse Hover over the blue text in the description to highlight the code.

// Card Constructor
  function Card (name,img,skillArray,alignment){
    this.name = name;
    this.img = "cards/" + img;
    this.skillArray = skillArray;
    this.alignment = alignment;

➼ Card Object - This constructor defines an object named "Card". Constructor functions normally begin with a capital letter.
➼ Parameters - name, img, skillArray, and alignment are the parameters tat we are passing into the Card function.
➼ name - The name of the card
➼ img - The name of the image file associated with the card.
➼ skillArray - An index array of skill points.
➼ alignment - Lawful (0) or Unlawful (1)

Define a Class

Each battle card character will have a class (i.e. mage, paladin, warrior...). A character's class is defined by his skill effeciency. In more practical terms, a class is defined by it's skill array.

Once a class's skill array is defined we can declare a specific character. Let's start with Paladin Hatnix.

Declare Skill Array

// Paladin Skill Array
      var paladinSkills = [20,5,15,18,5,10];

➼ Intelligence
➼ Strength
➼ Dexterity
➼ Spirituality
➼ Brutality
➼ Diplomacy

**Note: Each skill has a value 1-20 (like 20 sided dice)

Declare Paladin Hatnix

// Declare Paladin Hatnix
        var hatnix = new Card ("Paladin Hatnix", "paladin-hatnix.png", paladinSkills, 0);

➼ Character's Name
➼ File name of associated image
➼ Paladin Skill Array
➼ Alignment (lawful)

Twitch: daisychaincosplay Live Coding!!!

Battle Card Home | Next Lesson