{"id":59933,"date":"2023-06-29T03:01:36","date_gmt":"2023-06-28T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59933"},"modified":"2023-06-28T20:47:30","modified_gmt":"2023-06-28T10:47:30","slug":"ants-up-a-wall-game-snapshots-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-snapshots-tutorial\/","title":{"rendered":"Ants Up a Wall Game Snapshots 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 Snapshots Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall_snapshots.jpg\" title=\"Ants Up a Wall Game Snapshots Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Ants Up a Wall Game Snapshots Tutorial<\/p><\/div>\n<p>It occurred to us that &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-user-interactive-entry-dynamically-controlled-javascript-parameterization-tutorial\/' title='Making of User Interactive Entry Dynamically Controlled Javascript Parameterization Tutorial'>Making of User Interactive Entry Dynamically Controlled Javascript Parameterization Tutorial<\/a>&#8216;s involvement, behind the scenes, with having document.body element receive useful <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools'>global data attributes<\/a>, as a new idea for us &#8230; could combine with &#8230;<\/li>\n<li>the recent <a title='Ants Up a Wall Game Toast Tutorial' href='#auwgtt'>Ants Up a Wall Game Toast Tutorial<\/a>&#8216;s &#8220;Ants Up the Wall&#8221; game<\/li>\n<\/ul>\n<p> &#8230; to allow our game to optionally record game snapshots into document.body global data attributes, as another way to harness &#8230;<\/p>\n<ul>\n<li>parent webpage &#8230;<\/li>\n<li>has document.body global data attribute &#8220;snapshots&#8221; dynamically created &#8230;<\/li>\n<li>that can be recalled via a user controllable dropdown &#8230; and passed onto &#8230;<\/li>\n<li>a new game can be &#8220;window.open&#8221;<sub>ed<\/sub> establishing a &#8220;window.opener&#8221; link in the new game child window (back to the parent) &#8230;<\/li>\n<li>in order to be able to retain the &#8220;snapshots&#8221; among &#8220;Ants Up the Wall&#8221; game runs<\/li>\n<\/ul>\n<p>Yes, data is passing between webpages, but it is that nuance more sophisticated than your usual <i>&#8220;window.open&#8221;<sub>ed<\/sub> establishing a &#8220;window.opener&#8221; link<\/i> arrangement.<\/p>\n<p>You can try all this with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html---GETME\" tile=\"ants_up_the_wall.html\">our changed<\/a> <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> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\">&#8220;Ants Up a Wall&#8221; game<\/a> featuring new Javascript as below &#8230;<\/p>\n<p><code><br \/>\nfunction showtval(tvalis) {<br \/>\n try {<br \/>\n if (tvalis.trim() != '') {<br \/>\n  var woois=window.open('', '_blank', 'top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n  \/\/woois.document.write('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;&lt;body&gt;' + window.atob(document.body.getAttribute(tvalis)) + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n  woois.document.write('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML.replace('calc(10' + '0% - 550px);', '' + document.body.getAttribute('data-walltop') + 'px;') + '&lt;\/head&gt;&lt;body&gt;' + decodeURIComponent(document.body.getAttribute(tvalis)) + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n  document.getElementById('selsnapshots').value='';<br \/>\n }<br \/>\n } catch(hfgdhg) {<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction involvednewgame() {<br \/>\n  \/\/goes=0;<br \/>\n  woois=window.open('', '_blank'); \/\/, 'top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n  \/\/woois.document.write('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML + '&lt;\/head&gt;&lt;body&gt;' + window.atob(document.body.getAttribute(tvalis)) + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n  woois.document.write('&lt;html&gt;&lt;head&gt;' + fixsome(document.head.innerHTML.replace('calc(10' + '0% - 550px);', '' + document.body.getAttribute('data-walltop') + 'px;') + '&lt;\/head&gt;' + document.body.outerHTML.replace(document.getElementById('custom-alert-1').outerHTML,'')) + '&lt;\/html&gt;');<br \/>\n  \/\/woois.document.write('&lt;html&gt;&lt;head&gt;' + document.head.innerHTML.replace('calc(10' + '0% - 550px);', '' + document.body.getAttribute('data-walltop') + 'px;') + '&lt;\/head&gt;' + document.body.outerHTML.split('&gt;')[0] + '&gt;' + byih + '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n}<br \/>\n<br \/>\nfunction makesnapshot() {<br \/>\n   if (document.getElementById('selsnapshots') && !woois && !gwoois && notnew) {<br \/>\n   var inlabis='' + (new Date());<br \/>\n   var labis=('data-' + inlabis).replace(\/\\:\/g,'_').replace(\/\\\/\/g,'_').replace(\/\\ \/g,'_').replace(\/\\.\/g,'_').replace(\/\\+\/g,'_').replace(\/\\)\/g,'_').replace(\/\\(\/g,'_');<br \/>\n   \/\/document.body.setAttribute(labis, window.btoa(document.body.innerHTML));<br \/>\n   document.body.setAttribute(labis, encodeURIComponent(document.body.innerHTML));<br \/>\n   document.getElementById('oreadyfor').innerHTML=document.getElementById('oreadyfor').getAttribute('data-prefix') + 'last was at ' + inlabis + ') of ants at ...';<br \/>\n   document.getElementById('selsnapshots').innerHTML+='&lt;option value=\"' + labis + '\"&gt;' + inlabis + '&lt;\/option&gt;';<br \/>\n   \/\/ngblurb='&lt;button style=color:orange;z-index:9987; onclick=involvednewgame();&gt;game&lt;\/button&gt; ';<br \/>\n   \/\/ngblurb='game via header link click ';<br \/>\n   ngblurb='&lt;a target=_blank style=color:orange; href=\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html&gt;game&lt;\/a&gt; (or via header link click above to retain snapshots) ';<br \/>\n<br \/>\n   document.getElementById('custom-alert-1').onclick=function() { notnew=false; location.href=document.URL.split('#')[0].split('?')[0] + ffa; };<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction doshot(itv) {<br \/>\n   if (eval('' + itv) &gt; 0) {<br \/>\n      document.getElementById('mysnapshots').innerHTML='&lt;select id=selsnapshots onchange=\"showtval(this.value);\"&gt;&lt;option data-prefix=\"See ' + itv + ' sec' + 'ond snapshots (\" id=oreadyfor value=\"\"&gt;Se' + 'e ' + itv + ' sec' + 'ond snapshots (first yet to come) of ants at ...&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n      setInterval(makesnapshot, Math.round(eval(1000.0 * eval('' + itv))));<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction fixsome(inidea) {<br \/>\n  var outidea=inidea;<br \/>\n  var onls=inidea.split('&lt;bo' + 'dy onload=\"');<br \/>\n  var onlstwo=inidea.split('&lt;\/s' + 'cript&gt;');<br \/>\n  var onlstuff='';<br \/>\n  if (eval('' + onls.length) &gt; 1 && eval('' + onlstwo.length) &gt; 1) {<br \/>\n    onlstuff=onls[1].split('\"')[0];<br \/>\n    outidea=outidea.replace(onlstwo[0], onlstwo[0] + String.fromCharCode(10) + ' function onlis() { ' + onlstuff + ' }  ' + String.fromCharCode(10) + ' setTimeout(onlis, 2000); ' + String.fromCharCode(10));<br \/>\n    outidea=outidea.replace('&lt;bo' + 'dy onload=\"', '&lt;bo' + 'dy data-onload=\"');<br \/>\n    outidea=outidea.replace('cal' + 'c(100% - 10px)', '' + eval(-10 + screen.width) + 'px');<br \/>\n    outidea=outidea.replace('cal' + 'c(100% - 28px)', '' + eval(-28 + screen.height) + 'px');<br \/>\n  }<br \/>\n  return outidea;<br \/>\n}<br \/>\n<br \/>\nfunction lfd() {<br \/>\n  var datas=[], idatas=0;<br \/>\n  if (window.opener) {<br \/>\n     document.getElementById('mysnapshots').innerHTML=window.opener.document.getElementById('mysnapshots').innerHTML;<br \/>\n     datas=window.opener.document.body.outerHTML.split('&gt;')[0].split(' data-');<br \/>\n     for (idatas=1; idatas&lt;datas.length; idatas++) {<br \/>\n       document.body.setAttribute('data-' + datas[idatas].split('=')[0], datas[idatas].split('=\"')[1].split('\"')[0]);<br \/>\n     }<br \/>\n     setInterval(makesnapshot, Math.round(eval(1000.0 * eval('' + document.getElementById('mysnapshots').innerHTML.split('&gt;Se' + 'e ')[1].split(' ')[0]   ))));<br \/>\n     \/\/alert('Good');<br \/>\n  } else if (document.head.innerHTML.indexOf('calc(1' + '00% - 550px)') == -1) {<br \/>\n     \/\/alert('good');<br \/>\n     startx=-1;<br \/>\n     starty=-1;<br \/>\n     goes=20;<br \/>\n     score=0;<br \/>\n     slowants=1000;<br \/>\n     document.getElementById('rest').innerHTML='';<br \/>\n     document.getElementById('status').innerHTML='';<br \/>\n     document.getElementById('score').innerHTML=\"Score: 0.  Don't mean to scare you but there are 0 ants left looking for 20 food items.  Time survived keeping food and clicking ants away: 0 seconds.\";<br \/>\n  \/\/} else {<br \/>\n    \/\/alert('why? ' + document.head.innerHTML.split('&lt;scr')[0]);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-snapshots-tutorial\/'>Ants Up a Wall Game Snapshots Tutorial<\/a>.<\/p-->\n<hr>\n<p id='auwgtt'>Previous relevant <a target=_blank title='Ants Up a Wall Game Toast Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-toast-tutorial\/'>Ants Up a Wall Game Toast 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\/ants_up_the_wall.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ants Up a Wall Game Toast Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_ffa.jpg\" title=\"Ants Up a Wall Game Toast Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Ants Up a Wall Game Toast Tutorial<\/p><\/div>\n<p>Further to <a title='Ants Up a Wall Game Fixed Tutorial' href='#auwgft'>Ants Up a Wall Game Fixed Tutorial<\/a> recent progress with our &#8220;Ants Up a Wall&#8221; game we have a single word &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Android toast' href='https:\/\/developer.android.com\/guide\/topics\/ui\/notifiers\/toasts'>\"Toast\"<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; as a means of describing an alternative arrangement to have at the end of the game instead of the Javascript alert popup window we had previously, offering &#8230;<\/p>\n<ul>\n<li>non-modal and temporary information display &#8230;<\/li>\n<li>able to show and navigate off links &#8230;<\/li>\n<\/ul>\n<p>We tweaked to this as an issue when we created an HTML iframe off <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html--GETME\" tile=\"ants_up_the_wall.html\">our changed<\/a> <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> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\">&#8220;Ants Up a Wall&#8221; game<\/a> within a WordPress blog post, and that WordPress blog &#8220;down the line&#8221; would be interrupted with an alert box informing them about the &#8220;Ants Up a Wall&#8221; game status, and the user would be held up doing whatever they were doing at the blog, until they clicked the alert popup window&#8217;s OK button.  Well, with the Android &#8220;toast&#8221; inspired &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n.custom-alert {<br \/>\n  display: inline-block;<br \/>\n  visibility: visible;<br \/>\n  background-color: rgba(102,102,102,0.8);<br \/>\n  color: #fff;<br \/>\n  text-align: enter;<br \/>\n  margin: 5% auto;<br \/>\n  padding: 12px 28px;<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p> &#8230; arrangements (also being placed into the WordPress blog Twenty Ten theme&#8217;s <font size=1>good ol&#8217;<\/font> header.php), that user would no longer be corralled into clicking that OK button in order to proceed, but would still get to see information on the screen regarding the relevant &#8220;Ants Up a Wall&#8221; game and have links presented to them to navigate to other webpages of interest should they please, before disappearing, as necessary, <font color=blue>after some time<\/font> &#8230;<\/p>\n<p>&lt;script type=&#8217;text\/javascript&#8217;&gt;<br \/>\n<code><br \/>\nfunction isecm() {<br \/>\n if (okay) {<br \/>\n  isecs++;<br \/>\n  document.getElementById('score').innerHTML=\"Score: \" + score + \".  Don't mean to scare you but there are \" + eval(numants - minus) + \" ants left looking for \" + goes + \" food items.  Time survived keeping food and clicking ants away: \" + isecs + \" seconds.\";<br \/>\n  if (goes == 0) {<br \/>\n    <font color=blue>goes=-1;<\/font><br \/>\n    okay=false;<br \/>\n    if (1 == 2) {<br \/>\n    alert('Congratulations on keeping some food for ' + isecs + ' seconds.');<br \/>\n    location.href=document.URL.split('#')[0].split('?')[0];<br \/>\n    } else {<br \/>\n    document.getElementById('myh1').title='Click to restart';<br \/>\n    document.getElementById('myh1').style.textDecoration='underline';<br \/>\n    document.getElementById('myh1').style.cursor='pointer';<br \/>\n    <font color=blue>if (window.top) {<br \/>\n    if (wsprefix == '') {<br \/>\n    wsprefix=' ';<br \/>\n    var tifs=top.document.getElementsByTagName('iframe');<br \/>\n    for (var jtifs=0; jtifs&lt;tifs.length; jtifs++) {<br \/>\n      if (('' + tifs[jtifs].src).indexOf('ants_up_the_wall.htm') != -1) {<br \/>\n        if (('' + tifs[jtifs].id) != '') {<br \/>\n          wsprefix='&lt;a style=color:lightgreen; href=\"#' + tifs[jtifs].id + '\"&gt;';<br \/>\n          wssuffix='&lt;\/a&gt;';<br \/>\n        } else {<br \/>\n          var gbcr=tifs[jtifs].getBoundingClientRect();<br \/>\n          wsprefix='&lt;a style=\"cursor:pointer;text-decoration:underline;color:lightgreen;\" onclick=\" window.top.scroll(0,' + gbcr.top + '); \"&gt;';<br \/>\n          wssuffix='&lt;\/a&gt;';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (top.document.getElementById('custom-alert-1')) {<br \/>\n    top.document.getElementById('custom-alert-1').innerHTML=\"Congratulations on keeping some food for \" + isecs + \" seconds.  Click Ants Up the Wall &lt;a target=_blank style=color:orange; href=\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html&gt;game&lt;\/a&gt; \" + wsprefix.trim() + \"title\" + wssuffix + \" for another game.\";<br \/>\n    top.document.getElementById('custom-alert-1').style.display='inline';<br \/>\n    top.document.getElementById('custom-alert-1').style.visibility='visible';<br \/>\n    } else {<br \/>\n    top.document.body.innerHTML+=\"&lt;div id='custom-alert-1' class='custom-alert' style='visibility: visible;display: inline;'&gt;Congratulations on keeping some food for \" + isecs + \" seconds.  Click Ants Up the Wall &lt;a target=_blank style=color:orange; href=\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html&gt;game&lt;\/a&gt; \" + wsprefix.trim() + \"title\" + wssuffix + \" for another game.&lt;\/div&gt;\";<br \/>\n    }<br \/>\n    setTimeout(top.document.hideIt, 10000);<br \/>\n    } else {<br \/>\n    if (document.getElementById('custom-alert-1')) {<br \/>\n    document.getElementById('custom-alert-1').innerHTML=\"Congratulations on keeping some food for \" + isecs + \" seconds.  Click Ants Up the Wall &lt;a target=_blank style=color:orange; href=\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html&gt;game&lt;\/a&gt;  \" + wsprefix + \"title\" + wssuffix.trim() + \" for another game.\";<br \/>\n    document.getElementById('custom-alert-1').style.display='inline';<br \/>\n    document.getElementById('custom-alert-1').style.visibility='visible';<br \/>\n    } else {<br \/>\n    document.body.innerHTML+=\"&lt;div id='custom-alert-1' class='custom-alert' style='visibility: visible;display: inline;'&gt;Congratulations on keeping some food for \" + isecs + \" seconds.  Click Ants Up the Wall &lt;a target=_blank style=color:orange; href=\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html&gt;game&lt;\/a&gt; \" + wsprefix.trim() + \"title\" + wssuffix + \" for another game.&lt;\/div&gt;\";<br \/>\n    }<br \/>\n    setTimeout(hideIt, 10000);<br \/>\n    }<br \/>\n    \/\/ setTimeout(hideIt, 10000);<br \/>\n    }<br \/>\n    \/\/ location.href=document.URL.split('#')[0].split('?')[0];<\/font><br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<font color=blue><br \/>\nfunction hideIt() {<br \/>\n  if (window.top) {<br \/>\n  if (top.document.getElementById('custom-alert-1')) {<br \/>\n  top.document.getElementById('custom-alert-1').style.display='none';<br \/>\n  top.document.getElementById('custom-alert-1').style.visibility='hidden';<br \/>\n  }<br \/>\n  } else {<br \/>\n  if (document.getElementById('custom-alert-1')) {<br \/>\n  document.getElementById('custom-alert-1').style.display='none';<br \/>\n  document.getElementById('custom-alert-1').style.visibility='hidden';<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/font><font color=blue><br \/>\nfunction cthen() {<br \/>\n  goes=0;<br \/>\n  location.href=document.URL.split('#')[0].split('?')[0] + ffa;<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n&lt;\/script&gt;<\/p>\n<p>Today, also there are &#8220;Ants Up a Wall&#8221; game modes of play (with Javascript logics working with an &#8220;ant production&#8221; timer codeline <font color=blue>now goes<\/font> <i>setTimeout(moveants,<font color=blue>slowants<\/font>);<\/i>) that go &#8230;<\/p>\n<p>&lt;script type=&#8217;text\/javascript&#8217;&gt;<br \/>\n<code><br \/>\nvar slowants=1000;<br \/>\nvar ffa=(location.search.split('ffa=')[1] ? decodeURIComponent(location.search.split('ffa=')[1]).split('&')[0] : '');<br \/>\n<br \/>\nfunction oureval(inev, osel) {<br \/>\n  if (inev != '') {<br \/>\n  if (inev == '100') {<br \/>\n    document.getElementById('adjective').innerHTML='Fewer Faster ';<br \/>\n    ffa='?ffa=ffa';<br \/>\n  } else if (inev == '500') {<br \/>\n    document.getElementById('adjective').innerHTML='Half Paced ';<br \/>\n    ffa='?ffa=hp';<br \/>\n  } else if (inev == '50') {<br \/>\n    document.getElementById('adjective').innerHTML='Hard to Handle ';<br \/>\n    ffa='?ffa=hth';<br \/>\n  } else if (inev == '1000') {<br \/>\n    document.getElementById('adjective').innerHTML='Many Slow ';<br \/>\n    ffa='?ffa=ms';<br \/>\n  }<br \/>\n  slowants=eval(inev);<br \/>\n  osel.value='';<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction doffa() {<br \/>\n  if (ffa != '') {<br \/>\n    if (ffa == 'ffa') {<br \/>\n      document.getElementById('adjective').innerHTML='Fewer Faster ';<br \/>\n      slowants=eval('100');<br \/>\n      ffa='?ffa=ffa';<br \/>\n    } else if (ffa == 'hp') {<br \/>\n      document.getElementById('adjective').innerHTML='Half Paced ';<br \/>\n      slowants=eval('500');<br \/>\n      ffa='?ffa=hp';<br \/>\n    } else if (ffa == 'hth') {<br \/>\n      document.getElementById('adjective').innerHTML='Hard to Handle ';<br \/>\n      slowants=eval('50');<br \/>\n      ffa='?ffa=hth';<br \/>\n    } else if (ffa == 'ms') {<br \/>\n      document.getElementById('adjective').innerHTML='Many Slow ';<br \/>\n      slowants=eval('1000');<br \/>\n      ffa='?ffa=ms';<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/script&gt;<\/p>\n<p> &#8230; the point being that with some of these modes of play the ant movement feels a bit smoother, and more real!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-fixed-tutorial\/'>New Ants Up a Wall Game Fixed Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='auwgft'>Previous relevant <a target=_blank title='Ants Up a Wall Game Fixed Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-fixed-tutorial\/'>Ants Up a Wall Game Fixed Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Ants Up a Wall Game Fixed Tutorial\"]<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 Fixed Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall_modified.jpg\" title=\"Ants Up a Wall Game Fixed Tutorial\"   \/><\/a>[\/caption]\n\n\n\n\n\n<p>It's often hard, with web application games, to know how much \"randomosity\" is good.  Too little, and little interest, but too much and the game might become scatter-brained, and thereby less interesting at the other end of the spectrum.<\/p>\n\n\n\n\n\n<p>Do not know whether it tweaked with you, but yesterday's <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/hashtag-navigation-scrolling-tweaks-primer-tutorial\/' title='Hashtag Navigation Scrolling Tweaks Primer Tutorial'>Hashtag Navigation Scrolling Tweaks Primer Tutorial<\/a> (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_and_a_bit.html_GETME\" title=\"hashtag_and_a_bit.html\">hashtag_and_a_bit.html<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hashtag_and_a_bit.html\" title=\"Click picture\">web application<\/a>) used a technique of interest to us, the ...<\/p>\n\n\n\n<code>\nCSS <a target=_blank title='CSS position property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>\"position\"<\/a> transition change from its default \"relative\" value to \"fixed\" via Javascript DOM\n<\/code>\n\n\n\n<p> ... the \"relative\" initial setting getting us to a suitable \"y\" (or \"top\") positioning and a \"less suitable for our purposes\" \"x\" (or \"left\") positioning, which our ...<\/p>\n\n\n\n\n\n<ol>\n\n\n<li>\"position\" property \"fixed\" change, in anticipation of scrolling that might happen later, can be supplemented by ...<\/l>\n\n\n<li>glean a good \"top\" (or \"y\") co-ordinate via [element].<a target=_blank title='Javascript getBoundingClientRect information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_getboundingclientrect.asp'>getBoundingClientRect<\/a>().top (of its naturally occurring and suitable \"top\" position)<\/li>\n\n\n\n\n<li>forced suitable \"left\" (or \"x\") co-ordinate to suit our purposes (ended up at 220 to suit an iPhone)<\/li>\n\n\n<\/ol>\n\n\n\n\n\n<p> ... the best of both woooorrrrrlllllldddsss, we reckon?!<\/p>\n\n\n\n\n\n<p>And today, we're onto improving <a title='Ants Up a Wall Game Primer Tutorial' href='#auwgpt'>Ants Up a Wall Game Primer Tutorial<\/a>'s \"Ants Up the Wall\" game, adding randomosity, this time introducing toggles of the CSS \"position\" property between \"absolute\" and \"fixed\", so that you get ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>normal calm ants ... that can become ...<\/li>\n\n\n\n\n<li>\"transfixed\" (ie. CSS position: fixed; and no movement) ... but come out of that ...<\/li>\n\n\n\n\n<li>energised ants ... that can move faster and in a different direction<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>To change the scoring, or not to change the scoring, that is the question?  And the answer is ...<\/p>\n\n\n\n\n\n<blockquote>\nNo\n<\/blockquote>\n\n\n\n\n\n<p> ... we'll just leave it to the user to tweak to the better tactics now with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html-GETME\" tile=\"ants_up_the_wall.html\">our changed<\/a> <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> ...<\/p>\n\n\n\n\n\n<div class=\"container demo animated\"><iframe id=antif style='width:100%;height:750px;' src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\"><\/iframe><\/div>\n\n\n\n\n\n<p> ... <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ants_up_the_wall.html\" title=\"Click picture\">\"Ants Up the Wall\" game<\/a>!<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-fixed-tutorial\/'>Ants Up a Wall Game Fixed Tutorial<\/a>.<\/p-->\n<hr>\n<p id='auwgpt'>Previous relevant <a target=_blank title='Ants Up a Wall Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-primer-tutorial\/'>Ants Up a Wall Game Primer 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\/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<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='#d53938' onclick='var dv=document.getElementById(\"d53938\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53938' 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='#d53985' onclick='var dv=document.getElementById(\"d53985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/toast\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53985' 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='#d59933' onclick='var dv=document.getElementById(\"d59933\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/snapshot\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59933' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It occurred to us that &#8230; yesterday&#8217;s Making of User Interactive Entry Dynamically Controlled Javascript Parameterization Tutorial&#8216;s involvement, behind the scenes, with having document.body element receive useful global data attributes, as a new idea for us &#8230; could combine with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-snapshots-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,37],"tags":[2631,112,155,281,3980,1942,367,476,3981,576,652,997,3274,2384,1866,1161,4378,1319,1433,3010],"class_list":["post-59933","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-ants","tag-attribute","tag-body","tag-css","tag-data-attribute","tag-document-body","tag-dropdown","tag-game","tag-global-data-attribute","tag-html","tag-javascript","tag-programming","tag-recall","tag-save","tag-select","tag-snapshot","tag-snapshots","tag-tutorial","tag-window-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59933"}],"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=59933"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59933\/revisions"}],"predecessor-version":[{"id":59941,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59933\/revisions\/59941"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}