Home Logic Ubuntu (Linux) Blog

Battle Card Game

ccBattleCards

What is ccBattleCards? It is the super awesome strategic battlecard game that I am creating live on Twitch! Wanna join my ccBattleCard team?

Join Commander Candy!

Tuesdays, 12:00pm - 4:00pm EST

Thursdays, 12:00pm - 4:00pm EST:

✶ Learn Complex Logic

✶ Help Develop a Web Browser Battlecard Game

✶ Learn Web Development

✶ Linux (Ubuntu) Open Source Creative Software


Software Stack

The software stack I will use in this project includes:

Operating System: Ubuntu (Linux/Debian)
Not using Ubuntu? Don't worry! These tutorials are about the logic and the code. I will use Atom text editor. If you are interested in learning Ubuntu I have tutorials for that!

Web Server Software: Undecided
Apache or ExpressJS? My viewers will decide!

Database: Undecided
PostgreSQL or MySQL? My viewers will decide.

Server-side Language: Undecided
NodeJS or PHP? My viewers will decide!

Client-side Language: Vanilla JavaScript
The front end of our project will be written in Vanilla JavaScript, HTML, and CSS. All vanilla baby!!!


Wanna get the most out of my Strems?

Supporting tutorials

1) Intro to Logic for Programmers: Propositional Logic + Set TheTheory

2) Full Stack Web Development:
  a) What is a Software Stack? (Cartoon)
  b) LAMP: Intro to Full Stack Web Development

3) JavaScript Basics:
  a) JavaScript: What is Asynchronous Programming?
    i) Written Lesson
    ii) YouTube Video

  b) JavaScript: What are Callbacks?
    i) Written Lesson
    ii) YouTube Video

  c) JavaScript: How do we define sets of data? (arrays + objects)

Click here and Follow me on Twitch!



Battle Deck

Our ccBattlecard Deck is an array of JavaScript Objects.

Card Constructor

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

   function Card (name,img,offensive,defensive,commanality, alignment,max) {
     this.name = name;
     this.img = img;
     this.offensive = offensive;
     this.defensive = defensive;
     this.commonality = commanality;
     this.alignment = alignment;
     this.max = max;
   }
      

Each card will be defined by the following properties:

name: The name of the card

img: The image displayed to the player

offensive: offensive points

defensive: defensive points

comonality: Picture a deck of cards. Commonality is the number of times a particular card occurs in that deck. alignment: 0: lawful, 1: unlawful

max: Picture that our deck of cards is ordered by commonality. The more common cards are at the bottom of the pile.

The top 8 cards are Tommy Troll, because he is the most common card and there are eight of him in the deck. The bottom 2 cards are Dragon King because two Dragon Kings come in a deck and he is the rarest.

The Tommy's max is 8 and The Dragon King's max is 100.

Cards

Next, I will describe the cards in our deck (so far). I will create some cards by editing existing images and make some cards from scratch. Below you will find a list of current cards. The property values and images below will change. Consider the card stats as test data. Later on we will figure out an algorithm to derive a card's stats

// Deck = 100 cards

 // define card types

 var dragon = new Card("Dragon King","media/cards/dragon_king.jpg", 10, 15, 2, 1,100);
 var mage = new Card ("Maggie Mage", "media/cards/maggie_mage.jpg", 8, 11, 3, 0, 98);
 var warrior = new Card ("Village Warrior", "media/cards/village_warrior.jpg", 10, 10, 4, 0, 95);
 var fearie = new Card ("Ninja Fearie", "media/cards/ninja_fearie.jpg", 8, 12, 4, 1, 91);
 var mimic = new Card ("Masked Mimic", "media/cards/masked_mimic.jpg", 5, 15, 4, 1, 87);
 var druid = new Card ("Nature Druid", "media/cards/nature_druid.jpg", 6, 12, 5, 0, 83);
 var speedCycle = new Card ("Speed Cyclist", "media/cards/speed_cyclist.jpg", 5, 2, 6, 1, 78);
 var paladin = new Card ("Paladin Hatnix", "media/cards/paladin_hatnix.jpg", 10, 8, 6, 0, 72);
 var halfling = new Card ("Chaotic Halfling", "media/cards/chaotic_halfling.jpg", 8, 10, 6, 1, 66);
 var rouge = new Card ("Ratman Rouge", "media/cards/ratman_rouge.jpg", 6, 11, 10, 1, 60);
 var knight = new Card ("Nagging Knight", "media/cards/nagging_knight.jpg", 7, 8, 10, 0, 50);
 var wolf = new Card ("Whispering Wolf", "media/cards/whispering_wolf.jpg", 7, 7, 10, 1, 40);
 var priest = new Card ("Priest Attendis", "media/cards/priest_attendis", 3, 10, 7, 0, 30)
 var unicorn = new Card ("Majestic Unicorn", "media/cards/majestic_unicorn.jpg", 1, 10, 7, 0, 23);
 var elf = new Card ("Ellie Elf", "media/cards/ellie_elf.jpg", 3,8, 8, 0, 16); // 16
 var troll = new Card ("Tommy Troll", "media/cards/tommy_troll.jpg", 5, 5, 8, 1, 8);

Now let's look at our deck.


// Array (objects) deck of 100 cards

var deck = [troll, elf, unicorn, priest, wolf, knight, rouge, paladin, halfling, speedCycle, druid, mimic, fearie, warrior, mage, dragon];

Follow me on Twitter, because I am really funny...

Special Features + Images

Paladin Hatnix

The Paladin card was choosen by Hatnix, so I decided to name it after him. Check out his Twitter and let me know if you find a good picture to use for the Paladin Hatnix battle card.


Paladin Hatnix - Battle Card Game

Special Feature: Add +3 OPs to all other lawful cards in your hand

Priest Attendis

The priest was chosen by Attendis, so I decided to name the card after him!

Special Feature: Add +3 DPs to all other lawful cards in your hand

Ratman Rouge

Special Feature: If all cards played are unlawful, add +3 DPs to all other cards.

Masked Mimic

Special Feature: : Mimic can be used as a wild card. You can play it as any card in the deck a) If you play the mimic as a unlawful card, 100% undected b) If you play the mimic as a lawful card, it will be detected by priests and paladins (and slayed prior to the round)

Nature Druid

Special Feature: Add +3 DPs to all other cards in your hand

Nagging Knight

Special Feature:

Speed Cyclist

Special Feature: Add +2 DPs against all cards with less than 9 OPs

Speed Cyclist - Battle Card Image

Dragon King

Special Feature:

Dragon King - Battle Card Image

Ellie Elf

Special Feature: Elf: Add +2 OPs against all cards with less than 9 DPs

Ellie Elf - Battle Card Image

Ninja Fearie

Special Feature: Once the fearie card is played, you will be able to view your opponents cards before choosing your next 2 cards.

Ninja Fearie - Battle Card Image

Chaotic Halfling

Special Feature: If all cards played are unlawful, add +3 OPs to all other cards.

Chaotic Halfling - Battle Card Image

Maggie Mage

Special Feature: Instantly Kills Oponent's trolls

Maggie Mage - Battle Card Image

Tommy Troll

Special Feature: Random Effect (+ or -)

Tommy Troll - Battle Card Image

Majestic Unicorn

Special Feature: If the opponent's hand is all unlawful cards, the unicorn runs away and is put back in the deck.

Majestic Unicorn

Village Warrior

Special Feature: play 2 warrior cards: +2 OP && +2 DP to each warrior card, play 3 warrior cards: +5 OP, +3 DP per card

Village Warrior - Battle Card Image


Whispering Wolf

Special Feature: play 2 wolf cards: +2 OP && +2 DP to each wolf card, play 3 wolf cards: +3 OP, +5 DP per card

Village Warrior - Battle Card Image



Functions

Code


    // ERROR CHECKING FUNCTIONS

    // Print Cards
    function  printCards () {
      var toReturn = "";
      for(var i=0;i<16;i++){
        toReturn = deck[i];
        console.log(toReturn);
      }
    }

    // print card
    function printCard (index){
      var toReturn = deck[index];
      console.log(toReturn);
    }

    //  FUNCTIONALITY FUNCTIONS

    // gets random number between 1 and max
    function getRandomInt(length) {
      return Math.floor(Math.random() * Math.floor(length));
    };

    // Generate the Player's Hand (30 cards)
    function getCard () {
      var rand = getRandomInt(100); // get random num
      console.log("rand: " + rand);
      for (var i = 0; i < deck.length; i++) {
        var max = deck[i].max;
        if (rand <= max){
          return deck[i];
        }
      }
    }

    function getHand(){
      var hand = Array();
      for(var i=0;i<6;i++){
        var card = getCard();
        hand.push(card);
      }
      return hand;
    }

    var myHand = getHand();
    console.log(myHand);
    // call fuction
    var hand = getHand();
    console.log(hand);

  

Output


  candy@candy-Aspire-E5-576:~/battlecards$ node main.jsrand: 20
  rand: 81
  rand: 94
  rand: 44
  rand: 38
  rand: 83
  [ Card {
      name: 'Majestic Unicorn',
      img: 'media/cards/majestic_unicorn.jpg',
      offensive: 1,
      defensive: 10,
      commonality: 7,
      alignment: 0,
      max: 23 },
    Card {
      name: 'Nature Druid',
      img: 'media/cards/nature_druid.jpg',
      offensive: 6,
      defensive: 12,
      commonality: 5,
      alignment: 0,
      max: 83 },
    Card {
      name: 'Village Warrior',
      img: 'media/cards/village_warrior.jpg',
      offensive: 10,
      defensive: 10,
      commonality: 4,
      alignment: 0,
      max: 95 },
    Card {
      name: 'Nagging Knight',
      img: 'media/cards/nagging_knight.jpg',
      offensive: 7,
      defensive: 8,
      commonality: 10,
      alignment: 0,
      max: 50 },
    Card {
      name: 'Whispering Wolf',
      img: 'media/cards/whispering_wolf.jpg',
      offensive: 7,
      defensive: 7,
      commonality: 10,
      alignment: 1,
      max: 40 },
    Card {
      name: 'Nature Druid',
      img: 'media/cards/nature_druid.jpg',
      offensive: 6,
      defensive: 12,
      commonality: 5,
      alignment: 0,
      max: 83 } ]
  rand: 30
  rand: 85
  rand: 94
  rand: 11
  rand: 39
  rand: 99
  [ Card {
      name: 'Priest Attendis',
      img: 'media/cards/priest_attendis',
      offensive: 3,
      defensive: 10,
      commonality: 7,
      alignment: 0,
      max: 30 },
    Card {
      name: 'Masked Mimic',
      img: 'media/cards/masked_mimic.jpg',
      offensive: 5,
      defensive: 15,
      commonality: 4,
      alignment: 1,
      max: 87 },
    Card {
      name: 'Village Warrior',
      img: 'media/cards/village_warrior.jpg',
      offensive: 10,
      defensive: 10,
      commonality: 4,
      alignment: 0,
      max: 95 },
    Card {
      name: 'Ellie Elf',
      img: 'media/cards/ellie_elf.jpg',
      offensive: 3,
      defensive: 8,
      commonality: 8,
      alignment: 0,
      max: 16 },
    Card {
      name: 'Whispering Wolf',
      img: 'media/cards/whispering_wolf.jpg',
      offensive: 7,
      defensive: 7,
      commonality: 10,
      alignment: 1,
      max: 40 },
    Card {
      name: 'Dragon King',
      img: 'media/cards/dragon_king.jpg',
      offensive: 10,
      defensive: 15,
      commonality: 2,
      alignment: 1,
      max: 100 } ]