html5洗牌特效,HTML5赌神之洗牌动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

'use strict';

function Deck(jokers) {

var i, j;

this.jokers = jokers || 0;

this.back = new Deck.Card(this, 0);

this.cards = [];

this.names = ['h', 'c', 'd', 's', 'j'];

this.cover = "♤";

this.suits = {

h: "♥",

c: "♣",

d: "♦",

s: "♠",

j: "★"

};

this.faces = {

h: ["♞", "♛", "♚"],

c: ["♞", "♛", "♚"],

d: ["♞", "♛", "♚"],

s: ["♞", "♛", "♚"],

j: ["✰"]

};

for (i = -this.jokers - 1; ++i;) {

this.cards.push(new Deck.Card(this, i, 'j'));

}

for (i = this.names.length - 1; i--;) {

this.cards.push(new Deck.Card(this, 1, this.names[i]));

for (j = 14; --j > 1;) {

this.cards.push(new Deck.Card(this, j, this.names[i]));

}

}

}

Deck.prototype = {

toString: function() {

return '' + this.cards;

}

};

Deck.Card = function(deck, value, suit) {

this.deck = deck;

this.value = value;

this.suit = suit;

};

Deck.Card.prototype = {

visible: false,

toString: function() {

return this.stringValue || (this.stringValue = (this.getSuitSymbol() + this.getAlpha()));

},

toNode: function() {

var i = this.value,

tmp, symbol = this.getSuitSymbol(),

alpha = this.getAlpha(),

spots = [],

outer = document.createElement('div'),

spotArea = document.createElement('div'),

label = document.createElement('div'),

label2;

// back of deck

if (i == 0) {

} else if (i > 0) {

tmp = document.createElement('div');

tmp.className = 'card-corner-alpha';

tmp.appendChild(document.createTextNode(alpha));

label.appendChild(tmp);

tmp = document.createElement('div');

tmp.className = 'card-corner-symbol';

tmp.appendChild(document.createTextNode(symbol));

label.appendChild(tmp);

// joker

} else {

tmp = document.createElement('div');

tmp.className = 'card-corner-symbol';

tmp.appendChild(document.createTextNode(symbol));

label.appendChild(tmp);

tmp = document.createElement('div');

tmp.className = 'card-corner-alpha';

tmp.appendChild(document.createTextNode('J O K E R '));

label.appendChild(tmp);

}

label2 = label.cloneNode(true);

// back of deck

if (i == 0) {

// numbered card

} else if (i > 0 && i < 11) {

while (i--) {

tmp = document.createElement('span');

tmp.className = 'card-spot card-spot-' + (this.value - i);

tmp.appendChild(document.createTextNode(symbol));

spotArea.appendChild(tmp);

}

// face card

} else if (i > 10) {

tmp = document.createElement('span');

tmp.className = 'card-face card-face-' + (this.value - i);

tmp.appendChild(document.createTextNode(

this.deck.faces[this.suit][this.value - 11]));

spotArea.appendChild(tmp);

// joker

} else {

tmp = document.createElement('span');

tmp.className = 'card-face card-face-j' + this.value;

tmp.appendChild(document.createTextNode(String.fromCharCode(

this.deck.faces[this.suit][0].charCodeAt(0) + this.value)));

spotArea.appendChild(tmp);

tmp = document.createElement('div');

tmp.className = 'card-joker-counter';

tmp.appendChild(document.createTextNode(

new Array(-this.value).join('.')));

spotArea.appendChild(tmp);

}

tmp = document.createElement('div');

spotArea.className = 'card-spots';

if (i) {

tmp.appendChild(label);

tmp.appendChild(label2);

tmp.className = 'card-inner';

} else {

tmp.appendChild(document.createTextNode(this.deck.cover));

spotArea.className = 'card-back-logo';

spotArea.appendChild(tmp);

tmp = document.createElement('div');

tmp.className = 'card-inner card-inner-back';

}

tmp.appendChild(spotArea);

outer.appendChild(tmp);

outer.className = 'card card-suit-' + this.suit + ' card-value-' + this.value;

label.className = 'card-corner card-corner-top';

label2.className = 'card-corner card-corner-bottom';

return outer;

},

getSuitSymbol: function() {

return this.deck.suits[this.suit];

},

getAlpha: function() {

return this.value < 1 ? this.value : this.value == 1 ? 'A' : this.value < 11 ? this.value : ['J', 'Q', 'K'][this.value - 11] || this.value;

}

};

var deck = new Deck(4);

var cards = [],

card;

cards.push(deck.back.toNode());

for (var i = deck.cards.length; i--;)

cards.push(deck.cards[i].toNode());

function animate() {

var docFrag = document.createDocumentFragment();

for (var i = 0; i < cards.length; i++) {

card = cards[i];

docFrag.appendChild(card);

card.style.left = 60 + i * 4 + "px";

card.style.top = 20 + i * 4 + "px";

if (window.PrefixFree) {

card.style[window.PrefixFree.prefixProperty('animation-duration', true)] = (cards.length / 4) - (i * .1) + "s";

}

}

document.body.appendChild(docFrag);

}

animate();

}());