A Pen by Will Wharton.

index.html

<canvas id="can" width="800" height="600"/>
<img id="bg" src="http://i.imgur.com/fPH6QI7.png">
<img id="cards" src="http://i.imgur.com/XZlSH3r.png">
<img id="spot" src="http://i.imgur.com/LP5T0IN.png">

script.js

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

var c=document.getElementById("can");
var ctx=c.getContext("2d");
var bg=document.getElementById("bg");
var cards=document.getElementById("cards");
var spot=document.getElementById("spot");
//ctx.translate(0.5,0.5);
//draw bg
djk = [0,256,512,768];
for(j=0;j<4;j++)
  for(k=0;k<4;k++)
    ctx.drawImage(bg,djk[j],djk[k]);

//draw spots
ctx.drawImage(spot,100,10);
ctx.drawImage(spot,10,10);
for(s=0;s<7;s++)
  ctx.drawImage(spot,65+(s*100),180);

//draw kings and lets get started
goals = [3,1,2,0]
for(g=0;g<4;g++)
  ctx.drawImage(cards,
                12*71,//Sprite X
                goals[g]*96,//Sprite Y
                71,
                96,
                450+(g*80),//on screen X
                10,//on screen Y
                71,
                96);

spot = 0;
value = 12;

vx = -4;
vy = 4;
cx = 450;
cy = 10;
decay = 0.2;

function draw() {
  cx += vx;
  cy += vy;
  vy += decay
  //vx -= 0.001
  if(vy>0){
    //vy += decay
  }
  if(vy<0){
    //vy -= decay
  }
  if (cy >= 600-96 ){//bounce
    cy = 600-96
    vy = vy * -1 * 0.7+(1.0-(Math.random()*2.0));//(Math.random() *2)
    if(vy > 0.1)
      vy = -1
  }
  if(cx <= -71 || cx >= 800 ){
    spot++;
    if(spot>=4){
      spot = 0
      value--;
    }
    decay = 0.3
    vx = 4*(1-(Math.random()*2));
    if(vx>0)
      vx += 1
    else
      vx -= 1
    vy = 4*Math.random();
    cx = 450+(spot*80);
    cy = 10;
    
  }
  ctx.drawImage(cards,
                value*71,//Sprite X
                goals[spot]*96,//Sprite Y
                71,
                96,
                cx,//Math.floor(cx),//on screen X
                cy,//Math.floor(cy),//on screen Y
                71,
                96);
}


function animate() {
  if(value>=0)
    requestAnimationFrame( animate );
	draw();
}
animate();

solitaire-win-animation.markdown

solitaire win animation

A Pen by Will Wharton on CodePen.

License.