POKER DICE サイコロの出目で役の組み合わせを作るカジノゲーム

FIVE OF KIND 1200
FOUR OF KIND 50
FULL HOUSE 25
STRAIGHT 32
THREE OF KIND 5
TWO PAIR 2
ONE PAIR 0
roll the dice!
ポ－カーダイス

サイコロを使ったポーカー
トランプを使ったポーカーより役で出やすいので、短い時間でも遊べる
実際のポーカーダイスは各面に K Q J 10 9 が印字されている
1人でも遊べるけど、画面共有して友達複数人で誰が強い役を作るか競争する遊び方もできる

  view source
  JavaScript
  document.title = ' POKER DICE サイコロの出目で役の組み合わせを作るカジノゲーム';

$(function(){
  var dir = '../js-number-random-dice/';
  var se = new Audio(dir+'dice.mp3');
  se.volume = 0.05;
  $li = $('li');

  var $h1 = $('<h1>').text(document.title);
  $('#demo').after($h1).after($('#other'));

  var score = 100;
  var $animDice = $('<div>').addClass('anim-dice');
  [1,2,3,4,5,6].forEach(function(){
    $item = $('<div>').addClass('item');
    $animDice.append($item);
  });

  $result = $('#result');
  $result.addClass('ready');


  var ready = function(){
    $li.removeClass('hit');
    $li.removeAttr('hitCount');
    $('c').remove();
    $result.empty();
    $p = $('<p>').text('= BET TIME =');
    $result
      .append($p);
  }

  var start = function(){
    se.currentTime = 0;
    se.play();
    var n1 = Math.floor(Math.random()*6+1);
    var n2 = Math.floor(Math.random()*6+1);
    var n3 = Math.floor(Math.random()*6+1);
    var n4 = Math.floor(Math.random()*6+1);
    var n5 = Math.floor(Math.random()*6+1);
    console.log([n1,n2,n3]);
    $dice1 = $('<i>').addClass('dice').addClass('d'+n1);
    $dice2 = $('<i>').addClass('dice').addClass('d'+n2);
    $dice3 = $('<i>').addClass('dice').addClass('d'+n3);
    $dice4 = $('<i>').addClass('dice').addClass('d'+n4);
    $dice5 = $('<i>').addClass('dice').addClass('d'+n5);
    $result.empty();
    $result
      .append($dice1)
      .append($dice2)
      .append($dice3)
      .append($dice4)
      .append($dice5);
    checkResult(n1,n2,n3,n4,n5);
  }


  var checkResult = function(n1,n2,n3,n4,n5){
    var total = n1+n2+n3+n4+n5;
    var product = n1*n2*n3*n4*n5;

    var nAry = [n1,n2,n3,n4,n5];
    matchCount = 0;
    straightCount = 0;
    console.log(nAry);
    for(i=0;i<5;i++){
      for(j=i+1;j<5;j++){
        if(nAry[i] === nAry[j]){
          matchCount++;
          $result.find('.dice').eq(i).addClass('hand');
          $result.find('.dice').eq(j).addClass('hand');
        }
      }
    }

    nAry.sort();
    for(i=0;i<4;i++){
      if(nAry[i] - nAry[i+1] === 1){
        straightCount++;
      }
    }
    
    if(straightCount === 4){
      $('.straight').addClass('hit');
    }
    if(matchCount > 6){
      $('.five').addClass('hit');
    } if(matchCount === 6){
      $('.four').addClass('hit');
    } else if(matchCount == 4){
      $('.full-house').addClass('hit');
    } else if(matchCount == 3){
      $('.three').addClass('hit');
    } else if(matchCount == 2){
      $('.two-pair').addClass('hit');
    } else if(matchCount == 1){
      $('.one-pair').addClass('hit');
    }

    //
    $hits = $('.hit').each(function(){
      var ele = $(this);
      var $bet = $score.find('c');//chip
      betCount = $bet.length || 0;
      var odds = ele.find('o').text();
      if(!odds){return;}
      odds = Number(odds);
      score += betCount;
      score += betCount * odds;
    });
    $scoreP.text(score);
  }

  var bet = function(ele){
    if(!$result.hasClass('ready')){
      return;
    }
    var $bet = ele.find('c');//chip
    var betCount = $bet.length || 0;
    if(betCount > 4){
      $bet.remove();
      score+=5;
    } else {
      $b = $('<c>');
      ele.append($b);
      score--;
    }
    $scoreP.text(score);
  }

  $result.on('click', function(){
    if($(this).hasClass('ready')){
      $(this).removeClass('ready');
      start();
    } else {
      $(this).addClass('ready');
      ready();
    }
  });
  $score = $('#score');
  $scoreP = $score.find('p');
  $scoreP.text(score);

  $score.on('click', function(){
    bet($(this));
  });
  
});
  CSS
  @font-face {
	font-family: LeagueGothic;
	src: url(/fonts/LeagueGothic-Regular.ttf);
}
#demo{
  position:relative;
  left:0;
  top:0;
  background-color:rgb(0, 129, 61);
  font-family: LeagueGothic, Meiryo;
  user-select:none;
}
ul{
  display:flex;
  width:100%;
  min-height:9vh;
}
ul li{
  flex-grow: 1;
  width:100%;
  text-align:center;
  vertical-align:bottom;
  background-color:#fff;
  border-radius:8px;
  margin:2px;
  font-size:24px;
  position:relative;
  left:0;
  top:0;
}
ul li b{
  position:absolute;
  left:8px;
  top:8px;
  font-size:32px;
}

li.hit{
  background-color:#faa;
}

/*chip*/
c{
  display:inline-block;
  width:32px;
  height:24px;
  background-image:url(chip.png);
  background-size:cover;
  position:absolute;
  left:2px;
  bottom:8px;
  border-radius:50%;
}
c:nth-of-type(1){
  bottom:8px;
}
c:nth-of-type(2){
  bottom:12px;
}
c:nth-of-type(3){
  bottom:16px;
}
c:nth-of-type(4){
  bottom:20px;
}
c:nth-of-type(5){
  bottom:24px;
}

li o{
  position:absolute;
  right:2px;
  bottom:9px;
  font-size:16px;
  color:#999;
}
.dice{
  display:inline-block;
  width:8vmin;
  height:8vmin;
  max-width:100%;
}
.d1{
  background-image:url(../js-number-random-dice/dice-1.svg);
}
.d2{
  background-image:url(../js-number-random-dice/dice-2.svg);
}
.d3{
  background-image:url(../js-number-random-dice/dice-3.svg);
}
.d4{
  background-image:url(../js-number-random-dice/dice-4.svg);
}
.d5{
  background-image:url(../js-number-random-dice/dice-5.svg);
}
.d6{
  background-image:url(../js-number-random-dice/dice-6.svg);
}
.d0{
  background-image:url(../js-number-random-dice/dice-0.svg);
}
.d00{
  background-image:url(../js-number-random-dice/dice-00.svg);
}
.dice.hand{
  background-color:#ffa;
  border-radius:16px;
}
/*
@media (max-width: 900px) {
  .dice{
  width:4vmin;
  height:4vmin;
  }
}
*/

#result{
  position:relative;
  left:0;
  top:0;
  min-height:16vh;
  background-color:#fff;
  text-align:center;
  border-radius:8px;
  margin:2px;
  font-size:48px;
  cursor:pointer;
}

#result .dice{
  min-width:16vmin;
  min-height:16vmin;
}
#result .dice-total{
  position:absolute;
  left:12px;
  top:12px;
}

#score{
  min-height:9vh;
  color:#fff;
  font-size:32px;
  text-align:center;
}





.anim-dice {
  display:inline-block;
  position:relative;
  margin:1vmin auto;
  width:8vmin;
  height:8vmin;
  transform-style:preserve-3d;
  transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg);
  animation:rotate-animation 1s linear infinite;
}

.anim-dice .item {
  position:absolute;
  left:0;
  right:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.99);
  background-size:cover;
}

.anim-dice .item:nth-child(1) {
  transform:translate3d(0, -4vmin, 0) rotateX(-90deg);
  background-image: url(../js-number-random-dice/dice-1.svg);
}

.anim-dice .item:nth-child(2) {
  transform:translate3d(0, 0, 4vmin);
  background-image: url(../js-number-random-dice/dice-2.svg);
}

.anim-dice .item:nth-child(3) {
  transform:translate3d(4vmin, 0, 0) rotateY(90deg);
  background-image: url(../js-number-random-dice/dice-3.svg);
}

.anim-dice .item:nth-child(4) {
  transform:translate3d(-4vmin, 0, 0) rotateY(-90deg);
  background-image: url(../js-number-random-dice/dice-4.svg);
}

.anim-dice .item:nth-child(5) {
  transform:translate3d(0, 0, -4vmin) rotateY(180deg);
  background-image: url(../js-number-random-dice/dice-5.svg);
}

.anim-dice .item:nth-child(6) {
  transform:translate3d(0, 4vmin, 0) rotateX(-90deg);
  background-image: url(../js-number-random-dice/dice-6.svg);
}

@keyframes rotate-animation {
  from {
    transform:rotate3d(0);
  }

  to {
    transform:rotate3d(1, 1, 1, -360deg);
  }
}

h2{
  font-size:24px;
  background-color:#fff;
  margin:2px;
  padding:8px;
  border-radius:8px;
}

#other{
  padding:8px;
  background-color:rgb(0, 129, 61);
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-game-dice-poker/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。