How to randomly select a card to create and move it when invoked

Question

I am new to programming, So I might be doing this the completely wrong way but I appreciate any help. For my project, I am creating a card game. I created an array that holds the names of all the cards I have already created with my constructor. I want the startGame() to randomly select a card out of the list and then assign that card to the 'x' variable and place that card in the player's deck. Afterward, I want to grab the 'x' variable to re-construct the card moving it from the player's deck and into the game board when the button is pressed.

I keep getting this error. "x.render is not a function"

How could I go about doing this? I know that .render is only inside of my class Cards how can I invoke it outside of this?

class Cards{
   
    constructor(cardName, type, color, className){
        this.cardName = cardName
        this.type = type
        this.alive = true
        this.color = color
        this.className = className
        
    }
    render(x,y,w,h){
        ctx.fillStyle = this.color
        ctx.fillRect(x,y,w,h)
    }
}
  const wizard = new Cards("Wizard", "Magic", 'blue',"card") 
  const knight = new Cards("Knight", "Melee",'darkgray',"card")
  const dwarf = new Cards ("Dwarf", "Melee", 'orange',"card") 
  const hobbit = new Cards ("Hobbit", "Magic", 'BurlyWood', "card")
  const duke = new Cards("KingDuke", "Melee", 'pink', "card")
  const zoey = new Cards("Zo-Zo", "Magic", 'white', "card")



const hero = [
    'Wizard',
    'Zoey',
    'Duke',
    'Knight',
    'Hobbit',
    'Dwarf'
]

function startGame(){        //Connected to the start game button
    for(let i = 0; i < 4; i++){     // create a deck of 5 cars
        if(i === 0){
            const heroSelector = hero[Math.floor(Math.random() * hero.length)] 
// pick a card at random out of the array called "Hero"

            if(heroSelector === 'Wizard'){
                let x = wizard
 // set wizard to the x variable to call upon in the UnoFunc

                wizard.render(150,260,110,150) //renders the card in the players deck }

// this is repeated for all the other cards created. ^

function UnoFunc(x) {
    x.render(150,100,90,120) 
// this is the location of the game board and the size of the card.
 }
turn = 1;
cardOne.addEventListener("click", playFunc())
function playFunc(){
    if(turn === 1){
        UnoFunc(x)
 // move the card from the deck and re-render it inside of the game board
        cardOne.disabled = true, // deactivates card so that the user cannot re use the same card
        turn = 0;
    }

Answer 1

Instead of

  const wizard = new Cards("Wizard", "Magic", 'blue',"card") 
  const knight = new Cards("Knight", "Melee",'darkgray',"card")
  const dwarf = new Cards ("Dwarf", "Melee", 'orange',"card") 
  const hobbit = new Cards ("Hobbit", "Magic", 'BurlyWood', "card")
  const duke = new Cards("KingDuke", "Melee", 'pink', "card")
  const zoey = new Cards("Zo-Zo", "Magic", 'white', "card")



const hero = [
    'Wizard',
    'Zoey',
    'Duke',
    'Knight',
    'Hobbit',
    'Dwarf'
]

you could define an object

const heroes = {
  'Wizard': new Cards("Wizard", "Magic", 'blue',"card"),
  'Zoey': new Cards("Zo-Zo", "Magic", 'white', "card"),
  'Duke': new Cards("KingDuke", "Melee", 'pink', "card"),
  'Knight': new Cards("Knight", "Melee",'darkgray',"card"),
  'Hobbit': new Cards ("Hobbit", "Magic", 'BurlyWood', "card"),
  'Dwarf': new Cards ("Dwarf", "Melee", 'orange',"card")
};

Now all of those variables are available as properties of the heroes object, for example

let myClass = heroes.Wizard;  let yourClass = heroes.Knight;

Additionally, if you have the string "Wizard" stored in some variable, you can get the Cards instance of wizard using bracket notation:

let className = 'Wizard'; let myClass = heroes[className];

If you want an array of only the names defined in heroes (maybe you're constructing a drop-down), you can use Object.keys:

let listOfClassNames = Object.keys(heroes);