トランプ-場に出たカードのカウント用

🂡 🂢 🂣 🂤 🂥 🂦 🂧 🂨 🂩 🂪 🂫 🂭 🂮 🂱 🂲 🂳 🂴 🂵 🂶 🂷 🂸 🂹 🂺 🂻 🂽 🂾 🃁 🃂 🃃 🃄 🃅 🃆 🃇 🃈 🃉 🃊 🃋 🃍 🃎 🃑 🃒 🃓 🃔 🃕 🃖 🃗 🃘 🃙 🃚 🃛 🃝 🃞 🂿 🃏 🃟 ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧

トランプ-場に出たカードのカウント用 hi0a.com


  view source
  JavaScript
  $(function(){
  var ary =[
  ["🂡","🂢","🂣","🂤","🂥","🂦","🂧","🂨","🂩","🂪","🂫","🂬","🂭","🂮",],
  ["🂱","🂲","🂳","🂴","🂵","🂶","🂷","🂸","🂹","🂺","🂻","🂼","🂽","🂾",],
  ["🃁","🃂","🃃","🃄","🃅","🃆","🃇","🃈","🃉","🃊","🃋","🃌","🃍","🃎",],
  ["🃑","🃒","🃓","🃔","🃕","🃖","🃗","🃘","🃙","🃚","🃛","🃜","🃝","🃞",],
  ["♠","♡","♢","♣","♤","♥","♦","♧",],
];

  var w = window.innerWidth;
  var wrap = $('<div>').addClass('table');
  $('#demo').append(wrap);
  var text = $('#cards').text();
  //text = text.replace(/./img,'\0\n');
  var cards = text.split("\n");
  console.log(text);
  console.log(cards);
  suitTexts = [
    '',
    '♠スペードの',
    '♥ハートの',
    '♣クラブの',
    '♦ダイヤの',
  ]
  var j=0;
  var n=0;
  cards.shift();
  cards.forEach(function(v, i){
    if(i%13===0){
      j++;
      n=0;
    }
    var a = $('<a>').text(v);
    if(i<52){
      n=i+1 - (j-1)*13;
      console.log(n);
      var title = suitTexts[j] + n;
      a.attr({title:title});
    }
    if(i>12 && i< 26 || i> 38 && i<52 || i===56 || i===57){
      a.toggleClass('red');
    }
    a.on('click', function(){
      $(this).toggleClass('clicked');
    });
    wrap.append(a);
    if(w<640){
      if(n===6 || n===13){
        wrap.append($('<br>'));
      }
    }
  });
  var btn = $('<button>').text('reset');
  btn.on('click', function(){
    $('.table a').removeClass('clicked');
  });
  wrap.after(btn);

  $('#cards').hide();


});
  CSS
  #cards{
  font-size:7.5vw;
}
.table{
  user-select:none;
}
.table a{
  display:inline-block;
  height:15vh;
  line-height: 15vh;
  width:7.5vw;
  font-size:7.7vw;
  text-align:center;
  cursor:pointer;
  position:relative;
  top:0;
  left:0;
}

.table a:hover{
  background-color:#ccc;
}
.table a.clicked{
  opacity:0.1;
}
.table a.red{
  color:#f00;
}

button{
  height:8vh;
  width:80vw;
}
h2 a{
  font-size:18px;
}
@media (max-width: 640px) {
 .table a{
    width:12vw;
    font-size:12vw;
    height:9vh;
    line-height: 9vh;
  }
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/game/game-playing-card/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。