JavaScript:ババ抜き トランプを引きたいです

Question

前提

JavaScriptでババ抜きを作っています。

実現したいこと

• 　HTML上にクリック可能のカードの表示(クリックしたらトランプを引く動作にしたい)
• 　トランプを引いた処理のあと手札に加えたトランプを確認して処理

該当のソースコード

//1~13の数字札を作る
let kazu = [];

for (let i = 1; i < 14; i++) {
    kazu.push(i)
}

//絵札と組み合わせてトランプにする
let spade = kazu.map(function(a) {
    return "♠" + a;
});
let heart = kazu.map(function(a) {
    return "♥" + a;
});
let dia = kazu.map(function(a) {
    return "♦" + a;
});
let club = kazu.map(function(a) {
    return "♣" + a;
});

let joker = ["JKR"];

//トランプを合わせて、山札を作る
let yama = joker.concat(dia.concat(club.concat(spade.concat(heart))));

//山札のシャッフル。
for (i = 0; i < 100; i++) {
    let rnd = Math.floor(Math.random() * 52); //ランダムで0~52で数字を獲得

    let str1 = yama[0]; //配列yamaの最初の要素
    let str2 = yama[rnd]; //配列yamaの乱数で決定した要素

    //配列の各要素を入れ替える
    yama[rnd] = str1;
    yama[0] = str2;
}

//既に山札がランダムなので手札配布はランダムなものをそのまま配ることにした
let p1hand = yama.slice( 0, 13 );
let p2hand = yama.slice( 13, 26 );
let p3hand = yama.slice( 26, 39 );
let p4hand = yama.slice( 39, 53 );

//カードの数字をランクとして付与する
const rank = str => +str.replace(/[♠♥♦♣]/, '') || 0;

//同じランクのカードが来た時に削除する
const discardSameRanks = cards => (
  { 1: cards, 2: [], 3: [cards[0]], 4: [] }[cards.length]
);

//処理を設定
const discard = hand => {
  const obj = hand.reduce((o, str) => {
    const r = rank(str);
    if (!o[r]) o[r] = [];
    o[r].push(str);
    return o;
  }, {});

  return Object.values(obj).map(discardSameRanks).flat();
}

//捨てられた後をp1hand_のように置く
let [p1hand_, p2hand_, p3hand_, p4hand_] = [p1hand, p2hand, p3hand, p4hand].map(discard);

試したこと

1日ネットで調べてみましたが解決策は思い浮かばなかったです

補足情報（FW/ツールのバージョンなど）

Atomを使って書いてます。
Firefoxで動作させようとしています。

Comments

[y_waiwai]

提示のコードではどういう動作となるんでしょうか。
問題が見えません

[no_non_no]

現状はまだ何も動作しないです。
動作させるための山札などが作成出来た段階です。

[y_waiwai]

質問、ではなくて、完成させてくれという作業依頼なんでしょうか

[Lhankor_Mhy]

「トランプを引いた処理のあと手札に加えたトランプを確認して処理」とは、具体的にはどのような処理ですか？

[no_non_no]

クリックしたトランプを引く→トランプをクリックしたプレイヤーの手札に加える→手札を確認して数字の被っているトランプを捨てる
という処理です

Answer 1

エレメントを作り、
Document.createElement() - Web API | MDN
カードの内容を入れ、
HTMLElement.innerText - Web API | MDN
クリックイベントを設定し、
EventTarget.addEventListener() - Web API | MDN
ドキュメントツリーに追加する
Element.append() - Web API | MDN
ということを、カードの枚数分繰り返すのがいいかと思います。

なお、カードを捨てる処理はすでにdiscardという関数に書かれているかと思います。

Comments

[no_non_no]

ブラウザ上にカードの内容を表示させることは出来ました。
カードそれぞれにクリックイベントを設定する方法が分からないです…

[Lhankor_Mhy]

こちらが参考になると思います。
https://teratail.com/questions/96421