<!doctype html>
<html>
<head>
<title>Ants Up the Wall Game - RJM Programming - February, 2018</title>
<style>
.f1:before { content: '\01f371' }
.f2:before { content: '\01f358' }
.f3:before { content: '\01f359' }
.f4:before { content: '\01f35a' }
.f5:before { content: '\01f35b' }
.f6:before { content: '\01f35c' }
.f7:before { content: '\01f35d' }
.f8:before { content: '\01f360' }
.f9:before { content: '\01f362' }
.f10:before { content: '\01f363' }
.f11:before { content: '\01f364' }
.f12:before { content: '\01f365' }
.f13:before { content: '\01f361' }
.f14:before { content: '\01F366' }
.f15:before { content: '\01F367' }
.f16:before { content: '\01F368' }
.f17:before { content: '\01F369' }
.f18:before { content: '\01F36A' }
.f19:before { content: '\01F382' }
.f0:before { content: '\01F370' }

.atbottom {
position: absolute;
left: calc(100% - 10px);
top: calc(100% - 28px);
font-size: 18px;
z-index: 9;
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}


#wall {
position: absolute;
left: 0px;
top: calc(100% - 550px);
width: 100%;
z-index: 0;
border-bottom: 550px solid rgba(127,0,0,0.3);
background-color: rgba(192,192,192,0.1);
background-image: linear-gradient(335deg, rgba(176,0,0,0.1) 23px, transparent 23px),
linear-gradient(155deg, rgba(208,0,0,0.1) 1px, transparent 23px),
linear-gradient(335deg, rgba(176,0,0,0.1) 23px, transparent 23px),
linear-gradient(155deg, rgba(208,0,0,0.1) 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
</style>
<script type='text/javascript'>
var curant=1;
var startx=-1;
var starty=-1;
var wally=-1;
var maxf=-1;
var eating_now_maybe=false;
var score=0;
var numants=0;
var goes=20;
var isecs=0;
var minus=0;
var okay=true;
var twentythree=23;

var Ant = function(o){
this.ourtype=o.ourtype || 'div';
this.ourclass=o.ourclass || 'atbottom';
this.ourid=o.ourid || 'ant' + curant;
this.twentythree=23;
curant++;
this.ih=o.ih || '🐜';
this.x=o.x || Math.floor(Math.random() * eval(document.getElementById('ant0').style.left.replace('px','')));
this.y=o.y || eval(document.getElementById('ant0').style.left.replace('px',''));
this.rotation=o.rotation || eval(Math.floor(Math.random() * 40) + 70);
this.dist=eval(Math.floor(Math.random() * 7) + 1);
this.moveY = function () {
return this.y-=(Math.sin(eval(this.rotation * Math.PI / 180.0)) * this.dist);
};
this.moveX = function () {
var ghtit=Math.floor(Math.random() * 50);
if (ghtit == 35 && ('' + document.getElementById(this.ourid).style.position) == 'absolute') {
this.dist=0;
this.twentythree=53;
this.rotation=o.rotation || eval(Math.floor(Math.random() * 178) - 89);
document.getElementById(this.ourid).style.position='fixed';
//document.getElementById(this.ourid).style.border='1px dotted green';
document.getElementById(this.ourid).style.backgroundColor='rgba(255, 0, 0, 0.2)';
} else if (ghtit == 5 && ('' + document.getElementById(this.ourid).style.position) == 'absolute') {
this.dist=0;
this.twentythree=23;
this.rotation=o.rotation || eval(Math.floor(Math.random() * 178) - 89);
document.getElementById(this.ourid).style.position='fixed';
//document.getElementById(this.ourid).style.border='1px dotted green';
document.getElementById(this.ourid).style.backgroundColor='rgba(144, 238, 144, 0.1)';
} else if (('' + document.getElementById(this.ourid).style.position) == 'fixed') {
ghtit=Math.floor(Math.random() * 5);
if (ghtit == 3) {
this.dist=eval(Math.floor(Math.random() * this.twentythree) + 1);
document.getElementById(this.ourid).style.border='';
document.getElementById(this.ourid).style.backgroundColor='';
document.getElementById(this.ourid).style.position='absolute';
}
}
return this.x-=(Math.cos(eval(this.rotation * Math.PI / 180.0)) * this.dist);
};
document.getElementById('rest').innerHTML+='<' + this.ourtype + ' id=' + this.ourid + ' ontouchstart="exterminate(this);" onmousedown="exterminate(this);" style="z-index:9;position:absolute;font-size:18px;width:22px;height:22px;top:' + Math.round(this.y) + 'px;left:' + Math.round(this.x) + 'px;-o-transform: rotate(' + this.rotation + 'deg); -moz-transform: rotate(' + this.rotation + 'deg); -ms-transform: rotate(' + this.rotation + 'deg); -webkit-transform: rotate(' + this.rotation + 'deg); transform: rotate(' + this.rotation + 'deg);">' + this.ih + '</' + this.ourtype + '>';
}
var ants=[];
var foods=[];

function moveants() {
var midfoodx=0, midfoody=0;
for (var i=0; i<ants.length; i++) {
if (document.getElementById('ant' + eval(1 + eval(('' + i)))).innerHTML != '') {
ants[i].moveY();
ants[i].moveX();
if (ants[i].y <= maxf) eating_now_maybe=true;
document.getElementById(ants[i].ourid).style.top=Math.round(ants[i].y) + 'px';
document.getElementById(ants[i].ourid).style.left=Math.round(ants[i].x) + 'px';
if (eating_now_maybe) {
if (eval(('' + ants[i].y)) <= eval(('' + maxf))) {
for (var j=0; j<foods.length; j++) {
if (document.getElementById('f' + j).className != '') {
if (document.getElementById('ant' + eval(1 + eval(('' + i)))).innerHTML != '') {
if (midfoodx == 0) document.getElementById('status').innerHTML='';
midfoodx=eval(9 + eval(eval(('' + foods[j].left).replace('px',''))));
midfoody=eval(22 + eval(eval(('' + foods[j].top).replace('px',''))));
if (document.getElementById('f' + j).title != '') document.getElementById('status').innerHTML+=(eval(('' + midfoodx)) + ' .ge. ' + eval(('' + ants[i].x)) + ' && ' + eval(('' + midfoodx)) + ' .le. ' + eval(18 + eval(('' + ants[i].x))));
if (eval(('' + midfoodx)) >= eval(('' + ants[i].x)) && eval(('' + midfoodx)) <= eval(18 + eval(('' + ants[i].x)))) {
if (document.getElementById('f' + j).title != '') alert(eval(('' + midfoody)) + ' >= ' + eval(('' + ants[i].y)) + ' && ' + eval(('' + midfoody)) + ' <= ' + eval(18 + eval(('' + ants[i].y))));
//alert('herex');
if (eval(('' + midfoody)) >= eval(('' + ants[i].y)) && eval(('' + midfoody)) <= eval(18 + eval(('' + ants[i].y)))) {
//alert('ants eating now');
document.getElementById('f' + j).className='';
document.getElementById('ant' + eval(1 + eval(('' + i)))).innerHTML='';
document.getElementById('ant' + eval(1 + eval(('' + i)))).style.backgroundColor='';
document.getElementById('ant' + eval(1 + eval(('' + i)))).style.border='';
delete ants[i];
minus++;
delete foods[j];
goes--;
}
}
}
}
}
if (document.getElementById('ant' + eval(1 + eval(('' + i)))).innerHTML != '') {
document.getElementById('ant' + eval(1 + eval(('' + i)))).innerHTML='';
document.getElementById('ant' + eval(1 + eval(('' + i)))).style.backgroundColor='';
document.getElementById('ant' + eval(1 + eval(('' + i)))).style.border='';
delete ants[i];
minus++;
score++;
}
}
}
}
}
setTimeout(moveants,1000);
}

function exterminate(ow) {
//alert(ow.id);
//document.getElementById('rest').innerHTML=document.getElementById('rest').innerHTML.replace(ow.outerHTML,'');
if (ow.innerHTML != '') {
ow.innerHTML='';
score++;
minus++;
ow.style.backgroundColor='';
ow.style.border='';
delete ants[eval(-1 + eval(('' + ow.id.replace('ant',''))))];
}
}

function preanotherant() {
anotherant();
//setTimeout(preanotherant, eval(Math.floor(Math.random() * 3000) + 1000));
setTimeout(preanotherant, eval(Math.floor(Math.random() * 300) + 100));
}

function anotherant() {
if (startx == -1 && starty == -1) {
var rect=document.getElementById('ant0').getBoundingClientRect();
starty=eval(('' + rect.top).replace('px',''));
startx=eval(('' + rect.left).replace('px',''));
document.getElementById('ant0').style.display='none';
var rectw = document.getElementById('wall').getBoundingClientRect(), rectf;
wally=eval(('' + rectw.top).replace('px','') - 25);
for (var ii=0; ii<=19; ii++) {
document.getElementById('rest').innerHTML+='<div id=f' + ii + ' onclick="if (1 == 2) { this.title=String.fromCharCode(32); }" title="" class=f' + Math.floor(Math.random() * 19) + ' style="position:absolute;font-size:18px;width:22px;height:22px;z-index:3;top:' + wally + 'px;left:' + Math.floor(Math.random() * eval(eval(-60 + eval(('' + startx))) + 30)) + 'px;"></div>';
rectf=document.getElementById('f' + ii).getBoundingClientRect();
foods.push(rectf);
if (maxf == -1) {
maxf=eval(eval(('' + rectf.top).replace('px','')) + eval(('' + rectf.height).replace('px','')));
} else {
maxf=Math.max(maxf,eval(eval(('' + rectf.top).replace('px','')) + eval(('' + rectf.height).replace('px',''))));
}
}
//alert(maxf);
}
numants++;
ants.push(new Ant({ourtype:"div", ourclass:"atbottom", ourid:"ant" + curant, ih:"🐜", x:Math.floor(Math.random() * startx), y:starty, rotation:eval(Math.floor(Math.random() * 40) + 70)}));
}

function isecm() {
if (okay) {
isecs++;
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.";
if (goes == 0) {
okay=false;
alert('Congratulations on keeping some food for ' + isecs + ' seconds.');
location.href=document.URL.split('#')[0].split('?')[0];
}
}
}
</script>
</head>
<body onload=' setInterval(isecm,1000); anotherant(); setTimeout(moveants,1000); setTimeout(preanotherant,2000);'>
<h1>Ants Up a Wall Game</h1>
<h3>RJM Programming - February, 2018</h3>
<h4 id=score>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.</h4>
<h4 id=status></h4>
<hr id=wall></hr>
<div class=atbottom id=ant0>🐜</div>
<div id=rest></div>
</body>
</html>