High Low Red Black

A simple card game where users guess what the next card will be in relation to the last card played. Adjust your Goal for increased difficulty!

by dojohnso

HTML

<div id="deck"></div>
<div style="clear:both;"></div>

<div id="card_table"><div id="current"></div></div>

<div style="clear:both;"></div>

<div id="buttons">
    Guess the next card..<br />
    <input id="high" type="button" value="Higher" />
    <input id="low" type="button" value="Lower" /> |
    <input id="red" type="button" value="Red" />
    <input id="black" type="button" value="Black" /> |
    <input id="same" type="button" value="Same Value" />
</div>

<div id="reset_button" style="display:none;">
    <input id="reset" type="button" value="Play Again?" />
</div>

<div id="card_results">
    <div id="goal">
        Goal: <input type="text" value="5" id="playCt" maxlength="2" size="1" onfocus="$(this).select();" />
    </div>
    <div id="guess">Your Guess<br /><span></span></div>
    <div id="actual">Actual<br /><span></span></div>
    <div id="result"></div>
    <div style="clear:both;"></div>
</div>

CSS

body
{
    background:#1a811e;   
    font-family: 'Times New Roman', serif;
    font-size:12pt;
}

#buttons, #reset_button
{
    text-align:center;
    margin:30px 0 10px 0;
}
#buttons {
    color:white;
    font-family: Arial;
    font-size:15px;
}

#card_results
{
    padding:5px;
    background-color:#fdfdfd;
    margin:15px;
    border:2px solid #fff;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    color:#1a811e;
}

.card, #deck { 
    height:45px;
    width:30px;
    float:left;
    margin:2px;
    padding:2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color:#fff;
    text-align:center;
}

#deck { padding-top:10px; }

.card { position:relative; display:none; }

.card .number {
    position: relative;
    top:0x;
    left:0;   
    font-size:16pt;
}

.card .suit {
    margin:-3px auto 0 auto;
    font-size:16pt;
}

.H, .D { color:#ff0000; }
.C, .S { color:#000000; }

#current
{
    min-height:32px;
    clear:both;
    padding:3px;
    margin:5px;
}

#card_table
{
    clear:both;
    border-top:1px solid black;
    margin-top:5px;
}

#guess, #actual { 
    width:40%;
    text-align:center; 
    float:left; 
    margin:0 15px 15px 15px; 
}
#guess span, #actual span { font-weight:bold; }

#result { 
    clear:both;
    display:none;
    padding:5px;
    margin:7px; 
    text-align:center; 
    font-weight:bold; 
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.wrong {color:#000000;background-color:#ff0000;}
.right {color:#000000;background-color:#00FF00;}

#goal { 
    text-align:right; 
    padding:5px 10px 5px 0; 
    border-bottom:2px groove #1a811e;
    margin-bottom:5px;
}
#playCt {
     border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-align:center;   
    border:1px solid #1a811e;
}

JavaScript

var deck = [];
var played = [];
var current = [];
var suitsImg = ['&hearts;', '&spades;', '&clubs;', '&diams;'];
var suits = ['H', 'S', 'C', 'D'];
var cards = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

var correctGuess = true;
var lastCard = '';
var winner = false;

$(document).ready(function() {
    buildDeck();
    updateCounts();

    $(':button').click(function() {
        var guess = $(this).attr('id');
        playCard(guess);
    });

    playCard();
});

function buildDeck() {
    deck = [];

    for (var s = 0; s < suits.length; s++) {
        for (var c = 0; c < cards.length; c++) {
            deck.push('<div card="' + cards[c] + suits[s] + '" class="card ' + suits[s] + '"><div class="number">' + cards[c] + '</div><div class="suit">' + suitsImg[s] + '</div></div>');
        }
    }

    //do it a few times, just like real life
    shuffleDeck( 2 );
}

function shuffleDeck( shuffleCt )
{
    for (var s = 0; s < shuffleCt; s++ )
    {
        //http://en.wikipedia.org/wiki/Fisher-Yates_shuffle
        for (var i = deck.length - 1; i > 0; i--) {
            //random number between 0 and i
            var j = Math.floor(Math.random() * (i + 1));
    
            //exchange i and j
            var temp1 = deck[i];
            var temp2 = deck[j];
            deck[j] = temp1;
            deck[i] = temp2;
        }
    }
}

function playCard(guess) {
    if (!guess) {
        guess = '';
    }

    if (guess == 'reset') {
        $('#buttons').fadeIn(500);
        $('#result').html('').hide();
        $('#reset_button').hide();
        $('#card_table').removeClass();
        buildDeck();
        updateCounts();
        resetCurrent();
        playCard();
        return;
    }
    if (parseInt($('#playCt').val()) > 52) {
        $('#playCt').val(52);
    }

    if (!correctGuess || current.length == $('#playCt').val()) {
        resetCurrent(1);
    }

    var card = deck.pop();
    played.push(card);
    current.push(card);

   ...