Making clickable card objects

83 views Asked by At

I'm trying to replicate UNO - the card game. So I want generate card objects, that if it fits goes to the pile (if it's the same color or value). I managed to make each object render. But I can't get how to make it interact. Any advice is welcomed.

class Card {
constructor(v, n, c) {
    this.v = v;
    this.n = n;
    this.c = c;
}
onClick() {
    if (this.v === pile[pile.length-1].v || this.c === pile[pile.length-1].c) {
        pile.push(this);
        deck.splice(this, 1);
    }
}
render() {
    let cl = `card num-${this.v} ${this.c}`,
        div = document.createElement('div')
    if (this.c) {
        cl = `card num-${this.v} ${this.c}`
    } else {
        cl = `card num-${this.v}`
    }
    div.innerHTML = this.v > 10 ? this.n : this.v
    document.body.appendChild(div)
    div.classList.remove
    div.className = cl
    document.getElementsByClassName(cl).addEventListener('click', this.onClick())
    }
}
0

There are 0 answers