Day 23: Coding a Game Part 2 Classes

Intro

Something that I have wanted to do with this project is get my head more wrapped around JavaScript classes. It's one thing to read and another thing to do. I have been trying to work in classes where I can. I'm going to go through some of the information that I have been learning and coding. These classes will probably change as I go.

While thinking about making classes I wanted to test my hand at inheritance. That is when you make one class and then another class will inherit the properties and methods from that class. The way that I was going to use this makes master classes for objects/ components that are going to be drawn to the board. That would be anything from monsters to the player.

                
                    
      
  class Component {
  constructor(x,y){
    this.x = x;
    this.y = y;
    this.color = 'FFFFFF'
  }
  draw(area){
    drawFillRect(area,this.width,this.height,this.x+37.5,this.y+37.5,this.color)
  }
}

            
      
                
            

This ended up being a really basic class for the time being. It will take in an x and y no matter what. This is due to me knowing that a player or a monster needs to have coordinates on the board. Next is the draw method since I'm drawing both components the same way I could use a shared method to help create this. Next, we will look at the Hero class that extends this component class

                
                    
      
class Hero extends Component {
  constructor(x,y) {
    super(x,y)
    this.color = '#8A2BE2'
    this.width = 25;
    this.height = 25;
    this.face direction = 'right'
    this.attackBelt = [];
    this.deck = fireDeck;
  }

  move(direction){
    switch (direction) {
      case 'down':
        if (this.y >= 175 ) {

        }else{
          this.y += 50
        }
        break;
      case 'up':
        if (this.y <= 25 ) {

        }else{
          this.y -= 50
        }
        break;
      case 'right':
        if (this.x >= 175 ) {

        }else{
          this.x += 50

        }
        break;
      case 'left':
        if (this.x <= 25 ) {

        }else{
          this.x -= 50
        }
        break;
      default:

    }
  }

  attack(newAttack){
    this.attackBelt.push(newAttack);
  }
  drawAttackCard(num, id){
    $('#attack-box').append(`
      <div class='attack' id='atk-`+id+`'>
        <p class='attack-title | center'>`+this.deck[num].name+`</p>
        <div class='flex-box'>
          <p class='attack-des'>Dmg: `+this.deck[num].dmg+`</p>
          <p class='attack-des' >Cost: `+this.deck[num].cost+`</p>
          <i class='`+this.deck[num].class+`'></i>
          <picture class='attack-img'>
            <img src='`+this.deck[num].img+`' alt=''>
          </picture>

        </div>
      </div>
      `
)
  }

  pullCard(){
    let max = Object.keys(this.deck).length
    let num = random(0, max-1)
    let id = this.attackBelt.length
    this.attack(new Attacks(this.deck[num].name, this.deck[num].type, this.deck[num].squance, id, this.deck[num].dmg, this.deck[num].cost))
    this.drawAttackCard(num,id)
  }
}

            
      
                
            

This ended up being a really basic class for the time being. It will take in an x and y no matter what. This is due to me knowing that a player or a monster needs to have coordinates on the board. Next is the draw method since I'm drawing both components the same way I could use a shared method to help create this. Next, we will look at the Hero class that extends this component class

                
                    
      
class Hero extends Component {
  constructor(x,y) {
    super(x,y)
    this.color = '#8A2BE2'
    this.width = 25;
    this.height = 25;
    this.face direction = 'right'
    this.attackBelt = [];
    this.deck = fireDeck;
  }

  move(direction){
    switch (direction) {
      case 'down':
        if (this.y >= 175 ) {

        }else{
          this.y += 50
        }
        break;
      case 'up':
        if (this.y <= 25 ) {

        }else{
          this.y -= 50
        }
        break;
      case 'right':
        if (this.x >= 175 ) {

        }else{
          this.x += 50

        }
        break;
      case 'left':
        if (this.x <= 25 ) {

        }else{
          this.x -= 50
        }
        break;
      default:

    }
  }

  attack(newAttack){
    this.attackBelt.push(newAttack);
  }
  drawAttackCard(num, id){
    $('#attack-box').append(`
      <div class='attack' id='atk-`+id+`'>
        <p class='attack-title | center'>`+this.deck[num].name+`</p>
        <div class='flex-box'>
          <p class='attack-des'>Dmg: `+this.deck[num].dmg+`</p>
          <p class='attack-des' >Cost: `+this.deck[num].cost+`</p>
          <i class='`+this.deck[num].class+`'></i>
          <picture class='attack-img'>
            <img src='`+this.deck[num].img+`' alt=''>
          </picture>

        </div>
      </div>
      `
)
  }

  pullCard(){
    let max = Object.keys(this.deck).length
    let num = random(0, max-1)
    let id = this.attackBelt.length
    this.attack(new Attacks(this.deck[num].name, this.deck[num].type, this.deck[num].squance, id, this.deck[num].dmg, this.deck[num].cost))
    this.drawAttackCard(num,id)
  }
}

            
      
                
            

Now the first to talk about is super. Super will use the constructor of the first parent classes to give all of its information to the child. Now there are a few more properties that I want to use in the hero class. That would be the height, width, the direction the layer is facings, what attacks they have in their belt, and what deck they are using. All of these are outside the component class. Also with the player I add in a few more methods. I have the move method that will handle how the play is going to move around the board. At this point, it just moves the player into the next space without going outside of the board. Then I set a method that will push a new card into the player attack inventory. This is used later when drawing cards. Next, I have the method that will draw the cards on the board. Finally, the pull card method will be the way that a random card will get populated into the hero's inventory and get drawn. This is all due to the other methods that came before it.

Now the first to talk about is super. Super will use the constructor of the first parent classes to give all of its information to the child. Now there are a few more properties that I want to use in the hero class. That would be the height, width, the direction the layer is facings, what attacks they have in their belt, and what deck they are using. All of these are outside the component class. Also with the player I add in a few more methods. I have the move method that will handle how the play is going to move around the board. At this point, it just moves the player into the next space without going outside of the board. Then I set a method that will push a new card into the player attack inventory. This is used later when drawing cards. Next, I have the method that will draw the cards on the board. Finally, the pull card method will be the way that a random card will get populated into the hero's inventory and get drawn. This is all due to the other methods that came before it.