<!doctype html>
<html>
<head>
<title>Star Proteins Versus Superbugs Game - RJM Programming - September, 2016 - Inspired by http://www.smh.com.au/technology/sci-tech/beyond-antibiotics-starshaped-protein-kills-feared-superbugs-20160912-grehpx.html</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>
hr { /* thanks to http://www.w3schools.com/css/css3_gradients.asp */
border: 7px dashed purple;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(yellow, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(yellow, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(yellow, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(yellow, red); /* Standard syntax */
}
img.enemy { /* thanks to https://css-tricks.com/examples/GradientBorder/ */
border-width: 0px;
border-style: solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(yellow), to(red)) 1 100%;
-webkit-border-image: -webkit-linear-gradient(yellow, red) 1 100%;
-moz-border-image: -moz-linear-gradient(yellow, red) 1 100%;
-o-border-image: -o-linear-gradient(yellow, red) 1 100%;
border-image: linear-gradient(to bottom, yellow, red) 1 100%;
}
</style>
<script type='text/javascript'>
'use strict';

var numBricks=location.search.split('numbricks=')[1] ? eval(location.search.split('numbricks=')[1].split('&')[0]) : 40;
var numStars=7;
var numSuperbugs=7;
var thisone=-1;
var nextBrickToGo=1;
var seconds=0;
var pubu='';
var starfire_methods=" style_display(sd) {"
+ " this.domo.style.display=sd;"
+ " }";


var starone=null, brickone=null, superbugone=null, hone=null;

// Arrays of objects (either DOM or DOM accompanied by Class) below
var staro=[], bricko=[], superbugo=[];
var 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


// Class code below does not work everywhere
var Star=null, Brick=null, Superbug=null;
var Starfire=null;

try {
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
eval(" "
+ "Starfire = class Starfire {"
+ " constructor(id, domo) {"
+ " this.id = id;"
+ " this.domo = domo;"
+ " }"
+ ""
+ " display_via_style(onsb) {"
+ " document.getElementById(this.id.replace('s','h')).style.display=onsb;"
+ " }"
+ ""
+ starfire_methods
+ "}; "
);
} catch(estarfire) {
}

try {
eval(" "
+ "Star = class Star extends Starfire {"
+ " constructor(id, domo) {"
+ " super(id.replace('s','h'), document.getElementById(id.replace('s','h')));"
+ " this.id = id;"
+ " this.domo = domo;"
+ " }"
+ ""
+ " style_display(onsb) {"
+ " document.getElementById(this.id.replace('s','h')).style.display=onsb;"
+ " }"
+ ""
+ " display_style(onsb) {"
+ " super.display_via_style(onsb);"
+ " }"
+ ""
+ " style_border(onsb) {"
+ " this.domo.style.border=onsb;"
+ " }"
+ "}; "
);
} catch(estar) {
}

try {
eval(" "
+ "Brick = class Brick {"
+ " constructor(id, domo) {"
+ " this.id = id;"
+ " this.domo = domo;"
+ " this.opacity = 1.0;"
+ " }"
+ ""
+ " getid() {"
+ " return this.id;"
+ " }"
+ ""
+ " getopacity() {"
+ " return this.opacity;"
+ " }"
+ ""
+ " setopacity(thisop) {"
+ " this.opacity=thisop;"
+ " this.domo.style.opacity=thisop;"
+ " this.domo.className='enemy';"
+ " this.domo.style.borderWidth=eval(10 - eval(thisop * 10)) + 'px';"
+ " }"
+ ""
+ " style_width(sw) {"
+ " 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; }"
+ " }"
+ "}; "
);
} catch(ebrick) {
}

try {
eval(" "
+ "Superbug = class Superbug {"
+ " constructor(id, domo) {"
+ " this.id = id;"
+ " this.domo = domo;"
+ " this.opacity = 1.0;"
+ " this.count = 0;"
+ " }"
+ ""
+ " getid() {"
+ " return this.id;"
+ " }"
+ ""
+ " getopacity() {"
+ " return this.opacity;"
+ " }"
+ ""
+ " tremble(firsttime) {"
+ " if (firsttime) {"
+ " setTimeout(quiver, 1000);"
+ " } else if (this.count == 0) {"
+ " this.count=1;"
+ " this.domo.style.opacity=0.5;"
+ " this.domo.style.width=eval(-15 + eval(this.domo.style.width.replace('px',''))) + 'px';"
+ " this.domo.style.height=eval(-15 + eval(this.domo.style.height.replace('px',''))) + 'px';"
+ " } else {"
+ " this.count=0;"
+ " this.domo.style.opacity=1.0;"
+ " this.domo.style.width=eval(15 + eval(this.domo.style.width.replace('px',''))) + 'px';"
+ " this.domo.style.height=eval(15 + eval(this.domo.style.height.replace('px',''))) + 'px';"
+ " }"
+ " }"
+ ""
+ " setopacity(thisop) {"
+ " this.opacity=thisop;"
+ " this.domo.style.opacity=thisop;"
+ " this.domo.className='enemy';"
+ " this.domo.style.borderWidth=eval(10 - eval(thisop * 10)) + 'px';"
+ " }"
+ ""
+ " style_width(sw) {"
+ " 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; }"
+ " }"
+ "}; "
);
} catch(esuperbug) {
}

function quiver() {
superbugo[eval(-1 + nextBrickToGo - numBricks)].tremble(false);
setTimeout(quiver, 100);
}

function createStars(numtodo) {
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
//if ((isiPad || isiPhone) && document.URL.indexOf('.html') == -1 && document.URL.indexOf('.htm') != -1) location.href=document.URL.replace('.htm','.html');
var i, sih='';
var starlist=["onestar.jpg","twostar.jpg","threestar.jpg","fourstar.jpg","fivestar.jpg","sixstar.jpg","sevenstar.jpg"];
if (numtodo == 0) {
numStars=numtodo;
document.getElementById('stars').innerHTML='';
} else if (numtodo > 0) {
numStars=numtodo;
document.getElementById('stars').innerHTML='';
}
if (Brick) document.getElementById('myh4').innerHTML+=' ... Please note that Sound Effects could occur with this game.';
for (i=1; i<=numStars; i++) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
sih+="<img style='margin-top:-70px; display:inline; -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); ' id='s" + i + "' src='" + starlist[eval(-1 + i)] + "' ontouchstart='doesBrickGo(" + eval(-1 + i) + ");' onclick='doesBrickGo(" + eval(-1 + i) + ");' title='Another Protein Star " + i + " against the wall'></img><hr id='h" + i + "' style='color:red;background-color:red;height:20px;margin-top:-40px;display:none;'>";
} else {
sih+="<img id='s" + i + "' src='" + starlist[eval(-1 + i)] + "' ontouchstart='doesBrickGo(" + eval(-1 + i) + ");' onclick='doesBrickGo(" + eval(-1 + i) + ");' title='Another Protein Star " + i + " against the wall'></img><hr id='h" + i + "' style='color:red;background-color:red;height:20px;margin-top:-40px;display:none;'>";
if (Math.floor(Math.random() * 2) == 0) sih+='<br><br>';
}
}
document.getElementById('stars').innerHTML=sih;
for (i=1; i<=numStars; i++) {
if (!Star) { // no "class" keyword exists
staro.push(document.getElementById('s' + i));
} else if ('pre_extends_idea' != 'pre_extends_idea') { // old approach of an independent Starfire object
starfireo.push(new Starfire('h' + i, document.getElementById('h' + i)));
staro.push(new Star('s' + i, document.getElementById('s' + i), starfireo[eval(-1 + starfireo.length)]));
} else { // new approach of a Starfire object as part of a Star object, using Class "extends" keyword ideas via https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends
staro.push(new Star('s' + i, document.getElementById('s' + i))); //, document.getElementById('h' + i)));
}
}
}

function createBricks(numtodo) {
var i, bih='';
if (numtodo == 0) {
numBricks=numtodo;
document.getElementById('bricks').innerHTML='';
} else if (numtodo > 0) {
numBricks=numtodo;
document.getElementById('bricks').innerHTML='';
}
for (i=1; i<=numBricks; i++) {
bih+="<img id='b" + i + "' src='brick.jpg' title='Another brick " + i + " in the wall'></img>";
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (eval(i % 3) == 0) bih+="   ";
} else {
if (eval(i % 2) == 0) bih+="   ";
}
}
document.getElementById('bricks').innerHTML=bih;
for (i=1; i<=numBricks; i++) {
if (Brick) {
bricko.push(new Brick('b' + i, document.getElementById('b' + i)));
}
}
}

function createSuperbugs(numtodo) {
var i, sih='', suffix='';
if (numtodo == 0) {
numSuperbugs=numtodo;
document.getElementById('superbugs').innerHTML='';
} else if (numtodo > 0) {
numSuperbugs=numtodo;
document.getElementById('superbugs').innerHTML='';
}
for (i=1; i<=numSuperbugs; i++) {
sih+="<img style='display:inline;' id='sb" + i + "' src='superbug.jpg' title='Another Superbug " + i + " protected by the wall'></img>" + suffix;
if (suffix == '') {
suffix='<br>';
} else {
suffix='';
}
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('superbugs').style.width='35%';
document.getElementById('bricks').style.width='45%'; //'50%';
document.getElementById('superbugs').innerHTML=sih;
} else if (0 == 0) {
document.getElementById('superbugs').style.width='35%';
document.getElementById('bricks').style.width='35%';
document.getElementById('superbugs').innerHTML=sih;
} else {
document.getElementById('superbugs').innerHTML='<table><tr>' + sih.replace(/<br>/g,'').replace(/\/img>/g, '/img></td>').replace(/<img/g, '<td><img') + '</tr></table>';
}
for (i=1; i<=numSuperbugs; i++) {
if (Superbug) {
superbugo.push(new Superbug('sb' + i, document.getElementById('sb' + i)));
}
}
}

function fadeout() { // can only happen if Class functionality works on this web browser
var opis=1.0, newopis;
if (brickone) {
opis=bricko[eval(-1 + eval(brickone.getid().replace('b','')))].getopacity();
newopis=eval(-0.1 + opis);
bricko[eval(-1 + eval(brickone.getid().replace('b','')))].setopacity(newopis);
if (eval(newopis) <= 0.0) {
bricko[eval(-1 + eval(brickone.getid().replace('b','')))].style_width('01px');
brickone=null;
} else {
var snd=new Audio('http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/sounds/Wind-SoundBible.com-950807958.wav');
snd.play();
}
}
if (superbugone) {
opis=superbugo[eval(-1 + eval(superbugone.getid().replace('sb','')))].getopacity();
newopis=eval(-0.1 + opis);
superbugo[eval(-1 + eval(superbugone.getid().replace('sb','')))].setopacity(newopis);
if (eval(newopis) <= 0.0) {
superbugo[eval(-1 + eval(superbugone.getid().replace('sb','')))].style_width('01px');
superbugone=null;
} else {
var snd=new Audio('http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/sounds/Thunder-Mike_Koenig-315681025.wav');
snd.play();
}
}
if (brickone || superbugone) setTimeout(fadeout, 1000);
}

function andu() {
location.href=pubu;
}

function ask(nb) {
var xnb=prompt(nb,numBricks);
if (xnb) {
if (xnb != '') {
pubu=document.URL.split('?')[0].split('#')[0] + '?numbricks=' + xnb;
} else {
pubu=document.URL.split('?')[0].split('#')[0]; // './star_proteins_vs_superbugs.htm';
}
setTimeout(andu, 2000);
}
}

function doesBrickGo(tone) {
if (eval(tone) == eval(thisone)) {
if (nextBrickToGo <= numBricks) {
if (Brick) {
bricko[eval(-1 + nextBrickToGo)].style_width('1px');
} else {
document.getElementById('b' + nextBrickToGo).style.width='1px';
}
if (nextBrickToGo == numBricks) {
document.getElementById('bricks').innerHTML='';
document.getElementById('bricks').style.width='1px';
if (Superbug) superbugo[0].tremble(true);
}
} else {
if (Superbug) {
superbugo[eval(-1 + nextBrickToGo - numBricks)].style_width('1px');
} else {
document.getElementById('sb' + eval(nextBrickToGo - numBricks)).style.width='1px';
}
}
if (Starfire) {
if ('oldway_was_independent_way' != 'oldway_was_independent_way') {
hone=starfireo[eval(tone)];
hone.style_display('block');
} else if ('thiswouldwork_without_extends_bit' != 'thiswouldwork_without_extends_bit') { // newer way ... but there's more ... where a Starfire object can be thought of as part of a Star object
//hone=staro[eval(tone)].fireo;
hone=staro[eval(tone)]; //.fireo;
hone.display_style('block');
} else { // new way where a Starfire object is superceeded by a Star object
hone=staro[eval(tone)]; //.fireo;
hone.style_display('block');
}
} else {
hone=document.getElementById('h' + eval(1 + tone));
hone.style.display='block';
}
nextBrickToGo++;
if (nextBrickToGo > eval(numBricks + numSuperbugs)) {
document.getElementById('superbugs').innerHTML='';
ask('Congratulations! That took you ' + seconds + ' seconds (ie. ' + eval((0.0 + seconds) / eval(eval(numBricks) + eval(numSuperbugs))) + ' seconds per brick and superbug). Another game with number of bricks in wall, below?');
}
}
}

function andthen() {
if (hone != null) {
if (Starfire) {
hone.style_display('none');
} else {
hone.style.display='none';
}
hone=null;
}
}

function startBorderizing() {
var i;
for (i=0; i<staro.length; i++) {
if (!Star) {
staro[i].style.border='';
} else {
staro[i].style_border('');
}
}
if (hone != null) {
setTimeout(andthen, 500); //1500
}
thisone=Math.floor(Math.random() * eval(0 + staro.length)) + 0;
if (!Star) {
staro[thisone].style.border='15px solid yellow';
} else {
staro[thisone].style_border('15px solid yellow');
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(startBorderizing, 800);
} else {
setTimeout(startBorderizing, 1200);
}
}

function counter() {
seconds++;
setTimeout(counter,1000);
}

</script>

</head>
<body onload='createStars(-1); startBorderizing(); createBricks(-1); createSuperbugs(-1); setTimeout(counter,1000); '>
<h1 style='width:100%;text-align:center;'>Star Proteins Versus Superbugs Game</h1>
<h2 style='width:100%;text-align:center;'>RJM Programming <a target=_blank style='text-decoration:underline;' title='Another game' onclick=" ask('Another game with number of bricks in wall, below?'); ">-</a> September, 2016</h2>
<h2 style='width:100%;text-align:center;'>Inspired by <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'>This Breakthrough</a> and thanks to this <a target=_blank title='Clipart Website ... thanks' href='http://www.clipartkid.com'>Clipart Website</a></h2>
<h4 style='width:100%;text-align:center;' id='myh4'>As Star Proteins Go Yellow Click to Break Down Wall and Superbug Protection</h4>
<table style='background-color: #f0f0f0;'>
<tr><td id='stars'><div style='-webkit-overflow-scrolling:touch;overflow:scroll;'></div></td>
<td id='bricks' style='width:20%;valign:top;border-left:1px gray dotted;'></td><td id='superbugs' style='width:50%;'></td></table>
</body>
</html>