HTML/Javascript Canvas Memories Card Game Primer Tutorial

HTML/Javascript Canvas Memories Card Game Primer Tutorial

HTML/Javascript Canvas Memories 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 Memories.

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 memories.html

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

We hope you enjoy this Memories Card Game tutorial live run.

Yes … you’ve reached the end … have a top supportive day full of happy memories!

Stop Press

As of the 5th June 2015 you may notice this game changed to add functionality, and that the live run above might support some drag and drop functionality on non-mobile platforms so you may want to compare this to an old live run for how it worked before this date.

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>