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