{"id":8114,"date":"2014-06-15T05:04:17","date_gmt":"2014-06-14T19:04:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8114"},"modified":"2014-06-15T05:04:17","modified_gmt":"2014-06-14T19:04:17","slug":"htmljavascript-canvas-strip-jack-naked-card-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-strip-jack-naked-card-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/StripJackNaked\/strip_jack_naked.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/StripJackNaked\/StripJackNaked.jpg\" title=\"HTML\/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Strip Jack Naked Card Game Primer Tutorial<\/p><\/div>\n<p>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.<\/p>\n<p>In today&#8217;s tutorial we mainly use the <a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp' title='HTML5 Canvas drawImage() method information from w3schools ... thanks'>drawImage<\/a> 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?!) &#8230; you place your hands in the &#8220;powers that be&#8221; with this game &#8230; and that is largely decided by the Javascript method <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a>.<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/StripJackNaked\/strip_jack_naked.html_GETME' title='strip_jack_naked.html'>strip_jack_naked.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>You may also notice use of the Javascript <a target=_blank title='Javascript setTimeout() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout()<\/a> function, and a scenario where it is important to have this function available, as a timed recursive (dynamic) tool, rather than <a target=_blank title='Javascript setInterval() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval()<\/a> 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.<\/p>\n<p>We hope you enjoy this Strip Jack Naked Card Game tutorial <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/Games\/StripJackNaked\/strip_jack_naked.html\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; have a top supportive lucky day!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d8114' onclick='var dv=document.getElementById(\"d8114\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=games-2\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8114' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s tutorial we mainly use the drawImage function to create &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-strip-jack-naked-card-game-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,15,37],"tags":[184,187,477,576,578,652,997,1319],"class_list":["post-8114","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-canvas","tag-cards","tag-games-2","tag-html","tag-html5","tag-javascript","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8114"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=8114"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8114\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=8114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=8114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=8114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}