{"id":36510,"date":"2018-03-01T03:01:37","date_gmt":"2018-02-28T17:01:37","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36510"},"modified":"2018-03-06T21:42:38","modified_gmt":"2018-03-06T11:42:38","slug":"ants-up-a-wall-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-primer-tutorial\/","title":{"rendered":"Ants Up a Wall Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ants Up a Wall Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.jpg\" title=\"Ants Up a Wall Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Ants Up a Wall Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;d like to thank the brick wall inspiration of this <a target=_blank title='Brick wall idea, thanks' href='http:\/\/lea.verou.me\/css3patterns\/#bricks'>very useful link<\/a> we talked about yesterday with <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-and-visibility-tall-poppies-tutorial\/'>CSS Style Display and Visibility Tall Poppies Tutorial<\/a> for the reason to take on our &#8220;Ants Up a Wall&#8221; game today.<\/p>\n<p>Today, though, we arrange it that the wall sits down the bottom of the screen, where, as you would all know, any self respecting ant will emerge from, if they take an interest in your computer equipment.<\/p>\n<blockquote><p>\nYour mission, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=0TiqXFssKMY'>Jim<\/a>, should you decide to accept it is to protect your food supplies on the wall from marauding ants.  We&#8217;ve assembled a crack team for you, Jim, or you can come up with your own Bee Team (chortle, chortle).  As always, should you or any of your I.M. Force be caught or killed, the Secretary will disavow any knowledge of your actions.\n<\/p><\/blockquote>\n<p>Aspects of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\" title=\"Click picture\">&#8220;Ants Up a Wall&#8221;<\/a> game&#8217;s HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html_GETME\" title=\"ants_up_the_wall.html\">ants_up_the_wall.html<\/a> source code for your perusal &#8230;<\/p>\n<ul>\n<li>brick wall inspired as above, thanks, and represented as an HTML hr (horizontal rule) element, positioned via use of &#8230;<\/li>\n<li>CSS <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a><\/li>\n<li>CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp' title='CSS transform property rotation information from w3schools'>rotation<\/a><\/li>\n<li>Javascript <a target=_blank title='Javascript Object information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_object_constructors.asp'>Object<\/a> OOP style syntax &#8230; for a &#8230;<\/li>\n<li>data structure which is an Array of Javascript (Ant) objects &#8230; and as for yesterday&#8217;s game, all of &#8230;<\/li>\n<li>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> * [integerRange]) +\/- [integerOffset])  \/\/ randomosity aid<\/li>\n<li><a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> (and <a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'><i>setInterval<\/i><\/a> (to derive a &#8220;seconds elapsed&#8221; idea to the game)) timer methods &#8230; and, lately, at least &#8230;<\/li>\n<li>Emoji usage<\/li>\n<\/ul>\n<p>The marauding ants need a limit of their numbers, in case users leave the web application running forever, and that is where we relieve memory requirements by using the <a target=_blank title='Javascript Array methods' href='https:\/\/www.w3schools.com\/js\/js_array_methods.asp'>delete<\/a> (array member) method of keeping the (array) indexes constant but save on memory requirements over time.<\/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='#d36510' onclick='var dv=document.getElementById(\"d36510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;d like to thank the brick wall inspiration of this very useful link we talked about yesterday with CSS Style Display and Visibility Tall Poppies Tutorial for the reason to take on our &#8220;Ants Up a Wall&#8221; game today. Today, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-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,14,15,28,37],"tags":[103,126,2422,281,385,476,477,576,652,2020,849,2010,875,876,997,2047,1319],"class_list":["post-36510","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-oop","category-tutorials","tag-array","tag-background","tag-calc","tag-css","tag-emoji","tag-game","tag-games-2","tag-html","tag-javascript","tag-linear-gradient","tag-object","tag-object-oriented-programming","tag-oop","tag-opacity","tag-programming","tag-random","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36510"}],"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=36510"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36510\/revisions"}],"predecessor-version":[{"id":36644,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36510\/revisions\/36644"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}