<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>Shooting Star Game - RJM Programming - July, 2019 ... thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text</title>
<style>
body {
background-color: black;
font-family: cursive;
}

.glow {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

.miniglow8 {
font-size: 8px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

.miniglow12 {
font-size: 12px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

.miniglow16 {
font-size: 16px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
<script type='text/javascript'>
var score=0;
var goes=0;
var realgoes=0;
var rect=null;
var ihs=["🌟","☄️","🌕"];
var scores=[3,2,-2];
var numos=[null,null,null,null,null,null,null,null,null,null];
var numthings=numos.length;
var six=6, eight=8;
var difficulty=3;
var havestarted=false;

function getmydiv() {
rect=document.getElementById('mydiv').getBoundingClientRect();
//document.getElementById('mydiv').style.position='absolute';
document.getElementById('mydiv').style.top=('' + rect.top).split('.')[0] + 'px';
document.getElementById('mydiv').style.left=('' + rect.left).split('.')[0] + 'px';
document.getElementById('mydiv').style.width=('' + rect.width).split('.')[0] + 'px';
document.getElementById('mydiv').style.height=('' + rect.height).split('.')[0] + 'px';
//rect.top=Math.round(rect.top);
//rect.left=Math.round(rect.left);
//rect.width=Math.round(rect.width);
//rect.height=Math.round(rect.height);
//alert('' + Math.round(rect.top) + ' ' + rect.width + ' ' + rect.height + ' ');
}

function scoreit(so, soscore) {
realgoes++;
if (soscore < 0) {
score-=Math.abs(soscore);
} else {
score+=eval(soscore * difficulty);
}
//goes++;
so.innerHTML='';
so.style.zIndex='-4';
updatescore(); //document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
if (realgoes >= numthings && (document.getElementById('score').innerHTML + '~').replace(' 0/0~',' 0/1~').indexOf(' 0/1~') == -1) {
var huht=confirm('Your score was ' + document.getElementById('score').innerHTML + '. Another game?');
if (huht) { location.href=document.URL; }
}
}

function getme(nth) {
var ih='', ihis=0, topis=0, leftis=0;
for (var j=0; j<nth; j++) {
topis=Math.floor(Math.random() * Math.round(rect.height)) + Math.round(rect.top);
leftis=Math.floor(Math.random() * Math.round(rect.width)) + Math.round(rect.left);
ihis=Math.floor(Math.random() * ihs.length);
ih+='<p onclick=scoreit(this,scores[' + ihis + ']); id=sprite' + j + ' class=miniglow' + eight + ' style="z-index:5;position:absolute;left:' + leftis + 'px;top:' + topis + 'px;">' + ihs[ihis] + '</p>';
}
return ih;
}

function movecomponents() {
var m=0;
//document.title='';
for (var i=0; i<numthings; i++) {
if (document.getElementById('sprite' + i).innerHTML != '') {
if (eval(Math.floor(Math.random() * 196745323) % 2) == 0) {
for (m=0; m<eval(Math.floor(Math.random() * six) + 1); m++) {
if (eval(('' + document.getElementById('sprite' + i).style.top).replace('px','')) <= eval('' + Math.round(rect.top))) {
//document.title+='a';
document.getElementById('sprite' + i).style.top='' + Math.round(rect.top) + 'px';
} else {
//document.title+='B'; //alert('' + eval(-1 + eval(('' + document.getElementById('sprite' + i).style.top).replace('px',''))) + 'px');
document.getElementById('sprite' + i).style.top='' + eval(-1 + eval(('' + document.getElementById('sprite' + i).style.top).replace('px',''))) + 'px';
}
}
} else {
for (m=0; m<eval(Math.floor(Math.random() * six) + 1); m++) {
if (eval(('' + document.getElementById('sprite' + i).style.top).replace('px','')) >= eval(eval('' + Math.round(rect.top)) + eval('' + Math.round(rect.height)))) {
//document.title+='c';
document.getElementById('sprite' + i).style.top='' + eval(eval('' + Math.round(rect.top)) + eval('' + Math.round(rect.height))) + 'px';
} else {
//document.title+='D';
document.getElementById('sprite' + i).style.top='' + eval(1 + eval(('' + document.getElementById('sprite' + i).style.top).replace('px',''))) + 'px';
}
}
}

if (eval(Math.floor(Math.random() * 196745323) % 2) == 0) {
for (m=0; m<eval(Math.floor(Math.random() * six) + 1); m++) {
if (eval(('' + document.getElementById('sprite' + i).style.left).replace('px','')) <= eval('' + Math.round(rect.left))) {
//document.title+='e';
document.getElementById('sprite' + i).style.left='' + Math.round(rect.left) + 'px';
} else {
//document.title+='F';
document.getElementById('sprite' + i).style.left='' + eval(-1 + eval(('' + document.getElementById('sprite' + i).style.left).replace('px',''))) + 'px';
}
}
} else {
for (m=0; m<eval(Math.floor(Math.random() * six) + 1); m++) {
if (eval(('' + document.getElementById('sprite' + i).style.left).replace('px','')) >= eval(eval('' + Math.round(rect.left)) + eval('' + Math.round(rect.width)))) {
//document.title+='g';
document.getElementById('sprite' + i).style.left='' + eval(eval('' + Math.round(rect.left)) + eval('' + Math.round(rect.width))) + 'px';
} else {
//document.title+='H';
document.getElementById('sprite' + i).style.left='' + eval(1 + eval(('' + document.getElementById('sprite' + i).style.left).replace('px',''))) + 'px';
}
}
}
}
}
setTimeout(movecomponents, 100);
}

function seths() {
havestarted=true;
goes=0;
updatescore();
}

function updatescore() {
if (havestarted) { document.getElementById('score').innerHTML='Score: ' + score + '/' + goes; }
}

function startgame() {
if (!numos[0] && score == 0) {
document.getElementById('mydiv').innerHTML=getme(numthings);
for (var k=0; k<numthings; k++) { numos[k]=document.getElementById('sprite' + k); }
goes=0;
realgoes=0;
setTimeout(seths, 100);
//havestarted=true;
//updatescore();
document.getElementById('score').title='You can click here to settle on a score.';
movecomponents();
} else if ((document.getElementById('score').innerHTML + '~').replace(' 0/0~',' 0/1~').indexOf(' 0/1~') == -1) {
var huht=confirm('Your score was ' + document.getElementById('score').innerHTML + '. Another game?');
if (huht) { location.href=document.URL; }
}
}

function calcdifficulty(tvs) {
difficulty=eval(tvs.value);
switch (difficulty) {
case 1:
six=6;
eight=16;
break;
case 2:
six=6;
eight=12;
break;
case 3:
six=6;
eight=8;
break;
case 4:
six=12;
eight=16;
break;
case 5:
six=12;
eight=12;
break;
case 6:
six=12;
eight=8;
break;
case 7:
six=16;
eight=16;
break;
case 8:
six=16;
eight=12;
break;
case 9:
six=16;
eight=8;
break;
}
}
</script>
</head>
<body ontouchstart='goes++; updatescore();' onclick='goes++; updatescore();' onload="getmydiv();">
<script type='text/javascript'>
var huh=window.parent;
if (huh) {
huh=parent.document.getElementById('mytable');
}
if (document.URL.indexOf('for=2') != -1) {
document.write("<table id=mytable style=width:100%;height:160vh;><tr><td style=width:50%;vertical-align:top;><h4 title='Click to start game' onclick=\"startgame();\" class='glow'>Shooting Star Game Player 1 <span style='border:1px dashed #1F1F1F;' onclick=\"location.href=document.URL.split('#')[0].split('?')[0];\">to 1</span></h4><div id=mydiv><br><br><p class='glow'><span class='glow'>🌟 (+3)</span>      <span class='glow'>☄️ (+2)</span>    <select class=glow onchange='calcdifficulty(this);' id=times><option value='3'>x 3 (8px 6pixels)</option><option value='6'>x 6 (8px 12pixels)</option><option value='9'>x 9 (8px 16pixels)</option><option value='2'>x 2 (12px 6pixels)</option><option value='5'>x 5 (12px 12pixels)</option><option value='8'>x 8 (12px 16pixels)</option><option value='1'>x 1 (16px 6pixels)</option><option value='4'>x 4 (16px 12pixels)</option><option value='7'>x 7 (16px 16pixels)</option></select>  <span class='glow'>🌕 (-2)</span></p></div><p class='glow' id='score' onclick='startgame();'>Click Here to Start Game</p></td><td style=width:50%;vertical-align:top;><iframe style='width:102%;height:160vh;min-height:160vh;' src='shooting_star_game.html?for=1'></iframe></td></tr></table>");
} else if (huh) {
document.write("<table id=mytable style=width:100%><tr><td style=width:50%;vertical-align:top;><h4 title='Click to start game' onclick='startgame();' class='glow'>Shooting Star Game Player 2</h4><div id=mydiv><br><br><p class='glow'><span class='glow'>🌟 (+3)</span>      <span class='glow'>☄️ (+2)</span>    <select class=glow onchange='calcdifficulty(this);' id=times><option value='3'>x 3 (8px 6pixels)</option><option value='6'>x 6 (8px 12pixels)</option><option value='9'>x 9 (8px 16pixels)</option><option value='2'>x 2 (12px 6pixels)</option><option value='5'>x 5 (12px 12pixels)</option><option value='8'>x 8 (12px 16pixels)</option><option value='1'>x 1 (16px 6pixels)</option><option value='4'>x 4 (16px 12pixels)</option><option value='7'>x 7 (16px 16pixels)</option></select>  <span class='glow'>🌕 (-2)</span></p></div><p class='glow' id='score' onclick='startgame();'>Click Here to Start Game</p></td></tr></table>");
} else {
document.write("<table id=mytable style=width:100%><tr><td><h1 class='glow'>Shooting Star Game <span style='border:1px dashed #1F1F1F;' onclick=\"location.href=document.URL.split('#')[0].split('?')[0] + '?for=2';\">for 2</span></h1><div id=mydiv><br><br><p class='glow'><span class='glow'>🌟 (+3)</span>      <span class='glow'>☄️ (+2)</span>    <select class=glow onchange='calcdifficulty(this);' id=times><option value='3'>x 3 (8px 6pixels)</option><option value='6'>x 6 (8px 12pixels)</option><option value='9'>x 9 (8px 16pixels)</option><option value='2'>x 2 (12px 6pixels)</option><option value='5'>x 5 (12px 12pixels)</option><option value='8'>x 8 (12px 16pixels)</option><option value='1'>x 1 (16px 6pixels)</option><option value='4'>x 4 (16px 12pixels)</option><option value='7'>x 7 (16px 16pixels)</option></select>  <span class='glow'>🌕 (-2)</span></p></div><p class='glow' id='score' onclick='startgame();'>Click Here to Start Game</p></td></tr></table>");
}
</script>
</body>
</html>