Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="AP-text">ABSTRACT PIXELS</div>
<div id="presents-text">presents</div>
<div id="ultimate-text" onClick="beginTrick()">
	<span style="font-size:50%;">THE</span>
	<br>ULTIMATE
	<br>CARD TRICK
</div>
<div id="click-text" onClick="beginTrick()">click to begin</div>

<div id="curtainsWrapper">
<div class="curtain curtain-left"></div>
<div class="curtain curtain-right"></div>
</div><!--curtainsWrapper -->

<div id="interfaceWrapper">

<div id="interface"></div><!-- /interface -->
<button id="leftPileButton" class="btn" onClick="selectPile('left')">Left Pile</button>
<button id="middlePileButton" class="btn" onClick="selectPile('middle')">Middle Pile</button>
<button id="rightPileButton" class="btn" onClick="selectPile('right')">Right Pile</button>

</div><!-- /interfaceWrapper -->
<!--
<div id="controls">
<button class="btn" onClick="beginTrick()">Begin Trick</button>
<button id="leftPileButton" class="btn" onClick="selectPile('left')">Left Pile</button>
<button id="middlePileButton" class="btn" onClick="selectPile('middle')">Middle Pile</button>
<button id="rightPileButton" class="btn" onClick="selectPile('right')">Right Pile</button>
<button class="btn" onClick='$(".card").toggleClass("flipped");'>Flip</button>
<button class="btn" onClick='$(".card").css("margin-right", "-165px").css("position", "relative")'>Show All Cards</button>
<button class="btn" onClick='Shuffle()'>Shuffle</button>
<button class="btn" onClick='makeGameDeck()'>Game Deck</button>
<button class="btn" onClick='dealRow()'>Deal Row</button>
<button class="btn" onClick='dealCards()'>Deal Cards</button>
<button class="btn" onClick='revealPlayersCard()'>Reveal Players Card</button>

</div><!-- /controls -->



<div id="table">

	<div id="left-pile"></div>
    <div id="middle-pile"></div>
    <div id="right-pile"></div>
    
    <canvas id="canvas"></canvas>

      <div id="deck">
        <div class="card club two">
          <div class="front">
            <div class="corner top">
              <span class="number">2</span>
              <span>&#9827;</span>
            </div>

            <span class="suit top_center">&#9827;</span>
            <span class="suit bottom_center">&#9827;</span>

            <div class="corner bottom">
              <span class="number">2</span>
              <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club three">
        	<div class="front">
              <div class="corner top">
                <span class="number">3</span>
                <span>&#9827;</span>
              </div>
              
              <span class="suit top_center">&#9827;</span>
              <span class="suit middle_center">&#9827;</span>
              <span class="suit bottom_center">&#9827;</span>
              
              <div class="corner bottom">
                <span class="number">3</span>
                <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club four">
 			<div class="front">
          <div class="corner top">
            <span class="number">4</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">4</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club five">
        <div class="front">
          <div class="corner top">
            <span class="number">5</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          <span class="suit middle_center">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">5</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club six">
        <div class="front">
          <div class="corner top">
            <span class="number">6</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          <span class="suit middle_left">&#9827;</span>
          <span class="suit middle_right">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">6</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club seven">
        <div class="front">
          <div class="corner top">
            <span class="number">7</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          <span class="suit middle_left">&#9827;</span>
          <span class="suit middle_top">&#9827;</span>
          <span class="suit middle_right">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">7</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club eight">
        <div class="front">
          <div class="corner top">
            <span class="number">8</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          <span class="suit middle_left">&#9827;</span>
          <span class="suit middle_top">&#9827;</span>
          <span class="suit middle_right">&#9827;</span>
          <span class="suit middle_bottom">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">8</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club nine">
        <div class="front">
          <div class="corner top">
            <span class="number">9</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          
          <span class="suit middle_top_left">&#9827;</span>
          <span class="suit middle_center">&#9827;</span>
          <span class="suit middle_top_right">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          <span class="suit middle_bottom_left">&#9827;</span>
          <span class="suit middle_bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">9</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club ten">
        <div class="front">
          <div class="corner top">
            <span class="number">10</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit top_left">&#9827;</span>
          <span class="suit top_right">&#9827;</span>
          
          <span class="suit middle_top_left">&#9827;</span>
          <span class="suit middle_top_center">&#9827;</span>
          <span class="suit middle_top_right">&#9827;</span>
          <span class="suit bottom_left">&#9827;</span>
          <span class="suit bottom_right">&#9827;</span>
          <span class="suit middle_bottom_center">&#9827;</span>
          <span class="suit middle_bottom_left">&#9827;</span>
          <span class="suit middle_bottom_right">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">10</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club jack">
        <div class="front">
          <div class="corner top">
            <span class="number">J</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit middle_center">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">J</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club queen">
        <div class="front">
          <div class="corner top">
            <span class="number">Q</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit middle_center">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">Q</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club king">
        <div class="front">
          <div class="corner top">
            <span class="number">K</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit middle_center">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">K</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card club ace">
        <div class="front">
          <div class="corner top">
            <span class="number">A</span>
            <span>&#9827;</span>
          </div>
          
          <span class="suit middle_center">&#9827;</span>
          
          <div class="corner bottom">
            <span class="number">A</span>
            <span>&#9827;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card diamond two">
        <div class="front">
          <div class="corner top">
            <span class="number">2</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_center">&#9830;</span>
          <span class="suit bottom_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">2</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond three">
        <div class="front">
          <div class="corner top">
            <span class="number">3</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_center">&#9830;</span>
          <span class="suit middle_center">&#9830;</span>
          <span class="suit bottom_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">3</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond four">
        <div class="front">
          <div class="corner top">
            <span class="number">4</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">4</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond five">
        <div class="front">
          <div class="corner top">
            <span class="number">5</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>
          <span class="suit middle_center">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">5</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond six">
        <div class="front">
          <div class="corner top">
            <span class="number">6</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>
          <span class="suit middle_left">&#9830;</span>
          <span class="suit middle_right">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">6</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond seven">
        <div class="front">
          <div class="corner top">
            <span class="number">7</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>
          <span class="suit middle_left">&#9830;</span>
          <span class="suit middle_top">&#9830;</span>
          <span class="suit middle_right">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">7</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond eight">
        <div class="front">
          <div class="corner top">
            <span class="number">8</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>
          <span class="suit middle_left">&#9830;</span>
          <span class="suit middle_top">&#9830;</span>
          <span class="suit middle_right">&#9830;</span>
          <span class="suit middle_bottom">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">8</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond nine">
        <div class="front">
          <div class="corner top">
            <span class="number">9</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>

          <span class="suit middle_top_left">&#9830;</span>
          <span class="suit middle_center">&#9830;</span>
          <span class="suit middle_top_right">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>
          <span class="suit middle_bottom_left">&#9830;</span>
          <span class="suit middle_bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">9</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond ten">
        <div class="front">
          <div class="corner top">
            <span class="number">10</span>
            <span>&#9830;</span>
          </div>

          <span class="suit top_left">&#9830;</span>
          <span class="suit top_right">&#9830;</span>

          <span class="suit middle_top_left">&#9830;</span>
          <span class="suit middle_top_center">&#9830;</span>
          <span class="suit middle_top_right">&#9830;</span>
          <span class="suit bottom_left">&#9830;</span>
          <span class="suit bottom_right">&#9830;</span>
          <span class="suit middle_bottom_center">&#9830;</span>
          <span class="suit middle_bottom_left">&#9830;</span>
          <span class="suit middle_bottom_right">&#9830;</span>

          <div class="corner bottom">
            <span class="number">10</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond jack">
        <div class="front">
          <div class="corner top">
            <span class="number">J</span>
            <span>&#9830;</span>
          </div>

          <span class="suit middle_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">J</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond queen">
        <div class="front">
          <div class="corner top">
            <span class="number">Q</span>
            <span>&#9830;</span>
          </div>

          <span class="suit middle_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">Q</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond king">
        <div class="front">
          <div class="corner top">
            <span class="number">K</span>
            <span>&#9830;</span>
          </div>

          <span class="suit middle_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">K</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card diamond ace">
        <div class="front">
          <div class="corner top">
            <span class="number">A</span>
            <span>&#9830;</span>
          </div>

          <span class="suit middle_center">&#9830;</span>

          <div class="corner bottom">
            <span class="number">A</span>
            <span>&#9830;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card spade two">
        <div class="front">
          <div class="corner top">
            <span class="number">2</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_center">&#9824;</span>
          <span class="suit bottom_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">2</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade three">
        <div class="front">
          <div class="corner top">
            <span class="number">3</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_center">&#9824;</span>
          <span class="suit middle_center">&#9824;</span>
          <span class="suit bottom_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">3</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade four">
        <div class="front">
          <div class="corner top">
            <span class="number">4</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">4</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade five">
        <div class="front">
          <div class="corner top">
            <span class="number">5</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>
          <span class="suit middle_center">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">5</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade six">
        <div class="front">
          <div class="corner top">
            <span class="number">6</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>
          <span class="suit middle_left">&#9824;</span>
          <span class="suit middle_right">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">6</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade seven">
        <div class="front">
          <div class="corner top">
            <span class="number">7</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>
          <span class="suit middle_left">&#9824;</span>
          <span class="suit middle_top">&#9824;</span>
          <span class="suit middle_right">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">7</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade eight">
        <div class="front"> 
          <div class="corner top">
            <span class="number">8</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>
          <span class="suit middle_left">&#9824;</span>
          <span class="suit middle_top">&#9824;</span>
          <span class="suit middle_right">&#9824;</span>
          <span class="suit middle_bottom">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">8</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade nine">
        <div class="front">
          <div class="corner top">
            <span class="number">9</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>

          <span class="suit middle_top_left">&#9824;</span>
          <span class="suit middle_center">&#9824;</span>
          <span class="suit middle_top_right">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>
          <span class="suit middle_bottom_left">&#9824;</span>
          <span class="suit middle_bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">9</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade ten">
        <div class="front">
          <div class="corner top">
            <span class="number">10</span>
            <span>&#9824;</span>
          </div>

          <span class="suit top_left">&#9824;</span>
          <span class="suit top_right">&#9824;</span>

          <span class="suit middle_top_left">&#9824;</span>
          <span class="suit middle_top_center">&#9824;</span>
          <span class="suit middle_top_right">&#9824;</span>
          <span class="suit bottom_left">&#9824;</span>
          <span class="suit bottom_right">&#9824;</span>
          <span class="suit middle_bottom_center">&#9824;</span>
          <span class="suit middle_bottom_left">&#9824;</span>
          <span class="suit middle_bottom_right">&#9824;</span>

          <div class="corner bottom">
            <span class="number">10</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade jack">
        <div class="front">
          <div class="corner top">
            <span class="number">J</span>
            <span>&#9824;</span>
          </div>

          <span class="suit middle_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">J</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade queen">
        <div class="front">
          <div class="corner top">
            <span class="number">Q</span>
            <span>&#9824;</span>
          </div>

          <span class="suit middle_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">Q</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade king">
        <div class="front">
          <div class="corner top">
            <span class="number">K</span>
            <span>&#9824;</span>
          </div>

          <span class="suit middle_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">K</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card spade ace">
        <div class="front">
          <div class="corner top">
            <span class="number">A</span>
            <span>&#9824;</span>
          </div>

          <span class="suit middle_center">&#9824;</span>

          <div class="corner bottom">
            <span class="number">A</span>
            <span>&#9824;</span> </div>
          </div>
          <div class="back"></div>
        </div>
        
        <div class="card heart two">
        <div class="front">
          <div class="corner top">
            <span class="number">2</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_center">&#9829;</span>
          <span class="suit bottom_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">2</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart three">
        <div class="front">
          <div class="corner top">
            <span class="number">3</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_center">&#9829;</span>
          <span class="suit middle_center">&#9829;</span>
          <span class="suit bottom_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">3</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart four">
        <div class="front">
          <div class="corner top">
            <span class="number">4</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">4</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart five">
        <div class="front">
          <div class="corner top">
            <span class="number">5</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>
          <span class="suit middle_center">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">5</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart six">
        <div class="front">
          <div class="corner top">
            <span class="number">6</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>
          <span class="suit middle_left">&#9829;</span>
          <span class="suit middle_right">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">6</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart seven">
        <div class="front">
          <div class="corner top">
            <span class="number">7</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>
          <span class="suit middle_left">&#9829;</span>
          <span class="suit middle_top">&#9829;</span>
          <span class="suit middle_right">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">7</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart eight">
        <div class="front">
          <div class="corner top">
            <span class="number">8</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>
          <span class="suit middle_left">&#9829;</span>
          <span class="suit middle_top">&#9829;</span>
          <span class="suit middle_right">&#9829;</span>
          <span class="suit middle_bottom">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">8</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart nine">
        <div class="front">
          <div class="corner top">
            <span class="number">9</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>

          <span class="suit middle_top_left">&#9829;</span>
          <span class="suit middle_center">&#9829;</span>
          <span class="suit middle_top_right">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>
          <span class="suit middle_bottom_left">&#9829;</span>
          <span class="suit middle_bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">9</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart ten">
        <div class="front">
          <div class="corner top">
            <span class="number">10</span>
            <span>&#9829;</span>
          </div>

          <span class="suit top_left">&#9829;</span>
          <span class="suit top_right">&#9829;</span>

          <span class="suit middle_top_left">&#9829;</span>
          <span class="suit middle_top_center">&#9829;</span>
          <span class="suit middle_top_right">&#9829;</span>
          <span class="suit bottom_left">&#9829;</span>
          <span class="suit bottom_right">&#9829;</span>
          <span class="suit middle_bottom_center">&#9829;</span>
          <span class="suit middle_bottom_left">&#9829;</span>
          <span class="suit middle_bottom_right">&#9829;</span>

          <div class="corner bottom">
            <span class="number">10</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart jack">
        <div class="front">
          <div class="corner top">
            <span class="number">J</span>
            <span>&#9829;</span>
          </div>

          <span class="suit middle_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">J</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart queen">
        <div class="front">
          <div class="corner top">
            <span class="number">Q</span>
            <span>&#9829;</span>
          </div>

          <span class="suit middle_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">Q</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart king">
        <div class="front">
          <div class="corner top">
            <span class="number">K</span>
            <span>&#9829;</span>
          </div>

          <span class="suit middle_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">K</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>

        <div class="card heart ace">
        <div class="front">
          <div class="corner top">
            <span class="number">A</span>
            <span>&#9829;</span>
          </div>

          <span class="suit middle_center">&#9829;</span>

          <div class="corner bottom">
            <span class="number">A</span>
            <span>&#9829;</span> </div>
          </div>
          <div class="back"></div>
        </div>
      </div><!-- #deck -->
      
    </div><!-- #table -->
              
            
!

CSS

              
                *	{box-sizing:border-box; margin:0; padding:0;}
body {overflow:hidden; background:black;}

i {
	display: inline-block;
	font-family:'Gruppo';
	font-style:normal;
	font-size:150%;
	padding: 0 0.15em;
	-webkit-transform: scale(1) translate3d(0, -2000px, 0);
	   -moz-transform: scale(1) translate3d(0, -2000px, 0);
		-ms-transform: scale(1) translate3d(0, -2000px, 0);
		 -o-transform: scale(1) translate3d(0, -2000px, 0);
			transform: scale(1) translate3d(0, -2000px, 0);
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
}
i.fly-in-out {
	-webkit-animation: fly-in-out 7.5s ease-in-out;
	   -moz-animation: fly-in-out 3s ease-in-out;
		 -o-animation: fly-in-out 3s ease-in-out;
			animation: fly-in-out 3s ease-in-out;
}

@-webkit-keyframes fly-in-out {
	0% {
		-webkit-transform: scale(0) translate3d(0, -1000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		/* border-radius: 50%; */
	}
	7%, 96% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-webkit-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
		display:inline-block;
		}
	100% {
		color: transparent;	
		-webkit-transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@-moz-keyframes fly-in-out {
	0% {
		-moz-transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-moz-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		-moz-transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@-o-keyframes fly-in-out {
	0% {
		-o-transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		-o-transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		-o-transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}
@keyframes fly-in-out {
	0% {
		transform: scale(0) translate3d(0, -2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	15%, 85% {
		color: rgba(255, 255, 255, 0.8);
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		transform: scale(1) translate3d(0, 0, 0);
		background: transparent;
		box-shadow: none;
	}
	100% {
		color: transparent;	
		transform: scale(0) translate3d(0, 2000px, 0);
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
}

#AP-text	{position:absolute; width:75%; height:100%; left:12.5%; z-index:5050; padding-top:20%; text-align:center;font:bold 310% Georgia, "Times New Roman", Times, serif; color:transparent;}

#presents-text, #click-text	{position:absolute; width:75%; height:100%; left:12.5%; z-index:9848; top:37%; font:bold 400% "Gruppo"; text-align:center; display:none; color:white;}
#ultimate-text		{position:absolute; color:white; width:100%; height:100%; z-index:9848; top:15%; font:normal 650% "Frijole"; text-align:center; display:none;}
#click-text	{top:60%;}
#ultimate-text:hover, #ultimate-text:hover	{cursor:pointer;}

.expandScale {
-webkit-animation: animateScale 5s 1 ease-in-out;
-moz-animation: animateScale 3s 1 ease-in-out;
-o-animation: animateScale 3s 1 ease-in-out;
}
@-webkit-keyframes animateScale {
from { -webkit-transform:scale(0);color:transparent; }
to { -webkit-transform:scale(1);color:white; }
}
@-moz-keyframes animateScale {
from { -moz-transform:scale(0.1); }
to { -moz-transform:scale(1.02); }
}
@-o-keyframes animateScale {
from { -o-transform:scale(0.1); }
to { -o-transform:scale(1.02); }
}




 #table { height: 110%; position: relative; width: 100%;background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
background-attachment:scroll;
-webkit-perspective: 1500;
   overflow: hidden;
}
  
	.card { background-color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); float: left; height: 280px; margin: 0 15px 15px 0; position: absolute; width: 200px; z-index: 2;-webkit-transform:scale(.65,.65);-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: all .5s; z-index:2424 }
	.card .front {}
	.card .back {
	-moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	border:solid 1px black;
	width:100%;
	height:280px;
	background-color:white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),        
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px, 90px 90px; 
background-position:10;
-webkit-transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
	  }
	.card.flipped { -webkit-transform: rotateY(180deg) scale(.65,.65);}
	.card.heart, .card.diamond { color: red; }
	
	.card .corner { line-height: 1; overflow: hidden; position: absolute; text-align: center; }
	.card .corner span { display: block; font-size: 24px; font-weight: bold; }
	.card .corner .number { font-size: 32px; height: 32px; line-height: 32px; font-family: sans-serif; }
	.card.ten .corner .number { font-size: 24px; letter-spacing: -1.8px; }
	.card .corner.top { left: 8px; top: 12px; }
	.card .corner.bottom { bottom: 12px; right: 8px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	
	.card .suit { font-size: 64px; font-weight: bold; height: 60px; line-height: 60px; overflow: hidden; position: absolute; text-align: center; width: 50px; }
	.card .top_center { left: 76px; top: 24px; }
	.card .top_left { left: 30px; top: 24px; }
	.card .top_right { right: 30px; top: 24px; }
 
	.card .middle_center { left: 76px; top: 110px; }
	.card .middle_top { left: 76px; top: 70px; }
	.card .middle_bottom { bottom: 70px; left: 76px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	.card .middle_left { left: 30px; top: 110px; }
	.card .middle_right { right: 30px; top: 110px; }
	.card .middle_top_center { left: 76px; top: 60px; }
	.card .middle_top_left { left: 30px; top: 80px; }
	.card .middle_top_right { right: 30px; top: 80px; }
	.card .middle_bottom_left { bottom: 80px; left: 30px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	.card .middle_bottom_right { bottom: 80px; right: 30px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	.card .middle_bottom_center { bottom: 60px; left: 76px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	
	.card .bottom_center { bottom: 24px; left: 76px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	.card .bottom_left { bottom: 24px; left: 30px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
	.card .bottom_right { bottom: 24px; right: 30px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); }	
	
	#left-pile, #middle-pile, #right-pile	{position:absolute; width:100%; height:100%;top:5%;}
	
	#interfaceWrapper	{width:100%; height:10%; text-align:center; background:transparent; position:absolute; z-index:2424; display:none; padding-top:1%;}
	#interface	{
	height:100%;
	position:relative;
	color:white;
	font-family:'Gruppo';
	font-size:150%;
	font-weight:bold;
	font-style:normal;
	display:inline;
	line-height:45px;
	margin-left:1%;
	}
button	{margin-left:2%;}
.btn {
	-moz-box-shadow:inset 1px -3px 0px 0px #c1ed9c;
	-webkit-box-shadow:inset 1px -3px 0px 0px #c1ed9c;
	box-shadow:inset 1px -3px 0px 0px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
	background-color:#9dce2c;
	-webkit-border-top-left-radius:10px;
	-moz-border-radius-topleft:10px;
	border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-moz-border-radius-topright:10px;
	border-top-right-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius-bottomright:10px;
	border-bottom-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-moz-border-radius-bottomleft:10px;
	border-bottom-left-radius:10px;
	text-indent:0.75px;
	border:1px solid #83c41a;
	display:inline-block;
	color:#ffffff;
	font-family:Arial Black;
	font-size:17px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:45px;
	width:120px;
	text-decoration:none;
	text-align:center;
	text-shadow:2px 2px 0px #689324;
	outline:none;
}
.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
	background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
	background-color:#8cb82b;
	outline:none;
}.btn:active {
	position:relative;
	top:1px;
	outline:none;
	-moz-box-shadow:1px -3px 0px 0px #000;
	-webkit-box-shadow:1px -3px 0px 0px #000;
	box-shadow:1px -3px 0px 0px #000;
}
/* This button was generated using CSSButtonGenerator.com */

canvas	{width:100%; height:100%;}

#curtainsWrapper	{width:100%; height:100%; position:absolute; z-index:10; margin:0; padding:0;}
.curtain	{
background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
position:absolute;
}
.curtain-left, .curtain-right	{width:50%; display:inline-block; height:100%; margin:0; padding:0;}
.curtain-left {left:0%;}
.curtain-right	{width:50%; right:0%;}
div#deck div.card:nth-child(1){z-index:2525;}
div#deck div.card:nth-child(2){z-index:2524;}
div#deck div.card:nth-child(3){z-index:2523;}
div#deck div.card:nth-child(4){z-index:2400;}
              
            
!

JS

              
                var interface = $('#interface');
var button = $('.btn');
var buttonLeftPile = $('#leftPileButton');
var buttonMiddlePile = $('#middlePileButton');
var buttonRightPile = $('#rightPileButton');
button.hide();
function textFlyIn(){
var paragraph = document.getElementById('AP-text');

function textEffect(animationName) {
  var text = paragraph.innerHTML,
		chars = text.length,
		newText = '',
		animation = animationName,
		char,
		i;

	for (i = 0; i < chars; i += 1) {
		newText += '<i>' + text.charAt(i) + '</i>';
	}

	paragraph.innerHTML = newText;

	var wrappedChars = document.getElementsByTagName('i'),
		wrappedCharsLen = wrappedChars.length,
		j = 0;

	function addEffect () {
		setTimeout(function () {
			wrappedChars[j].className = animation;
			j += 1;
			if (j < wrappedCharsLen) {
				addEffect();
			}
		}, 100)
	}

	addEffect();
};

textEffect('fly-in-out');

};//end textFlyIn()


setTimeout(function(){textFlyIn()},800);
$('#presents-text').delay(4300).fadeIn(3500).delay(400).fadeOut(2500);
setTimeout(function(){$('#ultimate-text').addClass('expandScale').show()},8600);
$('#click-text').delay(12500).fadeIn(4000);


function openCurtains(){
$(".curtain-left").animate({borderBottomRightRadius: 100+"%"}, { queue: false, duration: 3800 }).animate({height: 20+"%"}, { queue: false, duration: 7000 });
$(".curtain-right").animate({borderBottomLeftRadius: 100+"%"}, { queue: false, duration: 3800 }).animate({height: 20+"%"}, { queue: false, duration: 7000 });
$(".curtain-left, .curtain-right").delay(7200).fadeOut("slow");
setTimeout(function(){$("#curtainsWrapper, .curtain-left, .curtain-right").remove()},7300);
};// end openCurtain()

function beginTrick(){
	setTimeout(function(){$('#AP-text, #presents-text').remove()},800);
	$('#ultimate-text, #click-text').delay(5000).fadeOut(4000);
	setTimeout(function(){$('#ultimate-text, #click-text').remove()},9100);
	
	openCurtains();
		$('#interfaceWrapper').delay(7500).fadeIn(4000);
	interface.text('I am going to deal the cards out into 3 different piles. Pick any card you want and remember it.');
	Shuffle();
	makeGameDeck();
	setTimeout(function(){dealCards()},11500);
	
	if(dealCount == 0){
		setTimeout(function(){interface.text('What pile is your card in?');button.show();},19000);
	};
	
	button.click(function(){
		if(dealCount == 1){
			button.hide();
			interface.text('Now we will deal the cards out into the 3 piles again. Find your card.');
			var interfaceChange2 = setTimeout(function(){interface.text('Which pile is it in this time?');button.show();},10000);
			setTimeout(function(){dealCards()},1400);
		};
		if(dealCount == 2){
			button.hide();
			interface.text('Last time. Find your card.');
			var interfaceChange3 = setTimeout(function(){interface.text('Which pile is your card in?');button.show();},10000);
			setTimeout(function(){dealCards()},1400);
		};
		if(dealCount == 3){
			button.hide();
			interface.text('Your card is:');
			setTimeout(function(){revealPlayersCard()},1400);
		};
	});
};//end beginTrick()





$('.card').addClass('flipped');

var dealCount = 0;
var fullDeck = $('#deck').children();
console.log('fresh deck:');
console.log(fullDeck);

	function Randomize(o) {
		for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
		return o;
	};
	function Shuffle() {
	Randomize(fullDeck);
	console.log('shuffled deck:');
	console.log(fullDeck);
            $('#deck').empty().append(fullDeck);
	};

	function makeGameDeck() {
	var gameDeck = $("div#deck div.card:nth-child(n+32)");
	console.log('game deck:');
	console.log(gameDeck);
            $('#deck').empty().append(gameDeck);	
	};
	
	
	
		var leftCardSlide = 20;
		var middleCardSlide = 40;
		var rightCardSlide = 60;
		var cardDrop = 4;
	
	function dealRow(){
	
		var leftCard = $('div#deck div.card:nth-child(1)');
		var middleCard = $('div#deck div.card:nth-child(2)');
		var rightCard = $('div#deck div.card:nth-child(3)');
		 
		function dealLeftCard(){
			leftCard.animate({
						left: leftCardSlide+"%",
						top: cardDrop+"%"
					  }, 250 );
			$("#left-pile").append(leftCard);
			setTimeout(function(){leftCard.removeClass("flipped")},350);
			leftPile = $('#left-pile').children();
			console.log(leftPile);
			leftCardSlide = leftCardSlide+2;
		};
		
		function dealMiddleCard(){
		middleCard.animate({
						left: middleCardSlide+"%",
						top: cardDrop+"%"
					  }, 500 );
			$("#middle-pile").append(middleCard);
			setTimeout(function(){middleCard.removeClass("flipped")},600);
			middlePile = $('#middle-pile').children();
			console.log(middlePile);
			middleCardSlide = middleCardSlide+2;
		};
		
		function dealRightCard(){
		rightCard.animate({
						left: rightCardSlide+"%",
						top: cardDrop+"%"
					  }, 750 );
			$("#right-pile").append(rightCard)
			setTimeout(function(){rightCard.removeClass("flipped")},850);
			rightPile = $('#right-pile').children();
			console.log(rightPile);
			rightCardSlide = rightCardSlide+2;
		};
		dealLeftCard();
		dealMiddleCard();
		dealRightCard();
		cardDrop = cardDrop+4;
	
	};// end dealRow()
	
	function dealCards(){
					dealRow();
					setTimeout(function(){dealRow()},1000);
					setTimeout(function(){dealRow()},2000);
					setTimeout(function(){dealRow()},3000);
					setTimeout(function(){dealRow()},4000);
					setTimeout(function(){dealRow()},5000);
					setTimeout(function(){dealRow()},6000);
					dealCount++;
					console.log('Times dealt: '+dealCount);
		};// end dealCards()
		
	function selectPile(pile){
	if(dealCount<=2){
		if(pile == "left"){
			$('#deck').append(middlePile);
			$('#deck').append(leftPile);
			$('#deck').append(rightPile);
		};// end if left pile
		if(pile == "middle"){
			$('#deck').append(leftPile);
			$('#deck').append(middlePile);
			$('#deck').append(rightPile);
		};// end if middle pile
		if(pile == "right"){
			$('#deck').append(leftPile);
			$('#deck').append(rightPile);
			$('#deck').append(middlePile);
		};// end if right pile
		$('.card').animate({
						left: "0%",
						top: "0%"
					  }, 550 );
			setTimeout(function(){$('.card').addClass("flipped")},350);
			leftCardSlide = 20;
			middleCardSlide = 40;
			rightCardSlide = 60;
			cardDrop = 4;
	}//end deal count if
	else if (dealCount>2){
		if(pile == "left"){
			$('#deck').append(leftPile);
			$('#middle-pile, #right-pile').empty();
		};// end if left pile
		if(pile == "middle"){
			$('#deck').append(middlePile);
			$('#left-pile, #right-pile').empty();
		};// end if middle pile
		if(pile == "right"){
			$('#deck').append(rightPile);
			$('#middle-pile, #left-pile').empty();
				};// end if right pile
			$('.card').animate({
						left: "0%",
						top: "0%"
					  }, 550 );
			setTimeout(function(){$('.card').addClass("flipped")},350);
		};//end deal count greater than 2 if
	};// end selectPile()
	
	function revealPlayersCard(){
		var playersCard=	$('div#deck div.card:nth-child(4)');
		$('#middle-pile').append(playersCard);
		$('div#deck div.card').hide();
				playersCard.animate({
						left: "45%",
						top: "20%"
					  }, 850 );
		setTimeout(function(){
			playersCard.css({ '-webkit-transform': 'scale(1.1)',})},800);
		setTimeout(function(){explode();},1000);
	};



	function explode(){
	window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

//create particle
function Particle(x, y, r, a, v) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.vX = v * Math.cos(a);
    this.vY = v * Math.sin(a);
}

Particle.prototype = {
    constructor: Particle,
    draw: function () {
        //generate random colors
        var red = Math.floor(Math.random() * 255 + 1);
        var green = Math.floor(Math.random() * 255 + 1);
        var blue = Math.floor(Math.random() * 255 + 1);
        //get context and begin drawing
        var context = document.getElementById("canvas").getContext("2d");
        context.beginPath();
        context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgb('+red+','+green+','+blue+')';  
        context.fill();
    },
    update: function () {
        //x will have minimal movement
        this.x += this.vX;
        //y velocity should be more than x
        this.y += this.vY;
    }
};

function Emitter() {
    this.particles = [];
}

Emitter.prototype = {
    constructor: Emitter,
    create: function (x, y, r, a, v) {
        this.particles.push(new Particle(x, y, r, a, v));
    },
    update: function () {
        for (i = 0; i < this.particles.length; i++) {
            this.particles[i].update();
        }
    },
    draw: function () {
        for (i = 0; i < this.particles.length; i++) {
            this.particles[i].draw();
        }
    }
};
var emitter = new Emitter();
//create 100 particles

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var wid = canvas.width = window.innerWidth;
var hei = canvas.height = window.innerHeight;

for (i = 0; i < 300; i++) {
    emitter.create(wid/2, hei/2, 2, Math.random() * 2 * Math.PI, Math.random()*10+1);
}

function animate() {
    emitter.update();
    context.clearRect(0, 0, canvas.width, canvas.height);
    emitter.draw();
    requestAnimFrame(animate);
}

animate();
}; //end explode()
              
            
!
999px

Console