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())
}
}