document.title = 'ブラックジャックトランプ カジノゲーム ';
$(function(){
  var cardTexts = $('#cards').text();
  $('#cards').remove();
  var cardsOrg = [];
  var cards = [];
  var cardTextAty = cardTexts.split('\n');
  var playerData = {};
  var enemyData = {};
  var suitAry = ['♠','♦','♣','♥',];
  var numAry = [0,1,2,3,4,5,6,7,8,9,10,'J','Q','K'];
  var backText = $('#back').text();
  $('#back').remove();

  [0,1,2,3].forEach(function(j){
    [1,2,3,4,5,6,7,8,9,10,11,12,13].forEach(function(i){
      var n = (j*13)+i;
      var color = '#000';
      var suit = suitAry[j];
      if(j===1 || j===3){
        color = '#f00';
      }
      var num = numAry[i];

      var p = i
      if(i > 9){
        p = 10;
      }
      var data = {
        n:n,
        emoji : cardTextAty[n],
        text : suit + i,
        suit : suit,
        j:j,
        i:i,
        num:num,
        p:p,
        color:color,
      };
      cardsOrg.push(data);
    });
  });
  var dataJoker = {
    n:53,
    text : cardTextAty[53],
    j:4,
    i:15,
    color:'#00f',
  };
  //cards.push(dataJoker);
  console.log(cardsOrg);

  $demo = $('#demo');
  $form = $('<form>');
  $area = $('<div>');
  $h1 = $('<h1>').text(document.title);
  $h2 = $('<h2>').text('点数が21点に近いほど強い');
  $player = $('<ul>',{id:'player'});
  $enemy = $('<ul>',{id:'enemy'});
  $result = $('<div>',{id:'result'});
  $demo
    .append($form)
  $form
    .append($area)
    .append($result);
  $area
    .append($enemy)
    .append($player);
  $demo.after($h1).after($h2);

  cards = cardsOrg.concat();
  cards = _.shuffle(cards);
  

  function addCard(ele, isShow=true){
    var data = cards.pop();
    var $i = $('<i>').addClass('suit').text(data.suit);
    var $b = $('<b>').addClass('num').text(data.num);
    var $i2 = $('<i>').addClass('suit2').text(data.suit);
    var $b2 = $('<b>').addClass('num2').text(data.num);
    var $card = $('<a>')
      .addClass('card')
      .attr(data)
      .append($i)
      .append($b)
      .append($i2)
      .append($b2);
    data.ele = $card;
    if(!isShow){
      $card.addClass('back');
    }
    ele.append($card);
  }

  function gameSet(data){
    if(cards.length < 18){
      cards = cardsOrg.concat();
    }
    $enemy.empty();
    $player.empty();
    playerCards = [];

    var $enemyli = $('<li>');
    $enemy.append($enemyli);
    addCard($enemyli, false);
    addCard($enemyli);
    $enemyli.on('click', function(){
      var ele = $(this);
      addCard(ele);
    });

    [0,1,2,3,4,5,6].forEach(function(v){
      var $li = $('<li>');
      if(v===3){
        $i = $('<i>').addClass('you').text('YOU');
        $li.append($i);
        $li.addClass('you');
        $li.on('click', function(){
          var ele = $(this);
          addCard(ele);
        });
      }
      addCard($li);
      $player.append($li);
    });;
    var canWin = false;

    $result.text('BLACKJACK');
    $demo.addClass('start');
  }

  function open(data){
    data.ele.text(data.text);
    data.ele.css({color:data.color});
  }
  function select(ele){
    if(!$demo.hasClass('start')){return;}
    console.log(data);
    addCard(ele);
  }

  function checkBout(playerData, enemyData){
    console.log({
      playerData:playerData,
      enemyData:enemyData,
    });
    if(playerData.i === 53){
      return 2;
    }
    if(enemyData.i === 53){
      return 1;
    }
    if(playerData.i === 1 && enemyData.i !== 1){
      return 2;
    }
    if(enemyData.i === 1 && playerData.i !== 1){
      return 1;
    }
    if(playerData.i > enemyData.i){
      return 2;
    }
    if(playerData.i < enemyData.i){
      return 1;
    }
    return 0;
  }

  $result.on('click', function(){
     $('.back').removeClass('back');
  });

  
  gameSet();
});

@font-face {
	font-family: LeagueGothic;
	src: url(/fonts/LeagueGothic-Regular.ttf);
}

#demo{
  display: grid;
  place-items: center;
  user-select:none;
  background-color: rgb(0, 129, 61);
  font-family: LeagueGothic, Meiryo;
}

form{
  margin-top:2vh;
  display: grid;
  flex-wrap: wrap;
  font-size:18vw;
}
#demo ul{
  display:flex;
}
#enemy{
  width:10vw;
  margin:0 auto;
  margin-bottom:25vh;
}
#player{
  width:100%;
  display:flex;
  text-align:center;
  margin-bottom:40px;
}
#result{
  width:100%;
  font-size:9vw;
  text-align:center;
}


#demo a{
  display:inline-block;
  cursor:pointer;
  position:relative;
  top:0;
  left:0;
  text-align:center;
}

#demo ul{
  height:20vh;
}
#demo li{
  position:relative;
  top:0;
  left:0;
  text-align:center;
  width:10vw;
}
.card{
  position:relative;
  top:0;
  left:0;
  width:80px;
  height:120px;
  background-color:rgba(255,255,255,1);
  border:1px solid #000;
  border-radius:8px;
  font-size:24px;
}

.card.back{
  background-color:rgba(222,222,222,1);
}
.card.back .suit,
.card.back .num,
.card.back .suit2,
.card.back .num2{
  opacity:0;
}

.card .suit{
  position:absolute;
  top:4px;
  left:4px;
}
.card .num{
  position:absolute;
  top:28px;
  left:4px;
  min-width:24px;
}

.card .suit2{
  position:absolute;
  bottom:4px;
  right:4px;
  transform: scale(-1, -1);
}
.card .num2{
  position:absolute;
  bottom:28px;
  right:4px;
  min-width:24px;
  transform: scale(-1, -1);
}


#demo li.you{
  margin:0 8vw;
}
#demo li i.you{
  display:block;
  position:absolute;
  width:100%;
  left:0;
  bottom:-20px;
  font-size:20px;
  z-index:1;
  text-align:center;
}
#demo li a{
  position:absolute;
  top:0;
  left:0;
}
#demo li a:nth-of-type(2){
  top:-44px;
  left:25px;
}
#demo li a:nth-of-type(3){
  top:-88px;
  left:50px;
}
#demo li a:nth-of-type(4){
  top:-132px;
  left:75px;
}
#demo li a:nth-of-type(5){
  top:-176px;
  left:100px;
}

#enemy li a:nth-of-type(2){
  top:44px;
  left:-25px;
}
#enemy li a:nth-of-type(3){
  top:88px;
  left:-50px;
}
#enemy li a:nth-of-type(4){
  top:132px;
  left:-75px;
}
#enemy li a:nth-of-type(5){
  top:176px;
  left:-100px;
}





#demo a.select{
  transform: translate(0px, -10px);
}

#demo:not(.select) a:hover{
  background-color:rgba(0,0,0,0.5);
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-playing-card-blackjack/