{"id":69240,"date":"2025-07-31T03:01:00","date_gmt":"2025-07-30T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69240"},"modified":"2025-07-31T12:47:53","modified_gmt":"2025-07-31T02:47:53","slug":"animated-plane-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-primer-tutorial\/","title":{"rendered":"Animated Plane Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_top.png\" title=\"Animated Plane Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game Primer Tutorial<\/p><\/div>\n<p>The <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> discoveries <font size=1>(along with those naive previous usage without realizing it&#8217;s implications)<\/font> we made creating <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/periodic-table-image-map-primer-tutorial\/' title='Periodic Table Image Map Primer Tutorial' rel=\"noopener\">Periodic Table Image Map Primer Tutorial<\/a> recently has opened up new &#8220;vistas of possibility&#8221; (VOP, of course) for us, and has inspired us to give &#8220;just Javascript and CSS and HTML animated games&#8221; (aided in large part by clipart free content components) another go &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/p>\n<p> &#8230; with a &#8220;widget feel&#8221; now realizable, for us, knowing that white backgrounded HTML iframe content no longer has to hold us back piecing together animations (in an &#8220;OOP feeling&#8221; way) consisting of &#8230;<\/p>\n<ul>\n<li>base webpage CSS and HTML and Javascript (DOM, also helping out the control of) &#8230;<\/li>\n<li>HTML iframe components (and in our case the image content is it&#8217;s background image with background-size:contain; and background-repeat:no-repeat; along with a specific iframe width and height) for any one &#8220;noun&#8221; (or class of object) in your game storyboard &#8230; if you will &#8230; if you will &#8230; if you will &#8230; and &#8230;<\/li>\n<li>HTML img components in a similar vein &#8230; but today&#8217;s trees did not need <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> because the originator made the background transparent (ie. another option with all this &#8220;animated pieces thinking&#8221;)<\/li>\n<\/ul>\n<p>Animation(s) can be CSS @keyframe transitions (though not yet with animation above) or Javascript DOM logic via setTimeout (or setInterval) timers or animated GIF\/webp content or, we daresay, many other approaches.<\/p>\n<p>We&#8217;re going to tabularize below &#8220;how we got to the result above&#8221; below &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>We started with a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME\" rel=\"noopener\">&#8220;first draft&#8221;<\/a> &#8230; getting <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpg'><\/img> plane image animated with a rudimentary green border-bottom representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;second draft&#8221;<\/a> &#8230; adding  <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background to go with edited <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpeg'><\/img> because mix-blend-mode:multiply will not mask out the non heterogenous bluish clouds in the image &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;third draft&#8221;<\/a> &#8230; tweaking <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background &#8230; &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">&#8220;fourth draft&#8221;<\/a> &#8230; establishing an SVG+XML (with SVG text emoji content) border-image for the bottom border representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">&#8220;fifth draft&#8221;<\/a> &#8230; added acknowledgements for all the help &#8230;<\/p>\n<blockquote><p>\nThanks to Image by brgfx on Freepik and https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif and https:\/\/procul.org\/images\/2025\/Animated-Clouds-Gif\/ and  and https:\/\/au.pinterest.com\/pin\/587930926347995281\/ and https:\/\/giphy.com\/explore\/trees-swaying-stickers\n<\/p><\/blockquote>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">&#8220;sixth draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" alt=\"https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" style=\"height:60px;\" src='\/HTMLCSS\/GIF_from_GIFER.gif'><\/img> animated GIF gymnast background and thereby proving that overlapping &#8220;iframe widgets&#8221; (helped out by mix-blend-mode:multiply presumably) was possible, and important &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">&#8220;seventh draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" alt=\"https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" src='\/HTMLCSS\/swaying_trees.webp' style=\"height:60px;\"><\/img> animated (and transparently backgrounded) webp swaying trees image along with tweaked <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.gif'><\/img> now animated GIF to animate the plane itself a little, in place, separate to the Javascript DOM based animation moving across the screen &#8230; for today&#8217;s final draft &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>In tomorrow&#8217;s installment we allow for user defined content, and sharing, as per &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/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='#d69240' onclick='var dv=document.getElementById(\"d69240\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mix-blend-mode\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69240' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The mix-blend-mode:multiply; discoveries (along with those naive previous usage without realizing it&#8217;s implications) we made creating Periodic Table Image Map Primer Tutorial recently has opened up new &#8220;vistas of possibility&#8221; (VOP, of course) for us, and has inspired us to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-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":[4,12,14,15,37],"tags":[83,84,127,2472,2379,161,2299,5247,2008,281,354,385,5253,476,5257,513,2258,576,587,5251,590,652,5254,5243,2011,849,875,894,5256,1918,1988,5255,997,1200,5252,1226,3889,2996,5250,1319,5246,5248,5249,1428,2257],"class_list":["post-69240","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-animated-gif","tag-animation-2","tag-background-image","tag-background-repeat","tag-background-size","tag-border","tag-border-image","tag-border-bottom","tag-clipart","tag-css","tag-dom","tag-emoji","tag-freepik","tag-game","tag-giphy","tag-google","tag-height","tag-html","tag-iframe","tag-iframe-widget","tag-image","tag-javascript","tag-makeagif-com","tag-mix-blend-mode","tag-noun","tag-object","tag-oop","tag-overlay","tag-pinterest","tag-pixel","tag-position","tag-procul-org","tag-programming","tag-stop-press","tag-storyborad","tag-svg","tag-svgxml","tag-transparent","tag-transparent-background","tag-tutorial","tag-webp","tag-white","tag-white-background","tag-widget","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69240"}],"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=69240"}],"version-history":[{"count":40,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69240\/revisions"}],"predecessor-version":[{"id":69296,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69240\/revisions\/69296"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}