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

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

<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>    
$(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 >= 0 ) {
            $('.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

    a month later
    Write a Reply...