Battle Card Game Dev with Godot

Commander Candy has defined a "battle card" using a JavaScript Object constructor. If you are not familar with JavaScript objects, check out JavaScript Datatyes.

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

Now let's take a look at a card's properties.

// img:  the location of the card's associated image file.

// name: the name of the card

/* skillArray: an array of skill points
   [intelligence, stregth, dexterity, spirituality, brutaility, diplomacy]

   Each skill is given a score (1-20)*/

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

Card Points

Each card is given offensive points and defensive points. Some cards also provide healing. All card points are calculated using a card's skillArray. We are currently working on the functions. Take a look at what we have so far...

Offensive Points

function offensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[4] - skillArray[5];
  var intelligence = (skillArray[0] * .01) + 1;
  var spirit = (skillArray[3] * .015) + 1;
  var offensive = 1 + baseScore * intelligence * spirit;
  var adjust = offensive / 5;
  return adjust;
}

Defensive Points

function defensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[5];
  var intelligence = (skillArray[0] * .04) + 1;
  var spirit = (skillArray[3] * .05) + 1;
  var defense = baseScore * intelligence * spirit;
  var adjust = defense / 5;
  return adjust;
};

Healing Points

How many points per round will be added to each active card's defensive score.

function healing(skillArray) {
  var baseScore = skillArray[3] - skillArray[4];
  if (baseScore > 10) {
    var heal = baseScore / 5;
  }
  else {
    var heal = 0;
  }
  return heal;
};

Calculate Points

And to calculate our scores we used the following function:

function calculatePoints(deckArray,callback) {
  for (var i=0; i < deckArray.length; i++) {
    var card = deckArray[i];
    var skills = card.skillArray;
    var score = callback(skills);
    var roundDat = Math.round(score);
    var num = i + 1;
    console.log(num + " " + card.name + " " + roundDat);
  }
}

Learn more about: Callback Functions

cards.js

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

// skillArray is an array of skill points
// Intelligence, stregth, dex, spirituality, brutaility, diplomacy
// Alignment: (0) lawful, (1) unlawful

// Paladin
var paladinSkills = [20,5,15,18,5,10]; // 73
var hatnix = new Card ("Paladin Hatnix", "paladin-hatnix.png", paladinSkills, 0);

// Knight
var knightSkills = [13,15,10,5,15,10]; // 68
var sirDiealot = new Card ("Sir Diealot","sir-diealot.png", knightSkills,0);

// Priest
var priestSkills = [18,8,10,20,1,18]; // 65
var jill = new Card ("Priestess Jill", "priest-jill.png", priestSkills,0);

// wolf
var wolfSkills = [8,15,10,10,5,2]; // 50
var afroWolf = new Card ("Afro Wolf", "afro-wolf.png",wolfSkills,0);


// Mage
var halflingArray = [18,5,20,15,10,5]; // 73
var verrucktesHuhn = new Card ("Verrucktes Huhn","crazy-chicken.png", mageSkills,1);
var evaMage = new Card ("Eva Mage", "Eva-page.png", mageSkills,0);

// Druid
var druidSkills = [15,10,10,20,1,15]; // 71
var dooveDruid = new Card ("Doove Druid", "doove-druid.png",druidSkills,0);

// Rouge
var rogueSkills = [12,5,18,5,20,10]; // 70
var ryanRogue = new Card ("Ryan Rouge", "ryan-rogue.png",rogueSkills,1);
var rogueCrowbar = new Card("Rogue Crowbar", "rogue-crowbar.png",rogueSkills,0);

// Dragon
var dragonSkills = [15, 18, 15, 5, 18, 10]; // 81
var bladexDragon = new Card ("Bladex Dragon", "bladex-dragon.png", dragonSkills,1);

// Warrior
var warriorSkills = [10,18,15,5,15,5]; //68
var mastr50Warrior = new Card ("Mastr50 Warrior", "master-warrior.png", warriorSkills, 1);
var johnWarrior = new Card ("John Smith", "john-smith.png",warriorSkills,1);



// Unicorn
var unicornSkills = [15, 5, 12, 18, 1, 15]; //66
var valiantCheeseUnicorn = new Card("Valiant Cheese Corn","valiant-cheese.png", unicornSkills,0);
var stregthInsideUnicorn = new Card ("StregthInside Unicorn", "strength-inside-unicorn.png", unicornSkills,0);

// Mimic
var mimicSkills = [10,10,10,10,10,10]; // 60
var maskedMimic = new Card ("Masked Mimic", "masked-mimic.png", mimicSkills, 1);

var deck = Array (maskedMimic,stregthInsideUnicorn,valiantCheeseUnicorn,EvaMage, johnWarrior, mastr50Warrior, bladexDragon, rogueCrowbar, ryanRogue, dooveDruid, verrucktesHuhn, afroWolf, jill, sirDiealot, hatnix);

/* Calculate OP:
Strength(+), Brutality(+), diplomacy(-), Dex(+), spirit(?-Depends on Church */
function offensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[4] - skillArray[5];
  var intelligence = (skillArray[0] * .01) + 1;
  var spirit = (skillArray[3] * .015) + 1;
  var offensive = 1 + baseScore * intelligence * spirit;
  var adjust = offensive / 5;
  return adjust;
}

/* Calculate DP
   Stregth(+), Brutality(n), diplomacy(+), dex(+), spirit(+) */
/* Calculate Healing: Brutality(-),Spirituality(+)  */
function defensiveScore(skillArray) {
  var baseScore = skillArray[1] + skillArray[2] + skillArray[5];
  var intelligence = (skillArray[0] * .04) + 1;
  var spirit = (skillArray[3] * .05) + 1;
  var defense = baseScore * intelligence * spirit;
  var adjust = defense / 5;
  return adjust;
};

function healing(skillArray) {
  var baseScore = skillArray[3] - skillArray[4];
  if (baseScore > 10) {
    var heal = baseScore / 5;
  }
  else {
    var heal = 0;
  }
  return heal;
};

function calculatePoints(deckArray,callback) {
  for (var i=0; i<deckArray.length; i++) {
    var card = deckArray[i];
    var skills = card.skillArray;
    var score = callback(skills);
    var roundDat = Math.round(score);
    var num = i + 1;
    console.log(num + " " + card.name + " " + roundDat);
  }
}
/*
console.log("Offensive Scores");
calculatePoints(deck,offensiveScore);
console.log("Defensive Scores");
calculatePoints(deck,defensiveScore);
console.log("Healing");
calculatePoints(deck,healing);
*/

function cardScores(deckArray){
  for(var i = 0; i < deckArray.length; i++) {
    var card = deckArray[i];
    var cardSkill = deckArray[i].skillArray;
    var name = card.name;
    var toReturn = name;
    toReturn += " Offensive Score: ";
    var offense = offensiveScore(cardSkill);
    toReturn += offense;
    toReturn += " Defensive Score: ";
    var defense = defensiveScore(cardSkill);
    toReturn += " " + healing;
    console.log(toReturn);
  }
}

cardScores(deck);

js/hand.js

'use strict';

  // Generate a random integer between 1 and max
  function randNum(max){
    return Math.floor(Math.random() * Math.floor(max));
  };


  /* cardKeys(): generates an array of 6 random numbers between
                 1 and the number of cards in the deck

     deck:       Array of all the player's cards  */

  function cardKeys(deck) {
    var hand_indexes = Array(); // an array of indexes
    var max = deck.length;  // how many cards are in the deck
    while (hand_indexes.length < 6){
      var num = randNum(max);
      var exists = hand_indexes.includes(num);
      if (!exists) {
        hand_indexes.push(num);
      }
    }
    return hand_indexes;
  };


  /*    giveHand: Creates and array of cards

        keys:     An array of keys pointing to cards in
                  the deck
        deck:     Array of all the player's cards */

  function giveHand(keys,deck,removal) {
    var hand = Array();  // hand is an array
    for (var i = 0; i < keys.length; i++) {  // loop through card keys and add the corresponding card to the hand
      var key = keys[i];
      hand.push(deck[key]);
      var card = document.getElementById(key);
      card.parentNode.removeChild(card);
    }
    return hand;
  }

js/displayCards.js




  // Function to create the image id inside a for loop
  function makeID(i) {
    var num = i + 1;
    var myID = "image" + num;
    return myID;
  }

  function displayCards(hand) {
    for (var i = 0; i < hand.length; i++) {
      var thisID = makeID(i);
      var image = hand[i].img;
      var textAlt = hand[i].name + " Offensive Points: " + hand[i].offensive + " Defensive Points: " + hand[i].defensive + "  ";
      console.log(textAlt);
      document.getElementById(thisID).src = image;
      document.getElementById(thisID).alt = textAlt;
    }
  }

  document.addEventListener("click", displayCards);

js/selection.js

function clickCard(elmnt) {
  var count = watchSelection ();
  if (count >= 3) {
      document.getElementById("error").innerHTML = "Please note that you may only play 3 cards.  Choose wisely!";
      if (elmnt.className == "selectedCard") {
        toggleThis(elmnt);
      }
  }
  else {
    toggleThis(elmnt);
  }
}

function toggleThis(elmnt) {
  elmnt.classList.toggle("card");
  elmnt.classList.toggle("selectedCard");
}

function watchSelection (){
  var container = document.getElementById("player-hand");
  var inner = container.getElementsByClassName("selectedCard");
  var selectedCards = 0;
  for (var i=0; i<inner.length; i++) {
    selectedCards++;
  }
  return selectedCards;
}
document.addEventListener("click", clickCard);
document.addEventListener("click", watchSelection);
document.addEventListener("click", toggleThis);

css/style.css


  /* Element sizing includes padding and border*/
  * {
      box-sizing: border-box;
  }
  /* "row class"-->*/
  .row::after {
      content: "";
      clear: both;
      display: table;
  }
  /* Columns containing "col-"*/
  [class*="col-"] {
      float: left;
      padding: 15px;
  }
  /* Column size for small devices (phones)*/
  [class*="col-"] {
      width: 100%;
  }
  /* Column size for large devices (computers)*/
  @media only screen and (min-width: 768px) {
      /* For Large Devices*/
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  }
  /* Header Container*/
  .topContainer{
    width: 97%;
    margin-left: 1.5%;
    background-color: #050937;
    box-shadow: 4px 4px 2.5px black;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Page Heading*/
  .headline{
    display: inline-block;
    color: #FFECD8;
    float: right;
  }

  /* Nav link text color in paragraphs*/
  p a {
    color: red;
  }
  /* Page Body*/
  body {
    background-color: black;
    color: #02052A;
    font-family: helvetica, arial, sans-serif;
    font-size: 16px;
  }
  /* Header Image*/
  img.topImage {
    max-width: 150px;
    float: left;
  }

  /* Bordered Container*/
  div.bordered {
    font-size: 18px;
    color: #39FF11;
    background-color: black;
    border-style: solid;
    border-color: #09326B;
    border-width: 4px;
    padding: 10px;
    margin: 50px;
    width: 90%;
  }

  .card {
    color: black;
    font-size: 14px;
    font-weight: bold;
    border-color: black;
    border-width: 1px;
    border-style: groove;
  }

  .card img{
    width: 150px;
    border-radius: 9px;
  }

  .selectedCard img {
    width: 200px;
    border-style: solid;
    border-color: blue;
    border-width: 4px;
    border-radius: 9px;
  }

  /** Wood Texture Image: https://pixabay.com/photos/background-old-dirty-wood-texture-1588600/ **/
  .handContainer {
    background-size:cover;
    width: 90%;
    margin: 10px;
    padding: 10px;
    background-image: url("../media/pictures/woody.jpg");
    background-color: tan;
    background-repeat: no-repeat;
    border-radius: 9px;
  }

  .error {
    color: red;
  }

  .battleForm input {
    background-color: #0A0101;
    color: #5BF21D;
  }

  button {
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin: 5px;
    font-size: 30px;
    border-radius: 6px;
  }

  button:hover {
    background-color: lightgreen;
    color: black;
  }

  a.about {
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin: 10px;
    font-size: 30px;
    border-radius: 6px;
  }

  a.about:hover {
    background-color: lightgreen;
    color: black;
  }

  .menu {
    overflow: hidden;
    border-radius: 9px;
  }
  /* Navigation links in "topMenu" container*/
  .menu a {
    background-color: #110000;
    float: left;
    display: block;
    color: #E7F0D8;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  /* Navigation links in "topMenu" container: On mouse hover*/
  .menu a:hover {
    background-color: blue;
    color: lightyellow;
  }

index.html


  <!DOCTYPE html>
  <html lang="en-us">
  <meta charset="UTF-8">
  <head>
    <!-- Meta Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Font Awesome Stylesheet: Social Media (and other) icons: http://fontawesome.io/ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Page Title-->
    <title>ccBattleCard</title>
  </head>
  <body>
    <script type="text/javascript" src="js/deck.js"></script>
    <script type="text/javascript" src="js/hand.js"></script>
    <script type="text/javascript" src="js/selection.js"></script>
    <script type="text/javascript" src="js/displayCards.js"></script>
    <script type="text/javascript" src="js/expand.js"></script>

      <!-- Top Menu-->
      <div class = "menu">
        <a  href = "https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ" class= "fa fa-youtube"> YouTube</a>
        <a href= "https://www.facebook.com/codingcommanders/" class= "fa fa-facebook"> Facebook</a>
        <a href= "https://www.instagram.com/codingcommanders" class= "fa fa-instagram"> Instagram</a>
        <a href= "https://twitter.com/codingCommander" class= "fa fa-twitter"> Twitter</a>
      </div>
    <br><br>
    <!-- Game Instructions -->
    <div class="row">
      <br>
      <div class="bordered">
        <div align="center">
        <a class="about" href=https://www.codingcommanders.com/battlecards/>About this Project</a>
      </div><br>Welcome to ccBattleCards, the super awesomwe competitive battle card game!<br><br>
      You will recieve 3 action points per round.  Each AP allows you to play a card.
    Played cards will automatically be replaced by new cards in the deck.  Destroy
  all your oppoinent's defense before he destroys you!</div>
    </div>
    <!--- Computer's Territory------------------------>
    <!-- Row 1-->
    <div class = "row" align="center">
      <!-- Hand Face Down (6 cards) plus Face Down Deck (Full Deck === 100 cards)-->
      <div class="row">
  <div class="handContainer">
    <div class="computer-hand" align="center">
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
      <span class="card"><img src="media/cards/cardBack2.jpg" alt="Battle Card Back"/></span>
    </div>
  </div>
      </div>
      <div class="row" align="center">
         <button onclick="displayCards(myHand)">DEAL</button>
      </div>
    <!--- Player's Territory------------------------>
    <div class2= "row"  align="center">
      <div class="row">
        <div class="handContainer" align="center" id="player-hand">
          <div id="error" class="error"></div>
          <div align="center" class="hand">
            <span onclick="clickCard(this)" class="card"><img id="image1" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image2" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image3" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image4" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image5" src="media/cards/cardBack2.jpg"/></span>
            <span onclick="clickCard(this)" class="card"><img id="image6" src="media/cards/cardBack2.jpg"/></span>
          </div>
      </div>
      </div>
    </div>
    <!--- Deck Data -->
    <form class="battleForm" id="battleForm" align="center">
      <input id="0" type="text" name="0" value="Tommy Troll" readonly>
      <input id="1" type="text" name="1" value="Ula Unicorn" readonly>
      <input id="2" type="text" name="1" value="Ula Unicorn" readonly>
      <input id="3" type="text" name="2" value="Priest Attendis" readonly>
      <input id="4" type="text" name="3" value="Whaling Wolf" readonly>
      <input id="5" type="text" name="4" value="Nagging Knight" readonly>
      <input id="6" type="text" name="5" value="Ratman Rouge" readonly>
      <input id="7" type="text" name="6" value="Paladin Hatnix" readonly>
      <input id="8" type="text" name="7" value="Chaotic Candy" readonly>
      <input id="9" type="text" name="8" value="Speed Cyclist" readonly>
      <input id="10" type="text" name="9" value="Nature Druid" readonly>
      <input id="11" type="text" name="10" value="Masked Mimic" readonly>
      <input id="12" type="text" name="11" value="Faerie Ninja" readonly>
      <input id="13" type="text" name="12" value="Village Warrior" readonly>
      <input id="14" type="text" name="13" value="Eva Mage" readonly>
      <input id="15" type="text" name="14" value="Dragon King" readonly>
    </form>
    <script>
      var deck = getDeck();
      console.log(deck);
      var randomKeys = cardKeys(deck);
      var myHand = giveHand(randomKeys,deck);
          /*var myDeck = deck;
          var myKeys = cardKeys(myDeck);
          var myHand = giveHand(myKeys,myDeck);
          var myDeck = updateDeck(myKeys,myDeck);*/
    </script>
   </body>
  </html>

Card Constructor