Help us understand the problem. What is going on with this article?

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がキャンセルされてしまったため、挫折してしまいました。何か方法をご存知の方が居れば教えてください。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away