JavaScriptでトランプ遊び part 2

part1の続きです。

本当はゲーム部分をもう少し追求したかったのですが、そこはデータの持ち方やIF設計が重要かと思うので、今日は表示部分について少し研究したいと思います。

まずは、前回同様にトランプのカードデッキ cards を準備します。下記をChromeのConsoleで実行してみてください。

let cards={};
"ABCD".split("").forEach((u,i)=>{"123456789ABDE".split("").forEach((l,j)=>{cards["SHDC"[i]+"1234567890JQK"[j]]=String.fromCodePoint(`0x1F0${u}${l}`)})});
cards.J0 = String.fromCodePoint(0x1F0BF); // Red joker
cards.J1 = String.fromCodePoint(0x1F0DF); // White joker

次は表示する部分です。前回はハートやダイヤのカードも黒く表示されてしまっていました。そこで、今回は赤いカードは赤く表示したいと思います。

const clog = (t)=>{
  let memo = {
    color : "",
    text : "",
    styles : [],
    add(color, card){
      if (this.color == color){
        this.text += card;
      }else{
        this.styles.push("font-size:xx-large;color:"+color+";");
        this.text += "%c" + card;
        this.color = color;
      }
    }
  };
  [...`${t}`].forEach((a)=>{
    if (a.match(/\ud83c[\udcb1-\udcce]/)){
      memo.add("red", a);
    }else{
      memo.add("black", a);
    }
  });
  console.log(memo.text, ...memo.styles);
};

console.log の第二引数以降にCSS Styleの配列を展開しています。第一引数のテキストには、Styleを切り替えたいタイミングで %c を挿入します。今回はフォントサイズとテキストカラーを指定していますが、バックグラウンドカラーを指定するなどすれば、ユーザー/デッキ/手札の表示分けに役立つかもしれませんね。

はい。では、カードを10枚引いてみましょう。赤い札は赤く表示されましたか？

clog(Object.keys(cards).sort(()=>{return Math.random()-.5 }).slice(-10).map((c)=>cards[c]).join(""))

ちなみに、console.log で色を付ける方法は、これ以外にANSI Escape Codeを使う方法もあり、実はそちらも試したのですが、その場合font-sizeがキャンセルされてしまったため、挫折してしまいました。何か方法をご存知の方が居れば教えてください。

それでは、今回はここまで。