So as the title says, and given what I've being doing recently surprise surprise a card game

It's not perfect you could inspect the element and change how many tokens you have I guess

PHP Code:
<div class="contain">
        <
div class="top"><h1>My card game</h1></div>
        <
div class="win"></div>
        <
div class="tokens">500</div>
        <
ul class="list">
         <
li><div class="one"><img src='images/ace.jpg'></div></li>
        <
li><div class="two"><img src='images/ace.jpg'></div></li>
        <
li><div class="three"><img src='images/ace.jpg'></div></li>
        </
ul>
        <
button id="click">button</button>
    </
div
PHP Code:
$(document).ready(function() { 

  
setInterval(function(){ 
     var 
bet parseFloat($('.tokens').text()) || 0;
     var 
qty 2;
     var 
total bet qty;
    $(
'.tokens').text(total);
  }, 
2000);

    $(
"#click").click(function() { 
      
      var 
tokens parseFloat($('.tokens').text()) || 0,
       
qty 10,
       
lose tokens qty,
       
ace 100,
       
king 70,
       
queen 60,
       
aceWin tokens ace,
       
kingWin tokens king,
       
queenWin tokens queen,
       
image1 = [ "<img src='images/ace.png'>""<img src='images/king.png'>""<img src='images/queen.png'>"],
       
number1 Math.floor(Math.random(image1) * 3),
       
image2 = [ "<img src='images/ace.png'>""<img src='images/king.png'>""<img src='images/queen.png'>"],
       
number2 =  Math.floor(Math.random(image2) * 3), 
       
image3 = [ "<img src='images/ace.png'>""<img src='images/king.png'>""<img src='images/queen.png'>"], 
       
number3 Math.floor(Math.random(image3) * 3),
       
image1Pos image1.indexOf("<img src='images/ace.png'>"),
       
image2Pos image1.indexOf("<img src='images/king.png'>"),  
       
image3Pos image1.indexOf("<img src='images/queen.png'>"); 

    if(
tokens 10){
      $(
'.win').html("<h1>Not enough tokens</h1>"); 
      return 
false;
   }
    else{
      $(
'.one').html(image1[number1]); 
      $(
'.two').html(image2[number2]); 
      $(
'.three').html(image3[number3]); 
      
          if((
number1 === number2) && (number2 === number3)){  
             if(
number1 === image1Pos){
               $(
'.win').html("<h1>You win!!</h1>");     
               $(
'.tokens').text(aceWin);
             }
            else if(
number1 === image2Pos){
               $(
'.win').html("<h1>You win!!</h1>");     
               $(
'.tokens').text(kingWin);
             }
            else if(
number1 === image3Pos){
             $(
'.win').html("<h1>You win!!</h1>");     
             $(
'.tokens').text(queenWin);
             }
      }
      else{ 
          if( 
lose >= ) {
                $(
'.tokens').text(lose);
          } 
            $(
'.win').html("<h1>Try again!!</h1>"); 
            
console.log("You lose"); 
      } 
    }    
  }); 
    

  
}); 
I haven't bothered with much CSS yet, but a live version

Card game