124 lines
24 KiB
HTML
124 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<title>Winning Solitaire</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
html {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #008000;
|
||
|
|
color: #ffffff;
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
touch-action: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#info {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
font-family: monospace;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas {
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="info">click and win!</div>
|
||
|
|
<canvas id="canvas"></canvas>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var dpr = window.devicePixelRatio;
|
||
|
|
|
||
|
|
var canvas = document.getElementById( 'canvas' );
|
||
|
|
canvas.width = window.innerWidth * dpr;
|
||
|
|
canvas.height = window.innerHeight * dpr;
|
||
|
|
canvas.style.width = '100%';
|
||
|
|
canvas.style.height = '100%';
|
||
|
|
|
||
|
|
var context = canvas.getContext( '2d' );
|
||
|
|
|
||
|
|
var id = 52;
|
||
|
|
|
||
|
|
var width = 71;
|
||
|
|
var height = 96;
|
||
|
|
|
||
|
|
var cwidth = width * Math.round( dpr );
|
||
|
|
var cheight = height * Math.round( dpr );
|
||
|
|
|
||
|
|
var cwidthhalf = cwidth / 2;
|
||
|
|
var cheighthalf = cheight / 2;
|
||
|
|
|
||
|
|
var particles = [];
|
||
|
|
|
||
|
|
function Particle( id, x, y, sx, sy ) {
|
||
|
|
|
||
|
|
if ( sx === 0 ) sx = 2;
|
||
|
|
|
||
|
|
var cx = ( id % 4 ) * width;
|
||
|
|
var cy = Math.floor( id / 4 ) * height;
|
||
|
|
|
||
|
|
this.update = function () {
|
||
|
|
|
||
|
|
x += sx;
|
||
|
|
y += sy;
|
||
|
|
|
||
|
|
if ( x < ( - cwidthhalf ) || x > ( canvas.width + cwidthhalf ) ) {
|
||
|
|
var index = particles.indexOf( this );
|
||
|
|
particles.splice( index, 1 );
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if ( y > canvas.height - cheighthalf ) {
|
||
|
|
y = canvas.height - cheighthalf;
|
||
|
|
sy = - sy * 0.85;
|
||
|
|
}
|
||
|
|
|
||
|
|
sy += 0.98;
|
||
|
|
|
||
|
|
context.drawImage( image, cx, cy, width, height, Math.floor( x - cwidthhalf ), Math.floor( y - cheighthalf ), cwidth, cheight );
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var image = document.createElement( 'img' );
|
||
|
|
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARwAAATgBAMAAADXsuAWAAAAGFBMVEUAAAAA/wAA////AP///wD/AAAAAAD////fPtU8AAAAAXRSTlMAQObYZgAAP/JJREFUeNrtnU2S5MqNrWvUPX6T93bQvYJr2gACWoACzmm3GfxgKjOJwPbfwEkG6fSgM7OiIrPuZUl9WyVloT6CTv8BcBw/fqD3639+/Ef3Z368ysx/RO+X/7Duz/zPi8yc+JlA/0f8RWa+I87Qt+N9nPEEjv1+OKP07cC6ONJ/KsfvhyPj0LVj6OGMQ/+p0Bny3xBnHEK6djqfsltIdJ/KrfO1+w+LUaSPA3RxRLo4QB9HeoaKHRzjjNJ/KnSf6oeFRMfN5U31cIbovnP0pm//YaMMcfxcCCD88LncRGLsONlh0XHyt8O5VvSfxzmxSIyvwZGhO2GEozsrn1mzTqzoowz9afAEzij9ReLEEnpm/jqDc2JWDsBegeMGw3sWibOze2feOYNzbpE4Z6eHc2LsnMI5aaeHc+LLqq14e/vVteNwx8/PO27bEbh7wrJXfs00eGI23T7T/nN95az8YZz9APjKNcthtXu+EgfwetfyhTgO27nnC3EAByr3fB2Ow4DaPV+HAzisds+X4RSW+uP6MpzinNo9X4VTnGOo3PNVOMU57pV7vghndk7tnl+IMxyYmUdOPXp2OK0z6R5nvzPY4exDaqicA7hj654djoiM9e5wh9PYGexw9ltMbCdkm/+9ck+NMxYcOcZp7Axs55zdHnOFYwDgcIcDsEMceQVOI2iEavE0gxk2C+kX4XiZdMq/Af85nP7YGfdWapzZOz+NU77QQ5xi5ckXAQNiGTvmD2utL0s6X5aX3NPnvTMNnce/fwpnSoXZp8fOPPuhfF9HOIeP9Uqc+ZuyQ5xDOx/AOZp3YEA44O5eoo7PcQ7nr3nsuHfGzuGsXGbB2UfrebCxhB7N7rM5j86XdbhmTRC+/OMI52jt+8ASerCiY1oaMP/TD3AOdwbnl9CDfYojME03mP7jV26/HFN4D7b8x6/cDc6fJiy2X+nX4JQZMMpXvp7hv2yvvLykTfjyS5MA3yu+8+3CTfhe4aade6581l8MB/YSHMcJnPFtOGEncGToZdDhji5O/6ncDF2cUaRjp3yu/rNPVdInPRwRGV6A03+qUzgl9fbzOP2nehVOyUv+PI4D3bFzAmfaJvw0TgDWxxlegnNi7Jyad2Q44+X+vNP/ss7NOy+alU/MptcS+nM4U1S3M++Ed+adD5j5nXCmKrVuBr03DZ4308Hpz19lA+4vMtOflU+sfdbBOW+mgzNE3054F+e0md6sPA79fdOJNeusmd8LZ5SXLBKnzfxeODGcOJGcWCTOmvnNcP7iK/o3k/x8M0HUpc86elnXl3WMc6bQGP26wZeY+fGiyt4XqkheIY55ncYm+nZOxK5eY+aHRbckF9GtUvcXmXmheu0VZup65SflRHVlbwtn65yxhVP9QWt/6NsjUaucaPtUaKVmK+fs39zOTOOpfljI8BiDT8qJHPvk2O7LGsahCjDFoZnWU1Uf+pMKle0X+gRn82VJKx3fN1NNg89wNn/yCc4aoKV2qM2gnV77ME577HwUx9FPr50pJ3I46lHYLCcaDpdQnEmvna7fOazBGOVs3c0ncVaVj3hS3TR8yDttM7U+60k50arq4hnOZt5pj531xPcMp9JntR/rBI5sJ/cmjuMEzuZPjk/srCsozPZjp/pzzXln/Ul6MdPDifb8tdJnOcL2X1aF82RW3jxVWEMnUeO0yomqj6C1hNZeba1Z1af0ZM2q/DF0cZ5Mg90VvcJpr1kv0mf1tjtn5WKv0mcNXZxan/VkN3jigPQrBFE/cez7Zjh/2UPxhXPhXDgXzoVz4Vw4F86Fc+FcOBfOhXPhXDgXzoVz4Vw4F85n7Pw59VmncF6kz4rhW+mzxs8Looa1c5pF6ttkUhtnm+jomnmKM1aZSGnJ4/ve2aSBxq6Zpzj7YoFdWn+dfHyizxrrVKTs8+ib5OMTfdYmidjEqVKzbQWS7BLH+zz6NjXbVgLItiRjaNnZStpbOK18byet3/zQq7R+Q5/1KZz9l7XPo9unajB2dlrT4M7KcLro4YM47ywJ+WYFMzVOfxqcvtDjsdMy4/VIbnzop3AapVefwIm6cuEMTktYVeFYS5+1fVenzXTu/ZLoe8e8Oys3zVTv3Bz9W9GaS3E1Apv6rKoiQ6KzZhUzvTvjmvudfclnd0Vv7nfso9uvbyb5kaFrx9Hfup8208Ppb3LdTuCcNdPFGYe+nb4e/ayZHy/Stb9FHn9KSN4XYp43cx2KD3Eufdalz/rsy7q+rGOc7yaI+m76rG4JrPcCOP4iMz+sq6sqRZ79sfMKMz+s1yso4sQdKf4iM99PalidHJr6rO0YbOqzKh3V2MbB0637Y95ZvfWn1z13NTbV4Gnqs+rry3s4z6977iqQtjhNJUD/qS59Vjtk0PyynsV3tn/wibZPooMTdcji0mf9EpxLn7UPc38E59JnzXP7pc86wLn0WdVLv/RZvxHOX/ZQfOFcOBfOhXPhfFucU/2z2hfeVIZO4FgX51T/LJzoRfIkoBInAirbc0S3f9azgEr0tu79p/pMS6YzONLvP/MkoPIrcJ6dQutDur0A58TYOYFzBVTegPM0oPIx75yr/er3zzqF0x8753Dik4/1q3D6/bPaAZWPzjvPAiq72b03f7UDKh+elZ8EVHZrX392P7OEvmTNehJQ+cQSemJF769Z1/brwrlwLpwL58J5Kc6lzzqycumznm9ULn3W0V750mcdHpAufdahnUuf9UXxnRqnPSvvi4s6Y6dlpo5+tb6sS5+1MdPVZ3Ujp21RS63P6p7R26KWKup+2s7xmiX9CEYbp8pJtPtwbe20VSRj9ZC9nISfUZF8N1FLv/HVqcrfs2a6m9M4VTrtLzLTe1nD2O+s2ddnnTbze+mzvhnOX/1QfOmzLn3WZ1/W9WX1cE50C/ITdYMvMPMdeyD17fgJnFeY+YbNzoa+7Awn1GuvMPPDxhMqOPTFdK8xsxSXb/bs2w38qu55G7CyDc58HhqeRPbWZjYMLZzNiWZ7vFnZqc6NLZzxWeH82ow9eap53tmc96rD32PCqEr5VyGwx7yzPX6ufrMxE+2nWuPIGkc+ibML5jVwqjr+lZkyDQ5dnIJxiDPKUAfzNr9ZzHgVPFv95mM4B2PnAzibwM7mN8sS2sPZB5pgsIcda8UWt4FGbMNwjd+sVvRNFG4bkkMrYFXZ+YCZV+DAqugiNsG0RSdxwjubP1mZWfRZx3ZKtPYQZ5T9cNmNHevizPqsQzsncKY/0DFzAqc44nDC8OmTeIT/HXBfjZ1xmZQPzAAWgfInF5zHbzaCqIPpdNJnbZIjMI/Vl7X8zUdmUJxsHo+hvPrNBqez2MC6S2i8Ys1a3u/xUgw7ngYXR/RX9MM169JnHZ8kThyQLn3WdSi+cC6cC+fCuXAunAvnwrlwLpwL58K5cC6cC+fCuXAunAvnwolLn/WTOJc+a/UE9W/qYtF9AmmP0zBTaWxaCaQdTiMvtlMg7dNrO5xWeq1WIDXSazucRtawwmklH3f6rFbycYPTTj7WFbmtnGqF00zNVgqkZmp2g/MkNVvVurcyzlt9VjtxXeG0E9frsfMkcb390Ntp/Y0+6ydw1l/Wszy6fbAG40lafzMNPitWGE4XPZzGeWNJyDcrmHmCI5XAoZFH9+2a1Rw7WzPNciLfdPk5h9Mqtvo4TrPY6hTOOHRxqkrb9ryzNdMsRUP9shqFeh/Hac/KOzO7NWuL0y5j3K1ZjbFzYs3am+muWc0izxNLaJxY0fdmNjudJxuM1j5lGOWEVsf8RWa6ONKXDvkJBdJJM7+Xem3s7pVLpaS/yMzv1XutmjCeHlj8RWauQ/EhzqXPuvRZn31Z15d1jPOahlWNewr3S/Ypyc83w+l7ufsu3HrtqoqG+czL+mY4ckJYhb4gql/Y23vl33HslPX/UJ+1fKbPi8tjUT62gnHVRuRAnzXhHOqzFpwjjU10a9
|
||
|
|
|
||
|
|
function throwCard( x, y ) {
|
||
|
|
|
||
|
|
id > 0 ? id -- : id = 51;
|
||
|
|
|
||
|
|
var particle = new Particle( id, x, y, Math.floor( Math.random() * 6 - 3 ) * 2, - Math.random() * 16 );
|
||
|
|
particles.push( particle );
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener( 'pointerdown', function ( event ) {
|
||
|
|
throwCard( event.clientX * dpr, event.clientY * dpr );
|
||
|
|
} );
|
||
|
|
|
||
|
|
document.addEventListener( 'pointermove', function ( event ) {
|
||
|
|
if ( event.pressure === 0 ) return;
|
||
|
|
throwCard( event.clientX * dpr, event.clientY * dpr );
|
||
|
|
} );
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
var i = 0, l = particles.length;
|
||
|
|
while ( i < l ) {
|
||
|
|
particles[ i ].update() ? i ++ : l --;
|
||
|
|
}
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
}
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|