JS1k: The JavaScript code golfing competition

A="position:absolute;";W="width:99px;height:99px;";function C(e,c){e.className="w "+c}function P(s){return";-webkit-"+s+";-moz-"+s+";-o-"+s}function R(a){return a.splice(0|a.length*Math.random(),1)[0]}document.querySelector("head").innerHTML="<style>.w{"+W+"border:1px solid #777;text-align:center;margin:5px;float:left"+"}.v .b,.p .b{"+P("transform:scale(0)")+"}.c{"+W+A+"font-size:80px}b{"+A+"font-size:24px;left:5px}.b,.r{color:red}.b{background:#ddf"+P("transition:1s")+"}</style>";function F(t){v=b.querySelectorAll(".v");x=v[0];y=v[1];if(y)C(x,""),C(y,"");if(x&&!y&&x!=t&&x.innerHTML==t.innerHTML)C(x,"p"),C(t,"p"),l--;else C(t,"v");if(!l)alert("I ♥ U!")}l=8;q="0A23456789JQK♥♠♦♣".split("");q[0]=10;p=[];for(c=13;c<17;c++)for(i=0;i<13;i++)p.push([c%2?' r':'',c,q[i]]);d=[];for(i=0;i<8;i++)d[i]=d[i+8]=R(p);h='<div style="width:450px">';for(i=16;i;i--)c=R(d),h+='<div class="w" onclick="F(this)"><div class="c f'+c[0]+'"><b>'+q[c[1]]+'</b>'+c[2]+'</div><div class="c b">❁</div></div>';b.innerHTML=h+'</div>'

QT0icG9zaXRpb246YWJzb2x1dGU7IjtXPSJ3aWR0aDo5OXB4O2hlaWdodDo5OXB4OyI7ZnVuY3Rpb24gQyhlLGMpe2UuY2xhc3NOYW1lPSJ3ICIrY31mdW5jdGlvbiBQKHMpe3JldHVybiI7LXdlYmtpdC0iK3MrIjstbW96LSIrcysiOy1vLSIrc31mdW5jdGlvbiBSKGEpe3JldHVybiBhLnNwbGljZSgwfGEubGVuZ3RoKk1hdGgucmFuZG9tKCksMSlbMF19ZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiaGVhZCIpLmlubmVySFRNTD0iPHN0eWxlPi53eyIrVysiYm9yZGVyOjFweCBzb2xpZCAjNzc3O3RleHQtYWxpZ246Y2VudGVyO21hcmdpbjo1cHg7ZmxvYXQ6bGVmdCIrIn0udiAuYiwucCAuYnsiK1AoInRyYW5zZm9ybTpzY2FsZSgwKSIpKyJ9LmN7IitXK0ErImZvbnQtc2l6ZTo4MHB4fWJ7IitBKyJmb250LXNpemU6MjRweDtsZWZ0OjVweH0uYiwucntjb2xvcjpyZWR9LmJ7YmFja2dyb3VuZDojZGRmIitQKCJ0cmFuc2l0aW9uOjFzIikrIn08L3N0eWxlPiI7ZnVuY3Rpb24gRih0KXt2PWIucXVlcnlTZWxlY3RvckFsbCgiLnYiKTt4PXZbMF07eT12WzFdO2lmKHkpQyh4LCIiKSxDKHksIiIpO2lmKHgmJiF5JiZ4IT10JiZ4LmlubmVySFRNTD09dC5pbm5lckhUTUwpQyh4LCJwIiksQyh0LCJwIiksbC0tO2Vsc2UgQyh0LCJ2Iik7aWYoIWwpYWxlcnQoIkkg4pmlIFUhIil9bD04O3E9IjBBMjM0NTY3ODlKUUvimaXimaDimabimaMiLnNwbGl0KCIiKTtxWzBdPTEwO3A9W107Zm9yKGM9MTM7YzwxNztjKyspZm9yKGk9MDtpPDEzO2krKylwLnB1c2goW2MlMj8nIHInOicnLGMscVtpXV0pO2Q9W107Zm9yKGk9MDtpPDg7aSsrKWRbaV09ZFtpKzhdPVIocCk7aD0nPGRpdiBzdHlsZT0id2lkdGg6NDUwcHgiPic7Zm9yKGk9MTY7aTtpLS0pYz1SKGQpLGgrPSc8ZGl2IGNsYXNzPSJ3IiBvbmNsaWNrPSJGKHRoaXMpIj48ZGl2IGNsYXNzPSJjIGYnK2NbMF0rJyI+PGI+JytxW2NbMV1dKyc8L2I+JytjWzJdKyc8L2Rpdj48ZGl2IGNsYXNzPSJjIGIiPuKdgTwvZGl2PjwvZGl2Pic7Yi5pbm5lckhUTUw9aCsnPC9kaXY+Jw==

/*
 * Memory - classic card game
 * (C) 2012 by Gavriel Fleischer
 * http://neswork.com/javascript/js1k/2012/
 */

// constants we use a lot of time
A="position:absolute;";
W="width:99px;height:99px;";

// set class; we only use it on the element that always should have "w", so just add the rest
function C(e,c){e.className="w "+c}

// add css3 prefixes
function P(s){return";-webkit-"+s+";-moz-"+s+";-o-"+s}

// get out a random element from an array
function R(a){return a.splice(0|a.length*Math.random(),1)[0]}

// set up styles
// 1st I tried 3d transitions, but opera doesn't support hem yet
document.querySelector("head").innerHTML="<style>\
    /* wrapper for the border of the card */\
    .w{"
        +W
        +"border:1px solid #777\
        ;text-align:center\
        ;margin:5px\
        ;float:left"
	    +"\
    }\
    /* "hide" the back of visible (flipped) and paired cards*/\
    .v .b,.p .b{"
        +P("transform:scale(0)")
	    +"\
    }\
    /* card */\
    .c{"
        +W
        +A
        +"font-size:80px\
    }\
    /* ♥♠♦♣ on the card */\
    b{"
        +A
        +"font-size:24px\
        ;left:5px\
    }\
    /* back of the card and ♥♦ are red */\
    .b,.r{\
        color:red\
    }\
    /* back of the card */\
    .b{\
        background:#ddf"
        +P("transition:1s")
	    +"\
    }\
</style>";

/*
 * Flip the card
 *
 * We use classes to be able to count some group of cards:
 * "p" is used for "paired" cards that stay visible forever
 * "v" is used for the 1 or 2 cards that we turned on and are currently "visible"
 */
function F(t){
    // get the visible cards
    v=b.querySelectorAll(".v");
    x=v[0];
    y=v[1];
    // if 2 cards are visible we need to turn them back /*v.length==2*/
    if(y)
        C(x,""),
        C(y,"");
    // if one card was visible we need to compare it with the one we just turned /* v.length==1 */
    if(x&&!y&&x!=t&&x.innerHTML==t.innerHTML)
        // if they match we sign them as "paired"
        C(x,"p"),
        C(t,"p"),
        l--;
    else C(t,"v");// otherwise we set the currently turned card to visible

    // see if we finished the whole pack
    if(!l)
        alert("I ♥ U!")
}

// Counter for the number of pairs left
l=8;

// Fill in p array that represents the pack of cards.
q="0A23456789JQK♥♠♦♣".split("");
q[0]=10;
p=[];
for(c=13;c<17;c++)
    for(i=0;i<13;i++)
        p.push([c%2?' r':'',c,q[i]]);

// Pull out a card and put it on the deck twice. Those will be the pairs.
d=[];
for(i=0;i<8;i++)
    d[i]=d[i+8]=R(p);

// start to draw the screen
h='<div style="width:450px">';
// we need to create 16 cards
for(i=16;i;i--)
    // take out a random element from the cards on the deck
    c=R(d),
    h+='<div class="w" onclick="F(this)"><div class="c f'
        +c[0]
        +'"><b>'
        +q[c[1]]
        +'</b>'
        +c[2]
        +'</div><div class="c b">❁</div></div>';
// add it to the DOM
b.innerHTML=h+'</div>'