SVG Klondike

               

                Copy the code below and paste it into your web page files as html to embed this game onto your web page. Only embed one game per page.


                

                <!-- iDev.Games Responsive Embed Code for SVG Klondike -->
<div style="position: relative;height: 0;overflow: hidden;padding-bottom: 56.25%;">
    <iframe id="embededGame" src="https://idev.games/embed/svg-klondike" scrolling="no" seamless="seamless" frameBorder="0" style="position: absolute;top:0;left: 0;width: 100%;height: 100%;">Browser not compatible.</iframe>
</div>
<!-- End Embed Code -->

                
           

Single draw only.

Use the dropdowns in the top left to choose a deck or cardback color before starting to play. Clicking anywhere else disables those dropdowns.

This is an ongoing modification of a rudimentary 2006 game, complete the game for a QR to the original.

TODO:

☑Add: sound FX

☑Modernise code: remove unecessary namespaces (upgrade SVG to version 2)

☑Modernise code: var to let/const for memory conservation

☑Add: completion detection

☑Modernise code: mousedown/move/up events to pointer ones so it works on mobile

☑Accessibility: match background to system/browser dark/light setting

☑Add: undo feature

☑Accessibility: widen card numbers for better readability, especially on mobile

☑Add: timer

☑Accessibility: visual completion indicator for deaf users

☑Add: hint feature

☑Add: extra deck themes and choice of back colours

☑Add: fullscreen toggle at top right corner

☑Add: autoplay to completion when Deck is empty and all cards are face-up

☑Add: autoplay a single card by double-clicking/tapping it

☑Add: extra table themes

☑Add: image of Hoyle's rules page from 1909 appears when hovering/tapping the timer

☑Internationalisation: country flags as a dropdown for translation (except for rules)

☑Add: volume controls

☐Add: animate waste turning over to become the deck when it's empty, and animate flipping facedown cards

☐Accessibility: Left and Right handed modes