HTML/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial

HTML/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial

HTML/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

In today’s tutorial we mainly use the drawImage function to create a webpage where you can play the card game called Strip Jack Naked. We play with two players and there is not so much interactivity with this game (if you just stick to the rules of the game?!) … you place your hands in the “powers that be” with this game … and that is largely decided by the Javascript method Math.random().

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to strip_jack_naked.html

You’ll notice heavy use of the Javascript Math.random() function.

You may also notice use of the Javascript setTimeout() function, and a scenario where it is important to have this function available, as a timed recursive (dynamic) tool, rather than setInterval() which is useful when you know you will be doing something many times with a systematic interval that you know (everything about) right from the start.

We hope you enjoy this Strip Jack Naked Card Game tutorial live run.

Yes … you’ve reached the end … have a top supportive lucky day!

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Games, Tutorials and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>