{"id":20361,"date":"2016-02-27T03:01:43","date_gmt":"2016-02-26T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=20361"},"modified":"2016-02-26T12:36:37","modified_gmt":"2016-02-26T02:36:37","slug":"htmljavascript-canvas-arithmetic-keyboard-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-arithmetic-keyboard-game-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Arithmetic Keyboard Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Arithmetic Keyboard Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/chalkboard2.jpg\" title=\"HTML\/Javascript Canvas Arithmetic Keyboard Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Arithmetic Keyboard Game Tutorial<\/p><\/div>\n<p>Perhaps you were around when we presented <a title='HTML\/Javascript Canvas Chalkboard Game Tutorial' href='#hjccgt'>HTML\/Javascript Canvas Chalkboard Game Tutorial<\/a> quite some time back.  It was an arithmetic tester with degrees of difficulty.<\/p>\n<p>Today we add to the functionality of this mathematical game by adding a default new arrangement, which doesn&#8217;t stop you choosing to still play it the old way, but which (in its default incarnation) uses &#8230;<\/p>\n<ul>\n<li>the Javascript <a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a>([functionToPerform], [delayInMilliseconds]) function to start a timer from when a user should be solving the arithmetic problem &#8230; and then uses &#8230;<\/li>\n<li>the HTML\/Javascript keyboard events <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeyup<\/i><\/a> and <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeydown<\/i><\/a> to check for user progress &#8230; wiping out the answer if anything is seen to be wrong &#8230; so that &#8230;<\/li>\n<li>when an answer is correct a <i>cumulative characters typed count divided by a cumulative seconds elapsed<\/i> becomes your &#8220;keyboard rate&#8221; score, that you try to improve<\/li>\n<\/ul>\n<p>Mission <font size=4>Impossible<\/font> we hardly think so, but even so, <a target=_blank title='Do do do do, do do do do, do do do do, dobedobedah' href='https:\/\/www.youtube.com\/watch?v=MA2KmJMKFrQ'>Peter Graves<\/a> would have been quaking in his boots to have a go.<\/p>\n<p>The basic lessons of the past remain pertinent today &#8230;<\/p>\n<blockquote>\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 touch on the functionality to draw an image on the canvas via drawImage() method.   In the case of this tutorial that image contributes to the user answering some mathematics questions on a simulated <i>&#8220;chalkboard&#8221;<\/i>.<\/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<\/blockquote>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/chalkboard.html-GETME' title='chalkboard.html'>chalkboard.html<\/a> (changed from previously, as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/chalkboard.html-GETME' title='chalkboard.html'>this link<\/a>).<\/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>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/\">live run<\/a>.<\/p>\n<p>We think arithmetic improves mathematics knowledge!<\/p>\n<hr>\n<p id='hjccgt'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Chalkboard Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-chalkboard-game-tutorial\/'>HTML\/Javascript Canvas Chalkboard Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Chalkboard Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/chalkboard.jpg\" title=\"HTML\/Javascript Canvas Chalkboard Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Chalkboard Game 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 touch on the functionality to draw an image on the canvas via drawImage() method.   In the case of this tutorial that image contributes to the user answering some mathematics questions on a simulated <i>&#8220;chalkboard&#8221;<\/i>.<\/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\/HTMLCSS\/Canvas\/Game\/Chalkboard\/chalkboard.html_GETME' title='chalkboard.html'>chalkboard.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>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; hope you have a good time practising your mathematics knowledge!<\/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='#d5583' onclick='var dv=document.getElementById(\"d5583\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5583' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d20361' onclick='var dv=document.getElementById(\"d20361\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d20361' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Perhaps you were around when we presented HTML\/Javascript Canvas Chalkboard Game Tutorial quite some time back. It was an arithmetic tester with degrees of difficulty. Today we add to the functionality of this mathematical game by adding a default new &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-arithmetic-keyboard-game-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,14,15,17,37],"tags":[184,400,549,576,652,673,752,1705,1812,997,1126,1319],"class_list":["post-20361","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-gui","category-tutorials","tag-canvas","tag-event","tag-gui","tag-html","tag-javascript","tag-keyboard","tag-mathematics","tag-onkeydown","tag-onkeyup","tag-programming","tag-settimeout","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20361"}],"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=20361"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20361\/revisions"}],"predecessor-version":[{"id":20366,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/20361\/revisions\/20366"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=20361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=20361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=20361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}