{"id":66132,"date":"2024-12-22T03:01:00","date_gmt":"2024-12-21T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66132"},"modified":"2024-12-21T17:58:05","modified_gmt":"2024-12-21T07:58:05","slug":"ball-game-canvas-animation-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ball-game-canvas-animation-primer-tutorial\/","title":{"rendered":"Ball Game Canvas Animation Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ball_canvas_trailing.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Ball Game Canvas Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ball_canvas_trailing.jpg\" title=\"Ball Game Canvas Animation Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Ball Game Canvas Animation Primer Tutorial<\/p><\/div>\n<p>In the 70&#8217;s (ie. 1970&#8217;s), around and in Australian squash court complexes, people would get excited by the squash, and the &#8220;coffee table&#8221; style computer games based on balls and bats and walls.  Well, today, we were reminded of those &#8220;heady days&#8221; <font size=1>&#8230; cough, cough &#8230;<\/font> when we chanced upon <a target=\"_blank\" title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\/Advanced_animations' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\/Advanced_animations' rel=\"noopener\">this excellent website<\/a> using &#8230;<\/p>\n<ul>\n<li>HTML5 <a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> &#8230; and &#8230;<\/li>\n<li>window.<a target=\"_blank\" title='window.requestAnimationFrame information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/requestAnimationFrame' rel=\"noopener\">requestAnimationFrame<\/a><\/li>\n<\/ul>\n<p> &#8230; &#8220;animation friends&#8221;.<\/p>\n<p>We thought to &#8220;value add&#8221; via &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='https:\/\/stackoverflow.com\/questions\/39563033\/how-to-resize-the-canvas-using-javascript' href='\/\/stackoverflow.com\/questions\/39563033\/how-to-resize-the-canvas-using-javascript' rel=\"noopener\">https:\/\/stackoverflow.com\/questions\/39563033\/how-to-resize-the-canvas-using-javascript<\/a>&#8216;s &#8220;heads up&#8221; regarding a window resizing means by which we might allow a canvas resize &#8230; as well as the method below, in amongst &#8230;<\/li>\n<li>allow user control of &#8230;\n<ol>\n<li>ball radius<\/li>\n<li>ball colour<\/li>\n<li>ball delta-X movement<\/li>\n<li>ball delta-Y movement<\/li>\n<li>ball &#8220;field&#8221; width<\/li>\n<li>ball &#8220;field&#8221; height<\/li>\n<\/ol>\n<\/li>\n<li>style a brick wall the ball could bounce off <font size=1>(alas, not as unpredictable as the besser block wall we used to practice tennis reactions against)<\/font><\/li>\n<\/ul>\n<p> &#8230; in today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ball_canvas_trailing.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ball_canvas_trailing.html\" rel=\"noopener\">Ball Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/ball_canvas_trailing.html\" style=\"width:100%;height:980px;\"><\/iframe><\/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='#d66132' onclick='var dv=document.getElementById(\"d66132\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66132' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the 70&#8217;s (ie. 1970&#8217;s), around and in Australian squash court complexes, people would get excited by the squash, and the &#8220;coffee table&#8221; style computer games based on balls and bats and walls. Well, today, we were reminded of those &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ball-game-canvas-animation-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":[4,12,14,37],"tags":[84,5027,5028,184,400,476,861,2219,1661,997,1986,2719,1319,2476,1583],"class_list":["post-66132","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-ball","tag-bounce","tag-canvas","tag-event","tag-game","tag-onclick","tag-onmousemove","tag-onmouseout","tag-programming","tag-proof-of-concept","tag-requestanimationframe","tag-tutorial","tag-wall","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66132"}],"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=66132"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66132\/revisions"}],"predecessor-version":[{"id":66140,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66132\/revisions\/66140"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}