{"id":25022,"date":"2016-10-23T03:01:23","date_gmt":"2016-10-22T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25022"},"modified":"2016-10-23T07:44:05","modified_gmt":"2016-10-22T21:44:05","slug":"star-proteins-versus-superbugs-game-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/star-proteins-versus-superbugs-game-genericization-tutorial\/","title":{"rendered":"Star Proteins versus Superbugs Game Genericization Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm?showform=on\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Star Proteins versus Superbugs Game Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/showform_superbugs.jpg\" title=\"Star Proteins versus Superbugs Game Genericization Tutorial\" \/><\/a><p class=\"wp-caption-text\">Star Proteins versus Superbugs Game Genericization Tutorial<\/p><\/div>\n<p>We think, with our &#8220;Star Proteins versus Superbugs Game&#8221; project, that we may have a project worth &#8220;genericizing&#8221;.  In other words, we make it tailorable to other scenarios of usage, for the one HTML and Javascript and CSS bit of code, to run other game scenarios.  When you &#8220;genericize&#8221; there are limits, one being the scope of how far you want to &#8220;genericize&#8221;.  Our aim with our project is to keep intact these ideas &#8230;<\/p>\n<ul>\n<li>there&#8217;ll be 4 classes<\/li>\n<li>there&#8217;ll be the left hand class that can fire off a shot at the &#8220;enemy&#8221;<\/li>\n<li>there&#8217;ll still be a Wall or barrier of some sort protecting the rightmost &#8220;enemy&#8221; class, made up of component parts<\/li>\n<li>the game is played by timing how long it takes the left hand class objects to defeat the right hand &#8220;enemy&#8221; class objects<\/li>\n<\/ul>\n<p>Notice no mention of the words &#8220;star proteins&#8221; or &#8220;star&#8221; or &#8220;superbugs&#8221; or even &#8220;brick&#8221;.  In other words we allow you to have the game played with other &#8220;nouns&#8221; of your chosing, replacing these existing &#8220;nouns&#8221;, which describe your classes and objects.<\/p>\n<p>Naturally, if you replace &#8220;nouns&#8221; you need a mechanism for the user to tailor where to find the imagery of the game, for these new conditions.<\/p>\n<p>And that is as far as we go with &#8220;genericizations&#8221; at this stage.<\/p>\n<p>So what Javascript function is a big friend of &#8220;genericization&#8221;?  I&#8217;d say Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> function is our favourite here.<\/p>\n<p>It&#8217;s funny to think that our HTML and Javascript and CSS <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html---GETME' title='star_proteins_vs_superbugs.htm'>star_proteins_vs_superbugs.htm<\/a>, vastly changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html---GETME' title='star_proteins_vs_superbugs.htm'>this link<\/a>, functions exactly the same in its default form, and you can continue to enjoy its accompanying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm' title='Click picture'>default live run<\/a> link, but it can, through the use of complex URLs (only, just at this early stage) be made to look vastly different, with the same code, as you can see with this <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm?showform=on' title='Click picture'>complex live run<\/a>.<\/p>\n<p>So, in summary, there are many more &#8220;live run&#8221; options, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Default live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm'>Default live run<\/a><\/li>\n<li><a target=_blank title='Default live run with form' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm?showform=on'>Default live run with form<\/a><\/li>\n<li><a target=_blank title='Different run scenario Hearts versus King of Spades game' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm?notStar_Proteins_Versus_Superbugs_Game=Hearts+versus+King+of+Spades&#038;notStar_Proteins=Hearts&#038;notStar=Hearts&#038;notBrick=House&#038;notSuperbug=KingOfSpades&#038;imagepath=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FMemories%2Fimages%2F&#038;notonestar_jpg=13h.gif&#038;nottwostar_jpg=12h.gif&#038;notthreestar_jpg=11h.gif&#038;notfourstar_jpg=10h.gif&#038;notfivestar_jpg=09h.gif&#038;notsixstar_jpg=08h.gif&#038;notsevenstar_jpg=01h.gif&#038;form=&#038;notbrick_jpg=back01.gif&#038;notsuperbug_jpg=13s.gif&#038;soundfile1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FBattleshipsandcruisers%2Fsounds%2FWind-SoundBible.com-950807958.wav&#038;soundfile2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FBattleshipsandcruisers%2Fsounds%2FThunder-Mike_Koenig-315681025.wav'>Different run scenario Hearts versus King of Spades game<\/a><\/li>\n<li><a target=_blank title='Different run scenario Hearts versus King of Spades game with form' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm?notStar_Proteins_Versus_Superbugs_Game=Hearts+versus+King+of+Spades&#038;notStar_Proteins=Hearts&#038;notStar=Hearts&#038;notBrick=House&#038;notSuperbug=KingOfSpades&#038;imagepath=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FMemories%2Fimages%2F&#038;notonestar_jpg=13h.gif&#038;nottwostar_jpg=12h.gif&#038;notthreestar_jpg=11h.gif&#038;notfourstar_jpg=10h.gif&#038;notfivestar_jpg=02h.gif&#038;notsixstar_jpg=08h.gif&#038;notsevenstar_jpg=01h.gif&#038;form=&#038;notbrick_jpg=back01.gif&#038;notsuperbug_jpg=13s.gif&#038;soundfile1=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FBattleshipsandcruisers%2Fsounds%2FWind-SoundBible.com-950807958.wav&#038;soundfile2=http%3A%2F%2Fwww.rjmprogramming.com.au%2FGames%2FBattleshipsandcruisers%2Fsounds%2FThunder-Mike_Koenig-315681025.wav&#038;showform=on'>Different run scenario Hearts versus King of Spades game with form<\/a><\/li>\n<\/ul>\n<hr>\n<p id='spvsgct'>Previous relevant <a target=_blank title='Star Proteins versus Superbugs Game CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/Star Proteins versus Superbugs Game CSS Tutorial\/'>Star Proteins versus Superbugs Game CSS 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\/Reveal\/star_proteins_vs_superbugs.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Star Proteins versus Superbugs Game OOP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/packing_it.jpg\" title=\"Star Proteins versus Superbugs Game CSS Tutorial\" \/><\/a><p class=\"wp-caption-text\">Star Proteins versus Superbugs Game CSS Tutorial<\/p><\/div>\n<p>The main themes of today&#8217;s changes to our current Javascript DOM &#8220;Star Proteins versus Superbugs Game&#8221; project today revolves around &#8230;<\/p>\n<ul>\n<li>Javascript DOM dynamic HTML element <a target=_blank title='HTML\/Javascript DOM className property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_classname.asp'><i>className<\/i><\/a> property changes linking in to the use of &#8230;<\/li>\n<li>CSS3 <a target=_blank title='CSS3 Linear Gradient information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_gradients.asp'>Linear Gradients<\/a> &#8230; both in terms of backgrounds and borders<\/li>\n<li>Class <a target=_blank title='Javascript class extends information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\/extends'>&#8220;extends&#8221;<\/a> and <a target=_blank title='Javascript class super information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/super'>&#8220;super&#8221;<\/a> usage<\/li>\n<\/ul>\n<p>The last of those relates to the fact that we could think of a &#8220;Starfire&#8221; object not to need to sit out there as an independent &#8220;Object&#8221; type, because it is really only existant the whole time a &#8220;Star&#8221; object exists.  So how would it be to make the &#8220;Star&#8221; class &#8220;constructor&#8221; <i>Object<\/i> be &#8230;<\/p>\n<ol>\n<li><b>based on<\/b> a &#8220;Starfire&#8221; <i>Object<\/i> &#8230; via &#8220;extends&#8221; &#8230; and &#8230;<\/li>\n<li><b>create<\/b> a &#8220;Starfire&#8221; <i>Object<\/i> &#8230; via &#8220;super&#8221; all within the &#8220;parent&#8221; &#8220;Star&#8221; class &#8220;constructor&#8221; &#8230; <b>as per<\/b> (where you can arrange it that the &#8220;Starfire&#8221; class only has the <i>constructor<\/i> (method), if you like) &#8230;<br \/>\n<code><br \/>\n<b>var starfire_methods=\" style_display(sd) {\"<br \/>\n   + \"  this.domo.style.display=sd;\"<br \/>\n   + \" }\";<br \/>\n<\/b><br \/>\nvar starone=null, brickone=null, superbugone=null, hone=null;<br \/>\n<b><\/b><br \/>\n\/\/ Arrays of objects (either DOM or DOM accompanied by Class) below<br \/>\nvar staro=[], bricko=[], superbugo=[];<br \/>\nvar starfireo=[]; \/\/ no longer needed if Class \"extends\" keyword ideas are applied, via ideas of https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\/extends<br \/>\n<b><\/b><br \/>\n\/\/ Class code below does not work everywhere<br \/>\nvar Star=null, Brick=null, Superbug=null;<br \/>\nvar Starfire=null;<br \/>\n<b><br \/>\ntry {<br \/>\n  starfire_methods=\"\";   \/\/ no longer needed if Class \"extends\" keyword ideas are applied, via ideas of https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\/extends<br \/>\n  eval(\" \"<br \/>\n   + \"Starfire = class Starfire {\"<br \/>\n   + \" constructor(id, domo) {\"<br \/>\n   + \"  this.id = id;\"<br \/>\n   + \"  this.domo = domo;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" display_via_style(onsb) {\"<br \/>\n   + \"  document.getElementById(this.id.replace('s','h')).style.display=onsb;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + starfire_methods<br \/>\n   + \"}; \"<br \/>\n   );<br \/>\n} catch(estarfire) {<br \/>\n}<br \/>\n<\/b><b><br \/>\ntry {<br \/>\n  eval(\" \"<br \/>\n   + \"Star = class Star extends Starfire {\"<br \/>\n   + \" constructor(id, domo) {\"<br \/>\n   + \"  super(id.replace('s','h'), document.getElementById(id.replace('s','h')));\"<br \/>\n   + \"  this.id = id;\"<br \/>\n   + \"  this.domo = domo;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" style_display(onsb) {\"<br \/>\n   + \"  document.getElementById(this.id.replace('s','h')).style.display=onsb;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" display_style(onsb) {\"<br \/>\n   + \"  super.display_via_style(onsb);\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" style_border(onsb) {\"<br \/>\n   + \"  this.domo.style.border=onsb;\"<br \/>\n   + \" }\"<br \/>\n   + \"}; \"<br \/>\n   );<br \/>\n} catch(estar) {<br \/>\n}<\/b><br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>We need to point out here, there are many ways to skin a cat here &#8230; <font size=1>but no cats were harmed in the making of this tutorial<\/font> &#8230; and these rearrangements are optional, as you would have got, if you&#8217;d run yesterday&#8217;s version of the code, and were on a web browser that understands &#8220;class&#8221; &#8230; <font size=1>but just make sure your web browser doesn&#8217;t get caught skulking off watching <a target=_blank title=\"Breakfast at Tiffany's on Netflix\" href='http:\/\/netflix-australia.com\/2016\/03\/27\/drama\/breakfast-at-tiffanys\/'>Breakfast at Tiffany&#8217;s<\/a> on Netflix, or anything<\/font>.  But, with OOP work, it feels better to arrange code, as you see the real world arrangements between the &#8220;noun&#8221; parts of your project, unless it gets too complex, that is.<\/p>\n<p>Here, as far as complexity of OOP arrangements go, you won&#8217;t have nearly as much to play around with as C++, as a language, for example, so maybe Javascript (DOM) is a good starting point if you gravitate towards this OOP way of thinking.<\/p>\n<p>Now, as far as that first point above goes, we like to use an HTML element&#8217;s <i>className<\/i> property, often, as our link to CSS thoughts, and more often than not we do that in a <i>static<\/i> kind of way, in that the HTML is written out <i>statically<\/i> with the HTML <i>className<\/i> there, in the HTML already, via &#8220;class='[ourClassName]'&#8221; type of HTML syntax, but with our game today, we are only making use of HTML <i>className<\/i> property equals &#8220;enemy&#8221; as this HTML element has been hit by a &#8220;Star&#8221; Object&#8217;s &#8220;Starfire&#8221; Sub-Object, and is effectively dying &#8230; but not before &#8230; pretty obviously.<\/p>\n<p>And so you have <i>statically<\/i> defined CSS <b>as per<\/b> (where we&#8217;d like to thank the linking websites) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\nhr {  \/* thanks to <a target=_blank title='http:\/\/www.w3schools.com\/css\/css3_gradients.asp' href='http:\/\/www.w3schools.com\/css\/css3_gradients.asp'>http:\/\/www.w3schools.com\/css\/css3_gradients.asp<\/a> *\/<br \/>\n    border: 7px dashed purple;<br \/>\n    background: red; \/* For browsers that do not support gradients *\/<br \/>\n    background: -webkit-linear-gradient(yellow, red); \/* For Safari 5.1 to 6.0 *\/<br \/>\n    background: -o-linear-gradient(yellow, red); \/* For Opera 11.1 to 12.0 *\/<br \/>\n    background: -moz-linear-gradient(yellow, red); \/* For Firefox 3.6 to 15 *\/<br \/>\n    background: linear-gradient(yellow, red); \/* Standard syntax *\/<br \/>\n}<br \/>\n<b>img.enemy {  \/* thanks to <a target=_blank title='https:\/\/css-tricks.com\/examples\/GradientBorder\/' href='https:\/\/css-tricks.com\/examples\/GradientBorder\/'>https:\/\/css-tricks.com\/examples\/GradientBorder\/<\/a> *\/<br \/>\n    border-width: 0px;<br \/>\n    border-style: solid;<br \/>\n    -webkit-border-image:<br \/>\n    -webkit-gradient(linear, 0 0, 0 100%, from(yellow), to(red)) 1 100%;<br \/>\n    -webkit-border-image: -webkit-linear-gradient(yellow, red) 1 100%;<br \/>\n    -moz-border-image: -moz-linear-gradient(yellow, red) 1 100%;<br \/>\n    -o-border-image: -o-linear-gradient(yellow, red) 1 100%;<br \/>\n    border-image: linear-gradient(to bottom, yellow, red) 1 100%;<br \/>\n }<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; ready to be called into play, but not before, by the Javascript DOM and Javascript <i>class<\/i> (Brick object and Superbug object) <b>code<\/b> &#8230;<\/p>\n<p><code><br \/>\ntry {<br \/>\n  eval(\" \"<br \/>\n   + \"Brick = class Brick {\"<br \/>\n   + \" constructor(id, domo) {\"<br \/>\n   + \"  this.id = id;\"<br \/>\n   + \"  this.domo = domo;\"<br \/>\n   + \"  this.opacity = 1.0;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" getid() {\"<br \/>\n   + \"  return this.id;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" getopacity() {\"<br \/>\n   + \"  return this.opacity;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" setopacity(thisop) {\"<br \/>\n   + \"  this.opacity=thisop;\"<br \/>\n   + \"  this.domo.style.opacity=thisop;\"<br \/>\n   + \"  <b>this.domo.className='enemy';<\/b>\"<br \/>\n   + \"  this.domo.style.borderWidth=eval(10 - eval(thisop * 10)) + 'px';\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" style_width(sw) {\"<br \/>\n   + \"  if (sw == '1px') { if (brickone) { bricko[eval(-1 + eval(brickone.getid().replace('b','')))].style_width('01px');  } brickone=this; setTimeout(fadeout,1000); } else { this.domo.style.border=''; this.domo.style.width=sw; }\"<br \/>\n   + \" }\"<br \/>\n   + \"}; \"<br \/>\n   );<br \/>\n} catch(ebrick) {<br \/>\n}<br \/>\n<b><\/b><br \/>\ntry {<br \/>\n  eval(\" \"<br \/>\n   + \"Superbug = class Superbug {\"<br \/>\n   + \" constructor(id, domo) {\"<br \/>\n   + \"  this.id = id;\"<br \/>\n   + \"  this.domo = domo;\"<br \/>\n   + \"  this.opacity = 1.0;\"<br \/>\n   + \"  this.count = 0;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" getid() {\"<br \/>\n   + \"  return this.id;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" getopacity() {\"<br \/>\n   + \"  return this.opacity;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" <i>tremble(firsttime) {\"<br \/>\n   + \"  if (firsttime) {\"<br \/>\n   + \"    setTimeout(quiver, 1000);\"<br \/>\n   + \"  } else if (this.count == 0) {\"<br \/>\n   + \"    this.count=1;\"<br \/>\n   + \"    this.domo.style.opacity=0.5;\"<br \/>\n   + \"    this.domo.style.width=eval(-15 + eval(this.domo.style.width.replace('px',''))) + 'px';\"<br \/>\n   + \"    this.domo.style.height=eval(-15 + eval(this.domo.style.height.replace('px',''))) + 'px';\"<br \/>\n   + \"  } else {\"<br \/>\n   + \"    this.count=0;\"<br \/>\n   + \"    this.domo.style.opacity=1.0;\"<br \/>\n   + \"    this.domo.style.width=eval(15 + eval(this.domo.style.width.replace('px',''))) + 'px';\"<br \/>\n   + \"    this.domo.style.height=eval(15 + eval(this.domo.style.height.replace('px',''))) + 'px';\"<br \/>\n   + \"  }\"<br \/>\n   + \" }<\/i>\"<br \/>\n   + \"\"<br \/>\n   + \" setopacity(thisop) {\"<br \/>\n   + \"  this.opacity=thisop;\"<br \/>\n   + \"  this.domo.style.opacity=thisop;\"<br \/>\n   + \"  <b>this.domo.className='enemy';<\/b>\"<br \/>\n   + \"  this.domo.style.borderWidth=eval(10 - eval(thisop * 10)) + 'px';\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" style_width(sw) {\"<br \/>\n   + \"  if (sw == '1px') { if (superbugone) { superbugo[eval(-1 + eval(superbugone.getid().replace('sb','')))].style_width('01px');  } superbugone=this; setTimeout(fadeout,1000); } else { this.domo.style.border='';  this.domo.style.width=sw; }\"<br \/>\n   + \" }\"<br \/>\n   + \"}; \"<br \/>\n   );<br \/>\n} catch(esuperbug) {<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and you&#8217;ll see in there <i>class<\/i> code for what we like to think of as the &#8220;Superbug&#8221; object &#8220;packing it&#8221; (when it is the next in line to be fired at by a &#8220;Star&#8221; object&#8217;s &#8220;Starfire&#8221; sub-object), with those <i>tremble(firsttime)<\/i> methods.  Note how they can reach the other non-class bits of Javascript DOM functionality controlled by <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> &#8230; a <i>function<\/i> (not a <i>method<\/i>) called <i>quiver<\/i>.<\/p>\n<p>We hope you continue to enjoy our HTML and Javascript and (slightly more involved) CSS <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html--GETME' title='star_proteins_vs_superbugs.htm'>star_proteins_vs_superbugs.htm<\/a>, changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html--GETME' title='star_proteins_vs_superbugs.htm'>this link<\/a>, and continue to enjoy its accompanying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm' title='Click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='spvsgot'>Previous relevant <a target=_blank title='Star Proteins versus Superbugs Game OOP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/Star Proteins versus Superbugs Game OOP Tutorial\/'>Star Proteins versus Superbugs Game OOP 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\/Reveal\/star_proteins_vs_superbugs.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Star Proteins versus Superbugs Game OOP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/spvs_more.jpg\" title=\"Star Proteins versus Superbugs Game OOP Tutorial\" \/><\/a><p class=\"wp-caption-text\">Star Proteins versus Superbugs Game OOP Tutorial<\/p><\/div>\n<p>If you look up <a target=_blank title='Google search for javascript class' href='https:\/\/www.google.com.au\/search?q=javascript+class&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;ei=N5jYV7jCNcXr8Aef3LuwCw'>&#8220;javascript class&#8221;<\/a> in Google &#8230; don&#8217;t know about you? &#8230; but we got from <a target=_blank title='Javascript class information' href='http:\/\/www.phpied.com\/3-ways-to-define-a-javascript-class\/'>this link<\/a> the quote below &#8230;<\/p>\n<blockquote cite='http:\/\/www.phpied.com\/3-ways-to-define-a-javascript-class\/'><p>\nFunctions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the &#8220;class&#8221;-ical languages.\n<\/p><\/blockquote>\n<p> &#8230; which may get you to ask &#8230; me &#8230; oops &#8230; why are you interested?  Well, Javascript DOM, to me, is just totally Class and Object in my mind, but soon forgotten for me, because the <i>document<\/i> object has become this great huge gallery of ideas, rather than a single useful &#8220;Object&#8221;, as such.  Actually, the quote above has got the same line of thinking, we think, and backed up our interest in a pursuit of <a target=_blank title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>Object Oriented Programming<\/a> approaches to our recent game we started with <a title='Star Proteins versus Superbugs Game Primer Tutorial' href='#spvsgpt'>Star Proteins versus Superbugs Game Primer Tutorial<\/a> as shown below.<\/p>\n<p>Why OOP temptations here?  Our test, of the mind, for this, is that when you describe a problem you use lots of &#8220;nouns&#8221; rather than &#8220;verbs&#8221; (ie. &#8220;object&#8221; words rather than &#8220;action&#8221; words).  This doesn&#8217;t happen, so clearly, so often, though with games it is more likely to happen than with other early days program planning thoughts.<\/p>\n<p>To us, with our game, there are 4 Object types, or in programming terms &#8220;classes&#8221; (or blueprints, if you like), those being &#8230;<\/p>\n<ol>\n<li>Star<\/li>\n<li>Brick<\/li>\n<li>Superbug<\/li>\n<li>Starfire<\/li>\n<\/ol>\n<p> &#8230; to which you might ask &#8230; why not plural nouns?  Well, generally, we think with our game we are more interested in one object rather than a group of them, at least for a first pass of OOP thinking here.<\/p>\n<p>Now we think about the &#8220;class&#8221; &#8220;constructor&#8221; (the link, in code, between &#8220;class&#8221; blueprint and &#8220;object&#8221; <a target=_blank title='Instantiation information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Instance_(computer_science)'>instantiation<\/a>) planning, augmenting our thoughts from this <a target=_blank title='Great link' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/class'>great link<\/a>, and this <b>leads us to<\/b> &#8230;<\/p>\n<p><code><br \/>\n   var <b>Star = class Star {<br \/>\n    constructor(id, domo) {<br \/>\n     this.id = id;<br \/>\n     this.domo = domo;<br \/>\n    }<\/b><br \/>\n<b><\/b><br \/>\n    style_border(onsb) {<br \/>\n     this.domo.style.border=onsb;<br \/>\n    }<br \/>\n   };<br \/>\n<\/code><\/p>\n<p> &#8230; so that the links here, back to Javascript DOM, via <i>instantiation<\/i> (Javascript) code, suiting the <i>instantiation<\/i> of Star &#8220;i&#8221;, and referring to the code further below, also, for context, is &#8230;<\/p>\n<p><code><br \/>\n     staro.push(<b>new<\/b> Star('s' + i, document.getElementById('s' + i)));<br \/>\n<\/code><\/p>\n<p> &#8230;  are that a &#8220;Star&#8221; class object&#8217;s data members &#8220;id&#8221; and &#8220;domo&#8221; respectively point at the HTML element&#8217;s &#8220;id&#8221; property and the HTML <i>document.getElementById([id])<\/i> element itself, respectively.<\/p>\n<p>So, given this type of setup, we can create class methods to manipulate the Javascript DOM properties of an array of Star objects.<\/p>\n<p>This doesn&#8217;t work on the Safari browser, for instance, and you might want to read more at <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/5113374\/javascript-check-if-variable-exists-is-defined-initialized'>this link<\/a> to help you think about ideas for trapping this situation on web browsers that don&#8217;t allow &#8220;class&#8221;, but honestly don&#8217;t think we read exactly what we ended up with (maybe because our case involves an undefined <i>keyword<\/i>?) &#8230; which was to encase the class definition attempt into a Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> call, and encase that in a Javascript <a target=_blank title='Javascript try\/catch information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_errors.asp'>try\/catch<\/a> clause to have <i>Star<\/i> be <i>null<\/i> if all this doesn&#8217;t work, as for the Star class we do &#8230;<\/p>\n<p><code><br \/>\n\/\/ Arrays of objects (either DOM or DOM accompanied by Class) below<br \/>\nvar staro=[], bricko=[], superbugo=[];<br \/>\nvar starfireo=[];<br \/>\n<b><\/b><br \/>\n\/\/ Class code below does not work everywhere<br \/>\nvar Star=null, Brick=null, Superbug=null;<br \/>\nvar Starfire=null;<br \/>\n<b><\/b><br \/>\ntry {<br \/>\n  eval(\" \"<br \/>\n   + \"Star = class Star {\"<br \/>\n   + \" constructor(id, domo) {\"<br \/>\n   + \"  this.id = id;\"<br \/>\n   + \"  this.domo = domo;\"<br \/>\n   + \" }\"<br \/>\n   + \"\"<br \/>\n   + \" style_border(onsb) {\"<br \/>\n   + \"  this.domo.style.border=onsb;\"<br \/>\n   + \" }\"<br \/>\n   + \"}; \"<br \/>\n   );<br \/>\n} catch(estar) {<br \/>\n}<br \/>\n<\/code><\/p>\n<p>And we offer, for the web browsers allowing class definitions, some &#8230;<\/p>\n<ul>\n<li>sound effects, involving HTML5 <a target=_blank title='Audio object' href='http:\/\/www.w3schools.com\/tags\/ref_av_dom.asp'>Audio<\/a> objects and some wind and thunder sounds we used when we presented <a target=_blank title='Game'  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/try-our-new-online-game-battle-ships-and-cruisers\/'>Battleships and Cruisers Game Tutorial<\/a>.<\/li>\n<li>some brick and superbug dying fade effects<\/li>\n<li>some brick and superbug dying red border effects<\/li>\n<\/ul>\n<p> &#8230; to show you some class method nuances, that you can hang your &#8220;hat&#8221; on today &#8230; sorry, no &#8220;hat&#8221; objects were harmed, nor used in today&#8217;s tutorial.<\/p>\n<p>We hope you enjoy our HTML and Javascript and (slightly more involved) CSS <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html-GETME' title='star_proteins_vs_superbugs.htm'>star_proteins_vs_superbugs.htm<\/a>, changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html-GETME' title='star_proteins_vs_superbugs.htm'>this link<\/a>, and enjoy its accompanying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.htm' title='Click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='spvsgpt'>Previous relevant <a target=_blank title='Star Proteins versus Superbugs Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/star-proteins-versus-superbugs-game-primer-tutorial\/'>Star Proteins versus Superbugs 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\/Reveal\/star_proteins_vs_superbugs.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Star Proteins versus Superbugs Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/spvs.jpg\" title=\"Star Proteins versus Superbugs Game Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Star Proteins versus Superbugs Game Primer Tutorial<\/p><\/div>\n<p>Never got into the Space Invaders video game as a kid, but somehow got all aggressive towards &#8220;Superbugs&#8221; after reading the inspiring story of <a target=_blank title='Brilliance of Shu Lam' href='http:\/\/www.smh.com.au\/technology\/sci-tech\/beyond-antibiotics-starshaped-protein-kills-feared-superbugs-20160912-grehpx.html'>Shu Lam&#8217;s revolutionary work<\/a> with Star shaped proteins breaking down the Walls of protection that Superbugs develop if we are unlucky enough to catch them.  Then thought back, as any graphically challenged programmer does to the first thoughts about feasibility &#8230; is there anything already done to ease the pain of imagery required for our proposed game?  And then remembered back to the &#8230;<\/p>\n<ul>\n<li>stars of <a title='HTML\/Javascript Reveal Image In Front of Image Tutorial' href='#hjrifoit'>HTML\/Javascript Reveal Image In Front of Image Tutorial<\/a> as shown below &#8230; and then thought &#8220;how hard can it be to divvy up<\/li>\n<li>bricks &#8230; because they can just gather as HTML img elements (all of the one brick image, repeated) higgledy piggledy (with bits of &amp;nbsp; to offset the mortar, as any bricklayer worth his salt will tell you &#8230; unless he wants a laugh at the end of you laying?!)&#8221; in an HTML td &#8220;cell&#8221; element in the middle, to the right of our &#8220;stars&#8221; and to the left of our<\/li>\n<li>superbugs &#8230; ah, bit of a slowdown here &#8230; but looking up Google Image &#8220;type=Clipart&#8221; search for &#8220;bug&#8221; led us to this <a target=_blank title='Clipart website' href='http:\/\/www.clipartkid.com'>very helpful website<\/a> &#8230; thanks &#8230; and the old &#8220;S&#8221; like for Superman &#8230; doh?! &#8230; got us the media for the job\/game<\/li>\n<\/ul>\n<p>The &#8220;shoot &#8217;em up&#8221; aspects are, as you&#8217;d expect from a properly spent youth not playing Space Invaders, lame &#8230; oh so lame &#8230; just an HTML <a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>hr<\/a> (horizontal rule) element so far.  It&#8217;s early days.  Though wouldn&#8217;t count on too much here, and it is better to get the atmospherics by devoting your time to a gaming platform like Cocos  <a target=_blank le='Cocos blog post' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/cocos-open-source-game-development-primer-tutorial\/'>here<\/a>.  Another thing to note here is that we mainly function with Javascript DOM techniques in this game, and the technique to make bricks and superbugs disappear is that <a target=_blank title='Reveal themed blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> (or not to reveal &#8230; that is the question) method to make the element&#8217;s style.width property be 1px.<\/p>\n<p>Now pinball, that&#8217;s another matter &#8230; but we digress.  So hope you enjoy the lameness of our HTML and Javascript and (so little, so far) CSS <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html_GETME' title='star_proteins_vs_superbugs.html'>star_proteins_vs_superbugs.html<\/a> and enjoy its accompanying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/star_proteins_vs_superbugs.html' title='Click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='hjrifoit'>Previous relevant <a target=_blank title='HTML\/Javascript Reveal Image In Front of Image Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-reveal-image-in-front-of-image-tutorial\/'>HTML\/Javascript Reveal Image In Front of Image 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\/Reveal\/reveal_imageinfront.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Reveal Image In Front of Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/infrontof.jpg\" title=\"HTML\/Javascript Reveal Image In Front of Image Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Reveal Image In Front of Image Tutorial<\/p><\/div>\n<p>Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;, today we reveal an image in front of another, and triggered when the user clicks a link, following on from the previous <a target=_blank href='#hjribipt' title='HTML\/Javascript\/CSS Reveal Image Behind Image Primer Tutorial'>HTML\/Javascript\/CSS Reveal Image Behind Primer Tutorial<\/a> as shown below.<\/p>\n<p>With today&#8217;s tutorial you could argue that it also belongs with the series of blog posts related to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=overlay\" title='overlay'><i>&#8220;overlay&#8221;<\/i><\/a>.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; that image in front of an image of the night sky using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>Encasing working visible HTML elements within <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element for ease of:\n<ol>\n<li>positioning<\/li>\n<li>scrolling, or not<\/li>\n<li>visibility control<\/li>\n<\/ol>\n<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML, particularly with respect to visibility, and size and positioning<\/li>\n<p><!--li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a \"background\" <i>a<\/i> tag (but this is not popular with the search engines)<\/li-->\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_imageinfront.html' title='Click picture'>Images &#8220;revealed&#8221; in front of others<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_imageinfront.html_GETME' title='reveal_imageinfront.html'>reveal_imageinfront.html<\/a> for the theme of an image in front of the night sky.<\/p>\n<hr \/>\n<p id='hjribipt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9447' title='HTML\/Javascript Reveal Image Behind Image Primer Tutorial'>HTML\/Javascript Reveal Image Behind Image 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\/Reveal\/reveal_keyhole.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript Reveal Image Behind Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/sur_keyhole_prise.jpg\" title=\"HTML\/Javascript Reveal Image Behind Image Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/p><\/div>\n<p>Continuing on with our discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;, today we reveal an image behind another,  increasing its size over time, and all triggered when the user clicks a link, following on from the previous <a target=_blank href='#hjcript' title='HTML\/Javascript\/CSS Reveal Information Primer Tutorial'>HTML\/Javascript\/CSS Reveal Information Primer Tutorial<\/a> as shown below.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; that image behind a keyhole image using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>Encasing working visible HTML elements within <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element for ease of:\n<ol>\n<li>positioning<\/li>\n<li>scrolling, or not<\/li>\n<li>visibility control<\/li>\n<\/ol>\n<\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<li>Simple masking image <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/keyhole.png' title='Transparent keyhole with black background'>keyhole.png<\/a> which would only require an image editor to the sophistication of <a target=_blank title='Paintbrush image editor' href=\"http:\/\/paintbrush.sourceforge.net\/\">PaintBrush<\/a> to create<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML, particularly with respect to visibility, and size and positioning<\/li>\n<p><!--li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a \"background\" <i>a<\/i> tag (but this is not popular with the search engines)<\/li-->\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_keyhole.html' title='Click picture'>Images &#8220;revealed&#8221; behind others<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_keyhole.html_GETME' title='reveal_keyhole.html'>reveal_keyhole.html<\/a> for the theme of an image behind a keyhole &#8230; huh?!   If you try this game you may discover its inspiration.<\/p>\n<p>Content-wise, how could there be thanks enough to the &#8220;masters&#8221;, but have you ever read <a target=_blank title='Giorgio Vasari' href='http:\/\/en.wikipedia.org\/wiki\/Giorgio_Vasari'>Giorgio Vasari<\/a>&#8216;s book <i>Lives of the Most Excellent Painters, Sculptors, and Architects<\/i> ? &#8230; and we&#8217;ll include some links (or inactive link prefixes) below &#8230; thank you, terima kasih, gracias, merci, \u8c22\u8c22, danke, \u0441\u043f\u0430\u0441\u0438\u0431\u043e, \u0927\u0928\u094d\u092f\u0935\u093e\u0926, grazie, \u0e02\u0e2d\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13, c\u1ea3m \u01a1n b\u1ea1n, \u0622\u067e \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1, \u3042\u308a\u304c\u3068\u3046, te\u015fekk\u00fcr ederim, dankon, obrigado, dankie,\u0634\u0643\u0631\u0627, \u03c3\u03b1\u03c2 \u03b5\u03c5\u03c7\u03b1\u03c1\u03b9\u03c3\u03c4\u03ce, \uac10\uc0ac\ud569\ub2c8\ub2e4, asante:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/workbench.cadenhead.org\/news\/3500\/link-specific-time-youtube' title='How to Link to a Specific Time in YouTube Videos'>How to Link to a Specific Time in YouTube Videos<\/a><\/li>\n<li><a target=_blank title='How to replace 1 with first, 2 with second,3 with third etc [duplicate]' href='http:\/\/stackoverflow.com\/questions\/20425771\/how-to-replace-1-with-first-2-with-second-3-with-third-etc'>How to replace 1 with first, 2 with second,3 with third etc [duplicate]<\/a><\/li>\n<li>\n<p>https:\/\/encrypted-tbn1.gstatic.com\/<\/p>\n<\/li>\n<li>\n<p>https:\/\/encrypted-tbn2.gstatic.com\/<\/p>\n<\/li>\n<li>\n<p>https:\/\/encrypted-tbn3.gstatic.com\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html' href='http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html'>http:\/\/legomenon.com\/meaning-of-the-scream-1893-painting-by-edvard-munch.html<\/a><\/li>\n<li>\n<p>http:\/\/2.bp.blogspot.com\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717' href='http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717'>http:\/\/www.bbc.co.uk\/news\/uk-england-leeds-13887717<\/a><\/li>\n<li>\n<p>http:\/\/news.bbcimg.co.uk\/<\/p>\n<\/li>\n<li><a target=_blank title='http:\/\/www.theepochtimes.com\/' href='http:\/\/www.theepochtimes.com\/'>http:\/\/www.theepochtimes.com\/<\/a><\/li>\n<li><a target=_blank title='http:\/\/thegreatdali.weebly.com\/masterpiece.html' href='http:\/\/thegreatdali.weebly.com\/masterpiece.html'>http:\/\/thegreatdali.weebly.com\/masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction' href='http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction'>http:\/\/www.theguardian.com\/artanddesign\/2011\/jun\/22\/picasso-sold-auction<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html' href='http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html'>http:\/\/www.wellcorps.com\/Explaining-The-Hidden-Meaning-Of-Michelangelos-Creation-of-Adam.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html' href='http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html'>http:\/\/topartnews.blogspot.com.au\/2009\/10\/defining-masterpiece-at-minneapolis.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html' href='http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html'>http:\/\/www.telegraph.co.uk\/news\/worldnews\/europe\/italy\/6377214\/Italian-palace-fresco-may-hide-Leonardo-da-Vinci-masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html' href='http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html'>http:\/\/www.dailymail.co.uk\/news\/article-2413253\/Van-Goghs-sunflowers-He-painted-seven-versions-glorious-masterpiece.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html' href='http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html'>http:\/\/www.essentialvermeer.com\/catalogue\/girl_with_a_pearl_earring.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html' href='http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html'>http:\/\/artinvestment.ru\/en\/news\/artnews\/20100111_veronese_to_venice.html<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.fodors.com\/' href='http:\/\/www.fodors.com\/'>http:\/\/www.fodors.com\/<\/a><\/li>\n<li><a target=_blank title='http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece' href='http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece'>http:\/\/www.thelocal.it\/20140324\/spaniard-strips-naked-in-front-of-botticelli-masterpiece<\/a><\/li>\n<\/ul>\n<p>Hope you have a go at today&#8217;s &#8220;reveal&#8221; game.<\/p>\n<hr \/>\n<p id='hjcript'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9428' title='HTML\/Javascript\/CSS Reveal Information Primer Tutorial'>HTML\/Javascript\/CSS Reveal Information 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\/Reveal\/revealing.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/currys_paradox.jpg\" title=\"HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal Information Primer Tutorial ... thanks to Training Industry ( http:\/\/www.trainingindustry.com\/ ) for the image, within an image<\/p><\/div>\n<p>Welcome to the continuing discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;.  We&#8217;ll be doing several postings on this theme, and today we continue these ideas with the revealing of information in the (simple) form of a hidden <i>div<\/i> element only revealed when the user clicks a link, following on from the previous <a target=_blank href='#hjcrttbpt' title='HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial'>HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/a> as shown below.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; wording, or information regarding a puzzle using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>Encasing working visible HTML elements within <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element for ease of:\n<ol>\n<li>positioning<\/li>\n<li>scrolling, or not<\/li>\n<li>visibility control<\/li>\n<\/ol>\n<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML, particularly with respect to visibility<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp' title='Javascript prompt window information from w3schools ... thanks'>prompt<\/a> windows to receive, analyze and act on user interaction<\/li>\n<li>HTML\/CSS body element that it is Clickable via a <i>div<\/i> supervising a &#8220;background&#8221; <i>a<\/i> tag (but this is not popular with the search engines)<\/li>\n<\/ul>\n<p>So here is a tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html' title='Click picture'>Curry&#8217;s Paradox<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html_GETME' title='revealing.html'>revealing.html<\/a> which called on the content of this <a href='#' onclick=' var huh=prompt(\"Hit OK to find out a lot at Wikipedia.  Am asking because you may not want to reveal this yet, and if not hit Cancel or wipe out URL and hit OK.\", \"http:\/\/en.wikipedia.org\/wiki\/Curry%27s_paradox\");  if (huh.indexOf(\"http\") != -1) { window.open(huh,\"_blank\"); } '>tutorial<\/a>.   Today there will be no links below regarding getting to other links regarding Curry&#8217;s Paradox (ie. the content), but this is available via the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/revealing.html\" title='Click picture'>live run<\/a> link (as above, also) (except that to say the inspiration came from an answer on the BBC quiz show <a target=_blank title=\"BBC's QI\" href='http:\/\/www.bbcnordic.com\/qi\/'>QI<\/a>) &#8230; don&#8217;t want to give away any surprises before they surprise!<\/p>\n<hr \/>\n<p id='hjcrttbpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389' title='HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial'>HTML\/Javascript\/CSS Reveal Top to Bottom 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\/Reveal\/reveal_fromtoptobottom.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/surprise.jpg\" title=\"HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/p><\/div>\n<p>Welcome to a new discussion regarding HTML, Javascript and CSS on the theme of &#8220;reveal&#8221;.  We&#8217;ll be doing several postings on this theme, and today we have the first.<\/p>\n<p>Do you often wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?   <\/p>\n<p align='center'>No?<\/p>\n<p>Do you sometimes wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise?  <\/p>\n<p align='center'>Still no, huh?  (<i>Aside:<\/i> two can play this <font size=1>little<\/font> game)<\/p>\n<p>Do you occasionally wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise &#8230; OR &#8230; <br \/>will allow those who have <i>never<\/i> had this thought in their life on Earth?  <\/p>\n<p align='center'>No again, huh?  (<i>Aside:<\/i> two planets can play this puerile <font size=1>little<\/font> game!)<\/p>\n<p>Do you ever wish to make webpages that hide things until the user interacts with the webpage or some time period has expired, so that there is some sort of element of surprise &#8230; OR &#8230; <br \/>will allow those who have <i>never<\/i> had this thought in their life on Earth, nor Mars?  <\/p>\n<p align='center'>Non? Nicht?  Good nicht! (chortle, chortle)<\/p>\n<p align='center'>Well, that&#8217;s fixed their <font size=1>little<\/font> <span style='color:red;'>red<\/span> wagon.<\/p>\n<p>Here is a tutorial that &#8220;reveals&#8221; a surprise from top to bottom using HTML, Javascript and CSS, featuring:<\/p>\n<ul>\n<li>CSS <a target=_blank title=\"CSS overflow:hidden idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp\">overflow: hidden;<\/a> style property<\/li>\n<li>Encasing working visible HTML elements within <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> element for ease of:\n<ol>\n<li>positioning<\/li>\n<li>scrolling, or not<\/li>\n<li>visibility control<\/li>\n<\/ol>\n<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp' title='setInterval'>setInterval<\/a> and <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_clearinterval.asp' title='clearInterval'>clearInterval<\/a> timer functionality<\/li>\n<li>Javascript <a target=_blank href='http:\/\/www.w3schools.com\/js\/js_htmldom.asp' title='Javascript DOM'>DOM<\/a> methods to dynamically change HTML (over time)<\/li>\n<li>HTML\/CSS body element <a target=_blank title='Background information at w3schools ... thanks' href='http:\/\/www.w3schools.com\/css\/css_background.asp'>background<\/a> URL (with fallback background colour) and the Javascript control of its <a target=_blank title='Body backgroundImage URL nullified advice from w3schools ... thanks' href='http:\/\/www.w3schools.com\/jsref\/prop_style_backgroundimage.asp'>fallback<\/a> to just the background colour<\/li>\n<\/ul>\n<p>So here is today&#8217;s tutorial&#8217;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_fromtoptobottom.html' title='Click picture'>live run<\/a>, and here is the HTML programming source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Reveal\/reveal_fromtoptobottom.html_GETME' title='reveal_fromtoptobottom.html'>reveal_fromtoptobottom.html<\/a> which called on the content of this <a href='#' onclick=' var huh=prompt(\"Hit OK to open new webpage showing this tutorial.  Am asking because you may not want to reveal this yet (it would give away the secret to the surprise, perhaps?), and if not hit Cancel or wipe out URL and hit OK.\", \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389\");  if (huh.indexOf(\"http\") != -1) { window.open(huh,\"_blank\"); } '>tutorial<\/a>.<\/p>\n<p>Chow for now, <font size=1>brown cow (she&#8217;s always on(line), you know &#8230; <b><i>but is anything sinking in?!<\/i><\/b> &#8230; I haven&#8217;t been able to moo respectfully in public after 63.5 lessons?! &#8230; she still owes me that half lesson when she didn&#8217;t get up in time for milking)<\/font>.<\/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='#d9389' onclick='var dv=document.getElementById(\"d9389\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9389' 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='#d9428' onclick='var dv=document.getElementById(\"d9428\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=HTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9428' 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='#d9447' onclick='var dv=document.getElementById(\"d9447\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9447' 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='#d9483' onclick='var dv=document.getElementById(\"d9483\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9483' 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='#d24927' onclick='var dv=document.getElementById(\"d24927\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24927' 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='#d24949' onclick='var dv=document.getElementById(\"d24949\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=oop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24949' 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='#d24991' onclick='var dv=document.getElementById(\"d24991\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24991' 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='#d25022' onclick='var dv=document.getElementById(\"d25022\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/ITBlog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25022' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We think, with our &#8220;Star Proteins versus Superbugs Game&#8221; project, that we may have a project worth &#8220;genericizing&#8221;. In other words, we make it tailorable to other scenarios of usage, for the one HTML and Javascript and CSS bit of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/star-proteins-versus-superbugs-game-genericization-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":[210,2008,281,282,354,399,476,477,1839,576,590,2012,652,2011,849,2010,875,997,1126,2009,1238,1319,1865],"class_list":["post-25022","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-class","tag-clipart","tag-css","tag-css3","tag-dom","tag-eval","tag-game","tag-games-2","tag-genericization","tag-html","tag-image","tag-instantiation","tag-javascript","tag-noun","tag-object","tag-object-oriented-programming","tag-oop","tag-programming","tag-settimeout","tag-space-invaders","tag-table","tag-tutorial","tag-verb"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25022"}],"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=25022"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25022\/revisions"}],"predecessor-version":[{"id":25880,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25022\/revisions\/25880"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}